Menambahkan Efek Bayangan pada Text dengan CSS (Cascading Style Sheet)

 Menambahkan Efek Bayangan pada Text dengan CSS (Cascading Style Sheet)

Cara  Menambahkan Efek Bayangan (Text Shadow) pada Text dengan CSS - Perlahan tapi pasti, selangkah demi selangkah kita mulai merambah ke arah CSS (Cascading Style Sheet). seperti sayur kurang garam jika sebagai seorang blogger kita tidak menguasai yang nama-nya css ini. jika kita pelajari secara keseluruhan maka sulit rasa nya kita khatam belajar menggunakan css, apalagi kita tidak punya dasar pengetahuan tentang css. Namun bukan berarti tidak mungkin bagi siapa pun untuk mengetahui dan mempelajari nya. sebab di zaman canggih seperti saat ini ilmu itu bisa kita dapatkan asalkan kita rajin membaca.

Sekarang kita akan belajar sedikit mengenai css tentang cara menambahkan efek bayangan (shadow) pada sebuah text. Pepatah mengatakan "sedikit demi sedikit, lama lama menjadi bukit" begitu juga dengan ilmu css ini, dari sedikit insya allah kita bisa mengerti yang banyak. Baikalah sudah cukup basa-basi nya dan langsung saja ke cara menambahkan efek bayangan pada text nya dengan menggunakan css nya. contoh bayangan text (text shadow) seperti terlihat pada gambar diatas.

Dalam penerapan efek bayangan pada CSS Text Shadow terdiri atas 4 (empat) nilai utama yaitu sumbu offset-x, sumbu offset-y, nilai pembentuk efek blur, dan warna shadow atau bayangan. Mari kita lihat contoh css text shadow berikut ini:

{text-shadow: 1px 2px 3px #666666;}

Keterangan:

• Nilai 1px pada css diatas adalah merupakan sumbu offset-x: horizontal, semakin besar nilai nya maka bayangan text akan semakin ke kanan, dan sebaliknya semakin kecil nilai nya misal nya -3px (minus tiga pixel) maka bayangan text akan semakin kekiri.
• Nilai 2px merupakan sumbu offset-y: vertical, semakin besar nilai nya maka bayangan text semakin ke bewah, dan sebaliknya semakin kecil nilai nya misal -4px (minus empat pixel) maka bayangan tex akan semakin ke atas.
• Nilai 3px merupakan pembentuk karakter bayangan-blur, jika di beri niai 0px maka garis bayangan text akan terihat jelas tapi jika di beri nilai 3px garis bayangan tidak jelas (blur). dan
• #666666 merupakan kode warna css untuk warna bayangan.

Cara Menerapkan CSS Text Shadow (Bayangan Text)

Simpan kode css berikut ini ke dalam template anda tepat nya pass di atas kode ]]></b:skin> kemudian simpan tempate.

.id_element_kamu{font-size: 30px;
   font-weight: bold;
   color: #DC143C;
   text-shadow: -3px 3px 0px #666666;}

Kemudian untuk memanggil css tersebut, pada saat menulis artikel sisipkan kode html berikut ini di mana saja, di tengah kalimat atau di awal kalimat.

<span class="id_element_kamu">Contoh Text Dengan Bayangan</span>

Maka hasilnya akan terlihat seperti dibawah ini:

Contoh Text Dengan Bayangan

Kamu bisa ganti isi text nya sesuai dengan yang kamu inginkan, jika kamu ingin membuat bayangan tersebut pada sebuah tautan link maka kamu cukup mengganti tag-html nya saja menjadi seperti di berikut ini.

Hai....<span class="id_element_kamu"><a href="http://tukanglistrikpulaubatam.blogspot.co.id/">Klick Link</a></span> ini untuk menghubungi kami..! 

Maka tulisan klick link akan memiliki bayangan dan dapat di klick seperti contoh di bawah ini.

Hai....Klick Link ini untuk menghubungi kami..!

Nah sekarang bagaimana jika css text shadow tersebut di terapkan pada sebuah element template blog misal nya pada template saya pada bagian sub_menu (anak menu) blog ini.

CSS aslinya adalah misal:

.sf_menu{background-color:$(topmenu.background.color);color:$(menu.text.color);height:29px;line-height:29px;font-size:11px;}

Setelah di tambahkan properti text shadow (bayangan bayangan text) maka css sub_menu menjadi seperti berikut ini.

.sf_menu{background-color:$(topmenu.background.color);color:$(menu.text.color);height:29px;line-height:29px;font-size:11px;text-shadow: 0px 1px 0px #666666;}

Dan hasil nya seperti yang terlihat pada sub_menu template blog ini, arahkan mouse anda ke bagian menu dengan tanda panah untuk melihat sub_menu template blog ini. sekarang cobalah berkreasi sendiri dengan css text shadow tersebut. Semoga artikel ini sedikit membantu anda dalam mengenal css dan cara menerapkan nya.

Tweet