Cara Membuat Teks Gradasi CSS3 di Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Teks Gradasi CSS3 di Blog

Pilihan Editor :

Cara Membuat Teks Gradasi CSS3 di Blog
Penulis Bagus Surochman
0
Modus malam



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 !
nanio
Cara Membuat Teks Gradasi CSS3 di Blog
Cara Membuat Teks Gradasi CSS3 di Blog Cara Membuat Teks Gradasi CSS3 di Blog Reviewed by Bagus Surochman on 7/05/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.