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:#FFE9C7; background:#FF6C17; text-shadow: 2px 2px 2px #A6250C; |
 | color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924; |
 |
|
 |
|
Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup. 
|
Tweet
|
Berlangganan artikel terbaru via Email
|
23 comments
komentar lg ah, biar nomor 1 di "Tukang Komentar"
CSS3 memang mantap, bikin web lebih elegan :)
mantap ulasannya sob, utk mempermudah mencari kombinasi warna shadow dengan bacground yg diinginkan bisa juga menggunakan layanan generatornya di http://westciv.com/tools/shadows/index.html
rgrds,
Tutor yang bermanfaat sob. Thanks.
Mantap nie. Boleh saya coba dulu nie. Makasi.
@a2i3s : thanks sobat infonya sgt bgs
@Dunia Komputer : ini dia teman setia yg selalu komentar, thanks sobat
@Computer Tips Tricks : oke silahkan di coba, bgs di untuk title di header blog sobat atau di title sidebar
kalo sudah support semua browsingan dengan css3, jangankan shadow!!! pemakaian script jg bisa diminimalize bos..thanks
nice tipsnya sob...miscah
waw, Qrenn... Kebetulan lagi butuh ne :P
wah kalu ini sih, gua belum tahu lihatnya juga agak ribet ya, tapi aku praktenkan nanti
nanti aku belajar ya fek tulisan ini
wah makasih infonya sob.......
jadi yg di tambahin text shadow nya ya trus nentuin color nya,...
wah bagus sekali tutorialnya.Selain bisa mempercantik web, ternyata juga bisa buad nambah pelajaran tentang web
thanks y boss!!!
thank's bro...
saya coba yaa...
Keren sob....!!! saya langsung pakai...
caranya gmn sih? ga ngerti,tlng dong...
mf mau tnya, itu masangnya dmn sob??? wah q krg phm mlkum dudul hehehehe
wah, nambah2 koleksi nih lumayan :D
makasih kang :)
bagaimana cara menggunakannya di dalam postingan mas??misalnya mau ngash judul h2 dalam posting.. thanks..:)
mantap gan... langsung dicoba
tutorialnya keren banget, jadi kalau untuk tulisan di mainnavigation bisa dikasih shadow juga ga gan?
mantap nih gan...
Posting Komentar