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). menyerupai sayur kurang garam jikalau sebagai seorang blogger kita tidak menguasai yang nama-nya css ini. jikalau kita pelajari secara keseluruhan maka sulit rasa nya kita khatam berguru memakai css, apalagi kita tidak punya dasar pengetahuan wacana css. Namun bukan berarti mustahil bagi siapa pun untuk mengetahui dan mempelajari nya. alasannya yakni di zaman canggih menyerupai dikala ini ilmu itu sanggup kita dapatkan asalkan kita rajin membaca.

Sekarang kita akan berguru sedikit mengenai css wacana cara menambahkan dampak bayangan (shadow) pada sebuah text. Pepatah menyampaikan "sedikit demi sedikit, usang lama menjadi bukit" begitu juga dengan ilmu css ini, dari sedikit insya allah kita sanggup mengerti yang banyak. Baikalah sudah cukup basa-basi nya dan eksklusif saja ke cara menambahkan dampak bayangan pada text nya dengan memakai css nya. pola bayangan text (text shadow) menyerupai terlihat pada gambar diatas.

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

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

Keterangan:

• Nilai 1px pada css diatas yakni 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 aksara bayangan-blur, jikalau di beri niai 0px maka garis bayangan text akan terihat terang tapi jikalau di beri nilai 3px garis bayangan tidak terang (blur). dan
• #666666 merupakan isyarat warna css untuk warna bayangan.

Cara Menerapkan CSS Text Shadow (Bayangan Text)

Simpan isyarat css berikut ini ke dalam template anda sempurna nya pass di atas isyarat ]]></b:skin> lalu 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 dikala menulis artikel sisipkan isyarat html berikut ini di mana saja, di tengah kalimat atau di awal kalimat.

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

Maka kesudahannya akan terlihat menyerupai dibawah ini:

Contoh Text Dengan Bayangan

Kamu sanggup ganti isi text nya sesuai dengan yang kau inginkan, jikalau kau ingin menciptakan bayangan tersebut pada sebuah tautan link maka kau cukup mengganti tag-html nya saja menjadi menyerupai 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 goresan pena klick link akan mempunyai bayangan dan sanggup di klick menyerupai pola di bawah ini.

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

Nah kini bagaimana jikalau css text shadow tersebut di terapkan pada sebuah element template blog misal nya pada template aku pada bab sub_menu (anak menu) blog ini.

CSS aslinya yakni 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 menyerupai 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 menyerupai yang terlihat pada sub_menu template blog ini, arahkan mouse anda ke bab hidangan dengan tanda panah untuk melihat sub_menu template blog ini. kini cobalah berkreasi sendiri dengan css text shadow tersebut. Semoga artikel ini sedikit membantu anda dalam mengenal css dan cara menerapkan nya.