Mengotak atik dan belajar CSS memang asyik, dan sepertinya tak ada bosannya. Seperti halnya CSS yang dipakai dalam blog ini sudah mengalami banyak sekali perubahan, dari mulai menggabungkan file image menjadi image sprite, menambahkan loggo, membuat gradasi warna, membuat efek bayangan pada blockquote dan lain-lainnya. Namun semua itu akan dibahas pada postingan terpisah. Untuk sekarang, saya akan memberikan contoh sederhana memberi effect shadow pada link.
Hanya sedikit kode yang perlu ditambahkan untuk memberi effect shadow atau bayangan pada link ini. Kode tersebut adalah “text-shadow:2px 2px 2px #FF5F00″. Effect shadow ini bisa diterapkan pada setiap jenis link, baik link pada postingan, h1, h2, dan seterusnya, termasuk juga link – state seperti active, hover (on rollover) ataupun visited. Supaya spesifik saya akan memberi contoh effect shadow pada state hover seperti di blog ini.
Untuk menambahkan kode ini, buka file CSS dari hostingan atau langsung dari blog sobat. Bagi yang menggunakan wordpress bisa membuka Dashboard – Appearance – Editor – dan buka file style.css sesuai dengan tema yang digunakan. Kemudian tambahkan kode ini “text-shadow:2px 2px 2px #FF5F00″ Contoh:
Sebelumnya a :hover{color:#FF5F00;}
Menjadi => a :hover{color:#FF5F00; text-shadow:2px 2px 2px #FF5F00;}
Nah, mudah bukan? Setelah menambahkan sedikit kode ini maka link yang hover atau ketika mouse mendekati link tersebut akan memiliki effect shadow atau bayangan di belakangnya. Sebagai catatan, angka 2px 2px 2px adalah nilai untuk besarnya bayangan dan posisinya, sementara #FF5F00 adalah warna bayangan. Nilai tersebut bisa disesuaikan sendiri sesuai keinginan sobat supaya tampilannya matching dengan tema yang digunakan. Selain itu Sobat juga dapat Mempercantik Tampilan Blockquote dengan dengan menambahkan efek shadow atau bayangan pada postingan terpisah. Karena pada dasarnya efek bayangan atau shadow pada css ini berlaku umum. Artinya bisa diterapkan bukan hanya pada teks, tapi pada blockquote, tombol dan lain-lainnya. Sampai sini saja, selamat mencoba dan semoga bermanfaat ya…
