MENAMBAHKAN EFEK BAYANGAN PADA TEXT DENGAN CSS CASCADING STYLE SHEET

Cara  Menambahkan Efek Bayangan (Text Shadow) dalam Text dengan CSS - Perlahan akan tetapi pasti, selangkah demi selangkah kita mulai merambah ke arah CSS (Cascading Style Sheet). Seperti sayur kurang garam bila menjadi seorang blogger kita tidak menguasai yang nama-nya css ini. Bila kita pelajari secara keseluruhan maka sulit rasa nya kita khatam belajar menggunakan css, apalagi kita tidak punya dasar pengetahuan tentang css. Namun bukan berarti nir mungkin bagi siapa pun buat mengetahui serta mempelajari nya. Sebab pada zaman canggih seperti ketika ini ilmu itu bisa kita dapatkan asalkan kita rajin membaca.
Sekarang kita akan belajar sedikit tentang css tentang cara menambahkan impak bayangan (shadow) pada sebuah text. Pepatah menyampaikan "sedikit demi sedikit, usang usang sebagai bukit" begitu juga dengan ilmu css ini, dari sedikit insya allah kita bisa mengerti yg poly. Baikalah telah cukup basa-basi nya serta pribadi saja ke cara menambahkan impak bayangan dalam text nya dengan memakai css nya. Model bayangan text (text shadow) misalnya terlihat pada gambar diatas.
Dalam penerapan efek bayangan pada CSS Text Shadow terdiri atas 4 (empat) nilai primer yaitu sumbu offset-x, sumbu offset-y, nilai pembentuk impak blur, serta rona shadow atau bayangan. Mari kita lihat model css text shadow ini dia:

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

Keterangan:

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

Cara Menerapkan CSS Text Shadow (Bayangan Text)

Simpan kode css ini dia ke dalam template anda tepat nya pass pada atas kode ]]> lalu simpan tempate.

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

Kemudian buat memanggil css tadi, dalam waktu menulis artikel sisipkan kode html berikut ini di mana saja, di tengah kalimat atau di awal kalimat.

id_element_kamu">Contoh Text Dengan Bayangan

Maka hasilnya akan terlihat misalnya dibawah ini:
Contoh Text Dengan Bayangan
Kamu bisa ganti isi text nya sinkron menggunakan yg engkau inginkan, apabila engkau ingin menciptakan bayangan tersebut pada sebuah tautan link maka engkau relatif mengubah tag-html nya saja sebagai seperti pada berikut ini.

Hai....id_element_kamu">Klick Link ini buat menghubungi kami..! 

Maka tulisan klick link akan mempunyai bayangan dan dapat pada klick seperti model pada bawah ini.
Hai....Klick Link ini buat menghubungi kami..!
Nah kini bagaimana bila css text shadow tersebut di terapkan pada sebuah element template blog misal nya pada template saya dalam bagian sub_menu (anak pilihan menu) blog ini.
CSS aslinya adalah misal:

.sf_menubackground-color:$(topmenu.background.color);color:$(pilihan 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_menubackground-color:$(topmenu.background.color);color:$(pilihan menu.text.color);height:29px;line-height:29px;font-size:11px;text-shadow: 0px 1px 0px #666666;}

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