MEMPERCANTIK TULISAN DENGAN CSS TEXT SHADOW

Masih tentang CSS alias cascading style sheettips. Postingan ini sengaja ditulis mengingat banyaknya kata kunci yang masuk dengan topik seputar mempercantik efek tulisan pada halaman web.

Berhubung saya gak jago-jago amat pakai Photoshop (apalagi sekarang mulai kembali ke dunia asal dengan Linux), dan hanya mengerti sedikit sedikit tentang CSS jadi cara mempercantik atau memperindah tulisan dengan efek akan dihadirkan dengan CSS saja.

Supaya ada gambaran seperti apa sih Text Shadow effect itu, sobat bisa melihatnya pada bentuk tulisan di tags list yang ada di kolom sidebar (saat postingan ini dibuat).

CSS Text Shadow ini sudah ada sejak lama, ya karena merupakan bagian dari CSS 2.1 Spesification, dan tetap disupport di CSS 3. Sesuai artinya, text shadow adalah efek shadow alias berbayang pada suatu teks, tidak peduli seberapa panjang atau pendek. Bisa digunakan pada satu kata, dua kata atau bahkan dalam satu paragraph sekalipun.

Caranya mudah sekali:

lihat baris berikut:

<p class=”text-effect-shadow”>Text ini berwarna hitam dengan efek shadow abu-abu</p>

Maka pada css kita tuliskan:

.text-effect-shadow {text-shadow : 0 1px 0 #888}

maka hasilnya adalah :

gambar:

Penjelasan:

.text-effect-shadow: ini adalah nama class (silakan ganti dan sesuaikan dengan kebutuhan dan kondisi di halaman masing-masing)