03/04/2016

CSS Text Shadow (Efek Bayangan untuk Teks)

03/04/2016

Properti CSS text shadow digunakan untuk menambah efek shading atau bayangan pada teks. Efek tersebut digunakan untuk menambahkan kreasi bayangan halus sehingga teks akan tampak lebih terangkat dari halaman HTML, atau menjorok kedalam, atau juga untuk menciptakan efek blur/memburam.

text-shadow

Nilai Properti CSS Text Shadow

Efek-efek shading pada CSS Text Shadow dibangun atas 4 (empat) nilai utama: sumbu offset-x, sumbu offset-y, nilai pembentuk efek blur, dan warna shading atau bayangan. Lebih jelasnya perhatikan tabel berikut.
text-shadow: 0px 2px 3px #CCCCCC;
0px sumbu offset-x: horizontal
2px sumbu offset-y: vertical
3px pembentuk karakter bayangan-blur
#CCCCCC warna bayangan

  1. offset-x : Nilai minimal adalah 1 (satu). Jika nilai berupa bilangan positif, bayangan teks akan mengalir ke kanan. Jika nilai berupa bilangan negatif, bayangan teks akan mengalir ke kiri
  2. offset-y : Nilai minimal adalah 1 (satu). Jika nilai berupa bilangan positif, bayangan teks akan mengalir ke bawah. Jika nilai berupa bilangan negatif, bayangan teks akan mengalir ke atas
  3. blur : Jika tidak ditentukan nilainya, maka nilai defaultnya adalah 0 (nol). Semakin besar nilai yang ditentukan, semakin besar pula tingkat keburamannya. Semakin kecil nilai yang ditentukan, semakin kecil pula tingkat keburamannya.
  4. Warna bayangan : Warna bayangan bisa ditentukan dengan warna hexadecimal, RGB, atau yang lain (klik tautan ini: CSS Color). Jika nilai tidak ditentukan, maka warna bayangan akan memiliki nilai yang sama dengan warna teks

Contoh Penerapan Sintaks CSS Text Shadow


Selengkapnya, untuk melihat ragam effek CSS Text Shadow klik tautan berikut Text Shadow Effect
Kembali CSS Font dan Teks