KURAZONE ~ Dalam dunia desain, gradasi merupakan perpaduan 2 warna yang saling bertemu didalam 1 objek, pertemuan 2 warna tersebut memberikan kesan perpaduan 2 warna yang terlihat seperti 3 warna atau lebih. Pada kesempatan kali ini kita akan mempelajari bagaimana Cara Membuat Teks Gradasi CSS3 di Blog.
Bahan yang dibutuhkan disini hanyalah syntax CSS3 yang akan digabungkan kedalam class / ID dengan cara Internal CSS maupun Inline CSS.
Penulisan Syntax
#nama-id{
background: -webkit-linear-gradient(red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
atau
.nama-class{
background: -webkit-linear-gradient(red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Perlu diketahui :- Selektor yang diawali dengan tanda pagar (#) adalah ID,
cara pemanggilannya adalah <div id="nama-id"> - Sedangkan selektor yang diawali dengan tanda titik (.) adalah Class,
cara pemanggilannya adalah <div class="nama-class">
Penerapan secara Internal CSS
Buatlah style untuk membuat lingkup CSS, caranya adalah dengan menambahkan kode CSS diantara kode <style> dan </style>, seperti dibawah ini :<style>
LETAKKAN KODE CSS NYA DISINI
</style>
Contoh :<style> .kura-class{ background: -webkit-linear-gradient(red, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>
Cara pemanggilan Internal CSS
Untuk memanggil internal CSS yang telah dibuat, cukup menggunakan kode <div diikuti atribut selektor CSS (bisa berupa ID ataupun Class). Dikarenakan contoh diatas menggunakan tanda titik (.) maka cara pemanggilannya adalah menggunakan Class.Contoh :
<div class="kura-class">Teks yang diinginkan</div>
Penerapan secara Inline CSS
Inline menandakan CSS ditulis dalam 1 baris pada bagian <div dengan memasukkan style didalamnya, bentuk penulisannya adalah sebagai berikut :<div style="CSS nya disini">Teks yang diinginkan</div>
Contoh :<div style="font-size:30px;height: 30px;background:-webkit-linear-gradient(red, blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">Teks yang diinginkan</div>
Hasil :
Teks yang diinginkan
Jika ingin teks lebih besar, maka tambahkan font-size dan tinggi kolom gradasi (bisa ditambahkan secara internal maupun inline).
Contoh :
<style> .kura-class{ font-size:30px; height: 30px; background: -webkit-linear-gradient(red, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>Hasil :
Teks yang diinginkan
Selanjutnya tinggal mengubah red dan blue nya menjadi warna yang kalian inginkan.
Jika ingin menggunakan lebih dari 2 warna maka kalian bisa mengedit pada bagian background:background: -webkit-linear-gradient(red, blue, warna lain);
Contoh :background: -webkit-linear-gradient(green, yellow, red);Hasil :
INI ADALAH CONTOH TULISAN GRADASI
Note :
kode <div bisa kalian ubah sesuai kebutuhan, seperti <p, <h1 maupun <span
Contoh :
<p id="bla-bla-bla">Teks yang diinginkan</p> atau
<p class="bla-bla-bla">Teks yang diinginkan</p> atau
<p style="bla-bla-bla">Teks yang diinginkan</p> atau
<h1 style="bla-bla-bla">Teks yang diinginkan</h1> atau
<span style="bla-bla-bla">Teks yang diinginkan</span> dll.
Itulah informasi mengenai "Cara Membuat Teks Gradasi CSS3 di Blog", selamat mencoba dan semoga bermanfaat. Goodluck !
Tags
CSS