Membuat Efek Bayangan pada Teks dengan CSS

Membuat efek bayangan pada teks - Untuk mempercantik tampilan blog, pada lokasi tertentu kita sering melihat efek bayangan sehingga terlihat timbul atau ke dalam. Biasanya efek ini digunakan pada judul postingan, judul sidebar dll.

Untuk membuat efek bayangan ini hanya diperlukan CSS sederhana yang harus Anda tambahkan pada template blog Anda. Kode yang harus di tambahkan adalah :

text-shadow: 0px 1px 0px #fff;

kode di atas hanyalah contoh, sebab nantinya Anda harus menyesuaikan nilai propertinya sesuai kesukaan anda. Perhatikan propertinya dari kode di atas:

Silahkakan sesuaikan sesuai kebutuhan.

Beberapa contoh text shadow dan opsi offsetnya

Efek Bayangan dengan CSS3 (text-shadow: 0px 1px 0px #fff;)

Efek Bayangan dengan CSS3 (text-shadow: 0px -1px 0px #8f883b;)

Efek Bayangan dengan CSS3 (text-shadow: -1px -1px 0px #8f883b;)

Efek Bayangan dengan CSS3 (text-shadow: -1px -1px 2px #145F74;)

Silahkan berkreasi dengan kesukaan Anda.

Contoh penggunaan

Sebagai contoh, anda ingin menambahkan bayangan teks pada Judul Artikel, maka langkahnya

1. Login ke Blogger
2. Klik Template --> Edit HTML --> Lanjutkan
3. Cari CSS judul, misal .post h2 kode ini kadang berbeda pada tiap template
4. Tambahkan CSS-nya, misal text-shadow: 0px 1px 0px #fff;
5. Hasilnya kurang lebih seperti ini

.post h2{
font-size:22px;
font-family: Arial, sans-serif;
color:#333;
margin:10px;
text-shadow: 0px 1px 0px #fff;
}

Selamat berkreasi...