MENAMBAHKAN EFEK BAYANGAN PADA TEXT DENGAN CSS CASCADING STYLE SHEET
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;Kemudian buat memanggil css tadi, dalam waktu menulis artikel sisipkan kode html berikut ini di mana saja, di tengah kalimat atau di awal kalimat.
font-weight: bold;
color: #DC143C;
text-shadow: -3px 3px 0px #666666;}
id_element_kamu">Contoh Text Dengan BayanganMaka 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.
Comments
Post a Comment