CARA MEMBUAT EFEK BAYANGAN / SHADOW DI BLOG
CARA MEMBUAT EFEK BAYANGAN / SHADOW DI BLOG – Bagaimana cara membuat tampilan div dengan efek bayangan sehingga terkesan seperti tiga dimensi. Dengan menggunakan css box-shadow kita bisa dengan mudah menampilkan efek bayangan tersebut untuk lebih jelasnya ikuti tutorial berikut ini.
 |
| css box shadow |
Untuk kode css box-shadow menggunakan format
box-shadow: horizontal-ofset vertical-offset blur-radius warna-shadow;
dan untuk lebih kompatibel bagi semua browser bisa ditambahkan kode menjadi seperti
-moz-box-shadow: horizontal-ofset vertical-offset blur-radius warna-shadow;
-webkit-box-shadow: horizontal-ofset vertical-offset blur-radius warna-shadow;
box-shadow: horizontal-ofset vertical-offset blur-radius warna-shadow;
penjelasan:
horizontal-ofset: mengatur arah shadow/bayangan kearah horizontal
vertical-offset: mengatur arah shadow/bayangan kearah vertical
blur-radius : mengatur tingkatan blur pada shadow
warna-shadow : mengatur pilihan warna shadow
TUTORIAL MEMBUAT EFEK SHADOW / BAYANGAN PADA BLOG
Untuk cara pemakaian css efek shadow bisa kamu ikuti langkah-langkah berikut ini :
1. Log in ke dashboard pilih Template > Edit HTML > Proceed
2. Pilih div class yang akan diberi efek bayangan misalkan saja #sidebar kemudian di dalam {} masukan kode css :
-moz-box-shadow: 0 0 15px #FF7A00;
-webkit-box-shadow: 0 0 15px #FF7A00;
box-shadow: 0 0 15px #FF7A00;
Efek shadow ini juga bisa diaplikasikan pada text/tulisan, kamu bisa menggunakan kode
text-shadow: horizontal-ofset vertical-offset blur-radius warna-shadow;
Untuk kode cssnya bisa menggunakan kode berikut ini
text-shadow:2px 4px 8px #FF7A00;
Untuk demo keduanya lihat contoh div dan text berikut ini
Sekian tutorial tentang CARA MEMBUAT EFEK BAYANGAN / SHADOW DI BLOG semoga bermanfaat untuk mempercantik tampilan blog . Semoga bermanfaat.
