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
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

TEXT SHADOW

Sekian tutorial tentang CARA MEMBUAT EFEK BAYANGAN / SHADOW DI BLOG semoga bermanfaat untuk mempercantik tampilan blog . Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *

No Live Link Please! and Leave a Relevant Comment