Membuat Efek Tulisan Dengan CSS Text Shadow

gambar 4 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.

 

gambar 1

color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;

gambar 2

color: #000;
background: #fff;
text-shadow: 2px 2px #000;

gambar 3

color: #000;
background: #fff;
text-shadow: 2px -2px 3px #000;

gambar 4

color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;

image

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;

image

color: #fff;
background: #666;
text-shadow: 0px 1px 1px #000;

image

color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;

image color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
image color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
image

color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;

image

color: #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;

 

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup. Thumbs-up

Berlangganan artikel terbaru via Email
Artikel Lainnya :

23 comments

30 Januari 2010 02.50

komentar lg ah, biar nomor 1 di "Tukang Komentar"

30 Januari 2010 03.01

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,

30 Januari 2010 06.15

Tutor yang bermanfaat sob. Thanks.

30 Januari 2010 06.19

Mantap nie. Boleh saya coba dulu nie. Makasi.

30 Januari 2010 07.18

@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

30 Januari 2010 21.07

kalo sudah support semua browsingan dengan css3, jangankan shadow!!! pemakaian script jg bisa diminimalize bos..thanks

10 Februari 2010 21.52

nice tipsnya sob...miscah

14 Februari 2010 23.58

waw, Qrenn... Kebetulan lagi butuh ne :P

18 Februari 2010 23.08

wah kalu ini sih, gua belum tahu lihatnya juga agak ribet ya, tapi aku praktenkan nanti

18 Februari 2010 23.09

nanti aku belajar ya fek tulisan ini

4 Maret 2010 12.25

wah makasih infonya sob.......
jadi yg di tambahin text shadow nya ya trus nentuin color nya,...

24 Maret 2010 13.09

wah bagus sekali tutorialnya.Selain bisa mempercantik web, ternyata juga bisa buad nambah pelajaran tentang web

3 April 2010 09.29

thanks y boss!!!

8 Juli 2010 05.24

thank's bro...

saya coba yaa...

Keren sob....!!! saya langsung pakai...

Anonim
9 Oktober 2010 00.44

caranya gmn sih? ga ngerti,tlng dong...

11 Februari 2011 01.25

mf mau tnya, itu masangnya dmn sob??? wah q krg phm mlkum dudul hehehehe

19 Mei 2011 16.56

wah, nambah2 koleksi nih lumayan :D
makasih kang :)

11 Agustus 2011 11.30

bagaimana cara menggunakannya di dalam postingan mas??misalnya mau ngash judul h2 dalam posting.. thanks..:)

24 Agustus 2011 22.40

mantap gan... langsung dicoba

tutorialnya keren banget, jadi kalau untuk tulisan di mainnavigation bisa dikasih shadow juga ga gan?

30 Juni 2012 04.07

mantap nih gan...

Poskan Komentar

Reader Community

Recent Comments