Penerapan Efek Text Shadow dengan CSS3 - Pada postingan pertama sebelumnya Saya telah membahas sekilas tentang Panduan Meningkatkan Kualitas Blog, dan kali ini Saya akan mencoba berbagi sedikit tips cara menerapkan text shadow pada tulisan blog dengan CSS3.
CSS3 adalah satu-satunya cara untuk menambahkan efek bayangan untuk teks pada halaman blog, jika menggunakan software kita bisa menggunakan Photoshop atau Gimp dan menerapkan bayangan untuk teks kedalamnya.
Masalah dengan hal ini adalah bahwa Anda akan perlu untuk memuat gambar ke halaman blog Anda yang dapat meningkatkan beban saat proses memuat halaman blog, sehingga solusi yang terbaik adalah menggunakan trik CSS namun masih memberikan tampilan grafis yang sama karena akan menggunakan perangkat lunak grafis (Yang dirender dari hardware grafis perangkat Anda).
Bagaimana cara menerapkannya?
Penerapan kode CSS untuk teks shadow cukup sederhana yaitu menggunakan class text-shadow yang diikuti oleh 4 parameter.
1. X-coordinate
2. Y-coordinate
3. Blur radius
4. Color of the shadow
Keempat parameter di atas merupakan faktor pembuat efek text shadow. Contoh penerapan CSSnya seperti ini
.text-shadow {
padding: 10px;
text-align: center;
background: #fff;
color: #000;
text-shadow: 2px 2px 4px #666;
}<p style="padding:10px; text-align: center; background:#fff; color:#000; text-shadow: 2px 2px 4px #666;">Contoh Text shadow</p>Hasilnya akan terlihat seperti ini
Contoh Text Shadow
0 komentar
Posting Komentar