Cara Membuat Efek TEXT SHADOW Drop Shadow

Gambar diatas adalah contoh penggunaan efek shadow dengan kurang lebih memakai tehnik yang sama. Saya akan menyebutnya tehnik drop shadow dan akan dibahas pada halaman ini. Let’s just get started.

Pada gambar yang pertama, efek yang dipakai menggunakan 4 macam variable. Sengaja dipilih warna hitam untuk fontnya dengan latar background putih agar nanti nampak lebih jelas perbedaannya. Drop shadow diatas ditampilkan dengan  kode CSS:

h1 {

font-family: helvetica, arial, sans-serif;

font-size:180px;

color: #000000;

text-align:center;

text-shadow: 5px 7px 3px #333333;}

Seperti yang terlihat pada gambar pertama, efek pada gambar tersebut merupakan variabel yang memiliki fungsinya masing-masing.

5px merupakan X-offsetnya atau disebut juga Horisontal Offset.

7px merupakan Y-offsetnya atau disebut juga Vertikal Offset.

3px merupakan nilai drop shadow atau blur.

#333333 merupakan warna dari drop shadow itu sendiri.

Pada beberapa tehnik lain yang digunakan oleh para master web designer, sebagian ada yang menggunakan satuan font menggunakan px dan ada pula .em, dan penggunaan kode warna HEX dan RGBa. HEX memiliki ciri “#” tepat didepan kode warna sedangkan RGBa menggunakan “()” sebagai tandanya. But it’s all up to your choice. Tapi jika masih mengalami kesulitan untuk menentukan warna, tool converter warna mungkin bisa jadi pertimbangan.