Jumat, 18 Februari 2011

Cara Membuat Text Shadow Dengan CSS

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
Cara pengaplikasikannya pada CSS Anda:

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 :

gambar 1color: #000; 
background: #fff; 
text-shadow: 2px 2px 3px #000;
gambar 2color: #000; 
background: #fff; 
text-shadow: 2px 2px #000;
gambar 3color: #000; 
background: #fff; 
text-shadow: 2px -2px 3px #000;
gambar 4color: #000; 
background: #666; 
text-shadow: 0px 1px 1px #fff;
imagecolor: #666; 
background: #000; 
text-shadow: 0px 1px 0px #ccc;
imagecolor: #fff; 
background: #666; 
text-shadow: 0px 1px 1px #000;
imagecolor: #fff; 
background: #000; 
text-shadow: 1px 1px 6px #fff;
imagecolor:#FFE9C7;background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
imagecolor:#823210;background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
imagecolor: #fff; 
background: #fff; 
text-shadow: 1px 1px 4px #000;
imagecolor: #000; 
background: #000; 
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;


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.


Artikel Terkait:


Diposting oleh Ichsan Saputra di 20.57
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Komentator Blog Ini