Senin, 21 Juni 2010

Cara Membuat Efek Tulisan Dengan CSS Text Shadow

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.
Terima Kasih Telah Berkunjung Di Bog ini Semoga Bermanfaat
Judul: Cara Membuat Efek Tulisan Dengan CSS Text Shadow
Tulisan di Blog ini tidak semuanya saya Tulis dan juga banyak artikel Dari BLog Lainnya Cara Membuat Efek Tulisan Dengan CSS Text Shadow Blog ini hanyalah sebagai Bookmark dari Blog tetangga yang ingin saya baca ketika ada waktu Longgar untuk Blog tulisan saya Sendiri adalah http://m-shohiburridak.blogspot.com itu banyak berisi Tutorial Tentang Jaringan

Related Post:



Diposting oleh Networking di 19.36
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Gunakan Google Chrome Untuk Mendapatkan Tampilan Terbaik Blog Ini ( ^_^ )