Membuat Efek Bayangan Pada Teks Blog

Share or Like on :

Pada kesempatan kali ini saya akan berbagi mengenai Trik CSS yaitu cara membuat efek bayangan pada teks. Trik ini berguna untuk memperindah tampilan blog sobat terutama pada teks yang ada pada blog sobat. Seperti pada adobe photoshop yang bisa memberikan efek bayangan pada benda apa saja, pada blog pun pasti bisa. Berikut ini adalah Contoh teks yang mempunyai bayangan.

Tampak mengagumkan bukan? :),, cara membuatnya yaitu Sobat Blogger semua harus membuat Class CSS dulu. Atau kalau sudah ada tinggal menambahkan saja properti CSS berikut pada class CSS sobat :

 text-shadow:2px 4px 8px #000;

Keterangan :

2px : Jarak Bayangan dari teks secara Horizontal, semakin besar nilainya maka semakin ke kanan.

4px : Jarak Bayangan dari teks secara Vertikal, semakin besar nilainya maka semakin ke bawah.

8px : Hardness bayangan atau ketebalan bayangan.

#000 : Warna Bayangan.

Contoh : Copy kode dibawah ini dan letakkan sebelum tag ]]></b:skin> apabila sobat menggunakan blogger, jika sobat menggunakan style biasa copy saja sebelum tag </style> ngerti kan?

.teks-bayangan {text-shadow:2px 4px 8px #000;}

Kemudian saat sobat membuat posting blog atau sejenisnya, sobat tinggal menambahkan class="teks-bayangan".

<p class="teks-bayangan">Isi teks yang akan diberi efek bayangan</p>

Seperti itulah caranya, jika kurang jelas silahkan tanyakan melalui form komentar. Sobat Blogger semua dapat mengkreasikan sendiri efek bayangan pada teks sesuai dengan yang sobat inginkan.

Diposting oleh Wawan Siswanto di Kamis, Februari 09, 2012