Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.
Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.
| 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 |
Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :
color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;
- color : #000 adalah warna dasar tulisan
- background: #fff adalah warna latar
- 1px 1px 1px #424242 untuk warna bayangannya (shadow)
Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.
 | color: #000; |
 | color: #000; |
 | color: #000; |
 | color: #000; |
 | color: #666; |
 | color: #fff; |
 | color: #fff; |
 | color:#FFE9C7;background:#FF6C17; text-shadow: 2px 2px 2px #A6250C; |
 | color:#823210;background:#FF6C17; text-shadow:1px 1px 1px #FF9924; |
 | color: #fff; |
 | color: #000; |
Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup.
Selamat mencoba , semoga bermanfaat dan berguna untuk anda..copy paste di bolehkan, asal tidak menjelek2kan artikel ini yang telah dibuat.Terima kasih telah berkunjung di Ihsan_blogs ..
created by IHSAN.
Baca Juga Yang Lainnya Tentang :
