Sudah lama saya tidak memberikan suatu tips yang mungkin sederhana tapi bermanfaat. hem.. pada kali ini saya akan memebrikan tips trik cara membuat text shadow, cara sangat mudah sekali silahkan Anda pelajari penjelsannya berikut ini :
Untuk yang pertama yaitu kode untuk membuat text shadow yaitu seperti dibawah ini :
color: #000;
background: #ccc;
text-shadow: 1px 1px 1px #ffffff;
Keterangannya :
- color : #000 adalah warna dasar tulisan yang akan tampil
- background: #ccc adalah warna latar belakangnya
- 1px 1px 1px #ffffff untuk warna bayangannya atau trik shadownya
Misalnya pada title Blog pada adalah dibawah ini :
.blog-title{ color: #000; background: #ccc; text-shadow: 1px 1px 1px #ffffff; margin:0 0 5px; padding-left:20px}
Biru adalah penambahan efek shadownya, untuk penambahan kode "margin" dan "panding" adalah untuk penentuan posisi rulisan agar lebih rapih pada title di Blog saya. Nah sekarangpun Anda bisa berkreasi apa yang Anda mau dengan kode yang cukup pendek tapi sangat bisa menghidupkan text pada Blog atau title menjadi lebih hidup. Contohnya seperti dibawah ini :
Namun kelemahan trik ini tidak semua Broswer support dengan kode tersebut, nah jika ingin berikut ini adalah daftar boswer yang tidak suport dengan kode shadow diatas.
Safari 3.1 (Mac/Win) | yes, but no multiple shadows |
Safari 4 (Mac/Win) | yes, full support |
Opera 9.5 (Mac/Win/Lin) | yes, full support |
Firefox 2/3 (Mac/Win/Lin) | no |
Firefox 3.1/3.5 (Mac/Win/Lin) | yes, full support |
Google Chrome 1 (Win) | no |
Google Chrome 2 (Win) | yes, full support |
IE 7/8 (Win) | no |
Shiira (Mac) | yes, but no multiple shadows |
Safari on iPhone | yes, but no multiple shadows |
Opera Mini 4.1 | yes, no blur radius |
Nah silahkan Anda pikirkan dan silahkan ANda berkreasi sesuai selera Anda untuk mempercantik BlogAnda, Untuk sumber gambar saya ambil dari Blog master Miscah.blogspot.com, saya ucapkan terimakasih dan semoga bermanfaat.
Tidak ada komentar:
Posting Komentar