Membuat Efek Bayangan Text Dengan CSS

Efek Bayangan

Sebelumnya saya udah bahas kode CSS efek membesar, ada keterangannya, memutar bikin pusing, bergeser ke kiri/kanan pada gambar dan text. Nah kali ini membahas efek bayangan pada text atau shadow text masih pakai kode CSS.

Kode CSS
.bayangan {text-shadow:2px 0px 0px blue}

Penjelasan untuk seorang yang ahli dalam bidang CSS saya kurang begitu hafal dan terlalu enjelimet alias bikin keder otak. Jadi aku pakai asumsi penjelasan yang bisa aku tulis.
Text-shadow:{Xpx Ypx XYpx warna}
X: nilai pixel dengan efek bayangan mengarah ke kiri atau ke kanan.
Y: nilai pixel dengan efek bayangan mengarah ke atas atau ke bawah.
XY: gabungan dari kedua efek bayangan di atas yang menghasilkan efek blur.
Warna: pilihan warna yang kamu suka misalnya blue/#0000ff, red/#ff0000, hitam/#000000.

Kode HTML
<div class="bayangan"> tulisan apa yang mau kamu tulis</div>

Jika efek yang di ubah pada nilai "X" misalnya: text-shadow:2px 0px 0px, text-shadow:4px 0px 0px, text-shadow:6px 0px 0px dan seterusnya... seperti contoh di bawah ini:

contoh efek bayangan 1a pada text

contoh efek bayangan 1b pada text

contoh efek bayangan 1c pada text

contoh efek bayangan 1d pada text

contoh efek bayangan 1e pada text

Jika efek yang di ubah pada nilai "Y" misalnya: text-shadow: 0px 2px 0px, text-shadow:0px 4px 0px, text-shadow:0px 6px 0px dan seterusnya... seperti contoh di bawah ini:

contoh efek bayangan 2a pada text

contoh efek bayangan 2b pada text

contoh efek bayangan 2c pada text

contoh efek bayangan 2d pada text

contoh efek bayangan 2e pada text

Jika efek yang di ubah pada nilai "XY" misalnya: text-shadow:0px 0px 4px, text-shadow:0px 0px 4px, text-shadow:0px 0px 4px dan seterusnya... seperti contoh di bawah ini:

contoh efek bayangan 3a pada text

contoh efek bayangan 3b pada text

contoh efek bayangan 3c pada text

contoh efek bayangan 3d pada text

contoh efek bayangan 3e pada text

Atau kombinasi nilai yang bisa kamu coba seperti contoh dibawah ini:

text-shadow:2px 2px 0px, text-shadow:4px 2px 0px, text-shadow:6px 2px 0px dan seterusnya...

contoh efek bayangan 4a pada text

contoh efek bayangan 4b pada text

contoh efek bayangan 4c pada text

contoh efek bayangan 4d pada text

contoh efek bayangan 4e pada text

text-shadow: 2px 0px 2px blue, text-shadow: 4px 0px 2px blue, text-shadow: 6px 0px 2px blue, text-shadow: 8px 0px 2px blue, text-shadow: 10px 0px 2px blue dan seterusnya...

contoh efek bayangan 5a pada text

contoh efek bayangan 5b pada text

contoh efek bayangan 5c pada text

contoh efek bayangan 5d pada text

contoh efek bayangan 5e pada text

text-shadow: 0px 2px 0px blue, text-shadow: 0px 4px 0px blue, text-shadow: 0px 6px 0px blue, text-shadow: 0px 8px 0px blue, text-shadow: 0px 10px 0px blue dan seterusnya...

contoh efek bayangan 6a pada text

contoh efek bayangan 6b pada text

contoh efek bayangan 6c pada text

contoh efek bayangan 6d pada text

contoh efek bayangan 6e pada text

text-shadow: 2px 2px 0px blue, text-shadow: 2px 4px 0px blue, text-shadow: 2px 6px 0px blue, text-shadow: 2px 8px 0px blue, text-shadow: 2px 10px 0px blue dan seterusnya...

contoh efek bayangan 7a pada text

contoh efek bayangan 7b pada text

contoh efek bayangan 7c pada text

contoh efek bayangan 7d pada text

contoh efek bayangan 7e pada text

text-shadow: 0px 2px 2px blue, text-shadow: 0px 4px 2px blue, text-shadow: 0px 6px 2px blue, text-shadow: 0px 8px 2px blue, text-shadow: 0px 10px 2px blue dan seterusnya...

contoh efek bayangan 8a pada text

contoh efek bayangan 8b pada text

contoh efek bayangan 8c pada text

contoh efek bayangan 8d pada text

contoh efek bayangan 8e pada text

text-shadow: 2px 0px 2px blue, text-shadow: 2px 0px 4px blue, text-shadow: 2px 0px 6px blue, text-shadow: 2px 0px 8px blue, text-shadow: 2px 0px 10px blue dan seterusnya...

contoh efek bayangan 9a pada text

contoh efek bayangan 9b pada text

contoh efek bayangan 9c pada text

contoh efek bayangan 9d pada text

contoh efek bayangan 9e pada text

text-shadow: 0px 2px 2px blue, text-shadow: 0px 2px 4px blue, text-shadow: 0px 2px 6px blue, text-shadow: 0px 2px 8px blue, text-shadow: 0px 2px 10px blue dan seterusnya...

contoh efek bayangan 10a pada text

contoh efek bayangan 10b pada text

contoh efek bayangan 10c pada text

contoh efek bayangan 10d pada text

contoh efek bayangan 10e pada text

text-shadow: 2px 2px 2px blue, text-shadow: 2px 2px 4px blue, text-shadow: 2px 2px 6px blue, text-shadow: 2px 2px 8px blue, text-shadow: 2px 2px 10px blue dan seterusnya...

contoh efek bayangan 11a pada text

contoh efek bayangan 11b pada text

contoh efek bayangan 11c pada text

contoh efek bayangan 11d pada text

contoh efek bayangan 11e pada text

Gitu aja postingan aku kali ini dan semoga bikin kamu penasaran plus makin tahu hebatnya kode CSS yang bisa mengubah sesuatu biasa menjadi nggak biasa.

Akhirnya selamat mencoba.

Ditulis Oleh: KanG piE

Info yang kamu baca adalah Membuat Efek Bayangan Text Dengan CSS dengan harapan bermanfaat untuk kamu. Silahkan kamu copas dan menyebarluaskan seluruh isi artikel ini dengan catatan menyebutkan <a href="http://sahabat-klik.blogspot.com/2012/10/membuat-efek-bayangan-text-dengan-css.html" target="_blank">Membuat Efek Bayangan Text Dengan CSS</a> sebagai asal sumber Info ini.

Sahabat KLIK