Cara Membuat Teks Gradasi CSS3 di Blog

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 :
  1. Selektor yang diawali dengan tanda pagar (#) adalah ID,
    cara pemanggilannya adalah <div id="nama-id">
  2. 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 !





Lebih baru Lebih lama