Text Shadow atau Box Shadow adalah fitur terbaru dari CSS3. Efek ini sering saya gunakan dalam pembuatan website2. Contohnya, seperti di website ini, anda bisa lihat di halaman portfolio, bayangan dari gambar portfolio itu sendiri dihasilkan oleh fitur ini.

Mari kita pelajari terlebih dahulu properti cssnya.

text-shadow: 1px 1px 1px #000;

1. Value pertama: X-Coordinate

Value ini mewakili horizontal offset dari bayangan. Value positif berarti bayangan jatuh di sebelah kanan dari objek. Value negatif berarti bayangan jatuh di sebelah kiri dari objek.

2. Value kedua: Y-Coordinate

Value ini mewakili vertical offset dari bayangan. Value positif berarti bayangan jatuh di bawah objek. Value negatif berarti bayangan jatuh di atas objek.

3. Value ketiga: Blur (Ketajaman bayangan)

Value 0 berarti bayangannya akan tajam. Semakin besar value ini, semakin kabur bayangannya.

4. Value keempat: Warna

Warna dari bayangan.

Text dengan Efek Shadow

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

House OWeb

Yang lebih menarik lagi, dari properti css yang satu ini, yaitu kita dapat mengkombinasi beberapa lapisan bayangan. Dengan sedikit kreatifitas, efek2 keren pun dapat dihasilkan. Contohnya dapat anda lihat di bawah ini:

Text dengan Efek Retro

text-shadow: 3px 3px 0 #EEEEEE, 4px 4px 0 #707070;

House OWeb

Text dengan Efek Neon

text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 20px #FF00DE, 0 0 35px #FF00DE, 0 0 40px #FF00DE, 0 0 50px #FF00DE, 0 0 75px #FF00DE;

House OWeb

Text dengan Efek Inset

text-shadow: 0 2px 3px #666666;

House OWeb

Text dengan Efek Anaglyphic

text-shadow: 4px 4px 0 rgba(255, 0, 180, 0.5);

House OWeb

Text dengan Efek Api

text-shadow: 0 0 20px #FEFCC9, 5px -5px 15px #FEEC85, -10px -10px 20px #FFAE34, 10px -20px 25px #EC760C, -10px -30px 30px #CD4606, 0 -40px 35px #973716, 5px -45px 40px #451B0E;

House OWeb

Text dengan Bayangan Beberapa Warna

text-shadow: 5px 5px 0 #FFD217, 10px 10px 0 #5AC7FF, 15px 15px 0 #FFD217, 20px 20px 0 #5AC7FF;

House OWeb

Di samping text, anda juga bisa menambahkan efek bayangan pada image anda. Contohnya seperti di bawah ini:

Box Shadow

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 3px #ccc;
}

36575 240x240

Selamat Mencoba... :)