Tulisan Berbayang dengan CSS 3

Kembali lagi ke web design sob, saya lagi seneng banget nih ama pelajaran web design. Nah dalam web design yang saya pelajari, saya lagi seneng banget otak-atik CSS, ya maklumlah baru tau apa itu CSS, hehehehe. Oiya sob, kemaren saya pernah juga posting cara membuat kotak berbayang dengan CSS 3, nah kali ini masih ada sedikit sangkut pautnya dengan hal itu sob, bedanya adalah berdasarkan kotaknya saja, jika kemarin saya post ada kotaknya, sekarang hanya tulisannya saja yang berbayang, seperti berikut ini sob.



Nah, jelas beda kan sob. Oiya teknik membuat bayangan ini saya dapat dari salah satu majalah Komputer di Indonesia, majalahnya adalah PC Media, memang sih PC Media yang menyediakan tips ini Edisi sudah sedikit tua, tapi isinya masih muda-muda sob, hehehe contohnya tips ini sob. Mengapa saya bilang cukup muda? Karena masih jarang yang posting ke blog tentang cara-cara ini, maka dari itu, saya coba postinging aja sob.

Ouke tak perlu panjang lebar langsung saja yuk kita pelajari sob. Sekali lagi, konsepnya mirip dengan kotak berbayang, tetapi menggunakan property text-shadow. Contoh potongan kodenya adalah sebagai berikut.

.teks {
text-shadow: 5px 5px 3px #333;
}

Class .teks diatas didefinisikan teks berbayang. Seperti pada property box-shadow, properti text-shadow juga memiliki empat parameter yang berfungsi sama yaitu yang sebagai offset bayangan horizontal, offset bayangan vertikal, radius blur, dan warna bayangan. Berikut merupakan rinciannya. 
1. Offset Horizontat Bayangan
5px (berwarna merah) seperti contoh berarti bayangan kotak bergeser sebesar 5 pixel secara horizontal ke sebelah kanan. Jika parameter bernilai negatif, bayangan akan tampil disebelah kiri kotak. 
2. Offset Vertikal Bayangan
5px (berwarna biru) seperti pada contoh berarti bayangan kotak bergeser sebesar 5 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak. 
3. Radius Blur
Semakin besar nilai ini, bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh di atas digunakan radius blur sebesar 3 pixel (berwarna hijau). 
4. Waran Bayangan
Pada contoh ditentukan warna bayangan adalah #333.

Baiklah kode lengkap untuk menghasilkan gambar tersebut adalah seperti di bawah ini.

<html>
<head>
<style type="text/css">

.teks {
text-shadow: 5px 5px 3px #333;
font-size: 50px;
font-weight: bold;
color: blue;
}

</style>
</head>
<body>
<br><br>

<div class="teks">
                RIEZTOSHARE.blogspot.com
</div>

</body>
</html>

Nah yang tulisan RIEZTOSHARE.blogspot.com itu sobat ganti dengan tulisan yang sobat inginkan untuk dibuat berbayang, ouke sekian dulu di web design kali ini yah, semoga bermanfaat dan terimakasih. ^_^