Membuat Shadow Box Dengan CSS

blog yang cantik dan enak dilihat sangat berperan penting agar para visitor betah berlama-lama di blog kita. Acap kali untuk mempercantik blog kita suka menggunakan gambar-gambar yang secara tidak langsung membuat blog kita menjadi berat. Bukan membuat visitor betah berlama-lama di blog kita, melainkan membuat mereka merasa tidak nyaman. Kali ini saya akan berbagi sedikit cara untuk memepercantik blog dengna menggunakan Shadow Box CSS.




Dan dibawah ini Shadow Box CSS dari masing-masing gambar :
Shadow Box CSS Gambar A :

{
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Shadow Box CSS Gambar B :
{
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
Shadow Box CSS Gambar C :

{
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Shadow Box CSS Gambar D :

{
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888; }

Shadow Box CSS Gambar E :

{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Shadow Box CSS Gambar F :

{
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Untuk penggunaannya sobat tinggal pilih dari masing kode CSS diatas dan letakkan di bagian mana yang ingi kalian beri Shadow Box CSS . Misalkan ingin kalian letakkan pada outer-wrapper diblog sobat dan kode CSS yang akan di gunakan adalah gambar A, maka tinggal sobat copy code CSSnya dan gabungkan di code css outer-wrapper yang ada dilbog kalian.
Untuk code warna, Shadow Box CSS diatas terletak pada #888 dan bisa sobat ganti dengan code warna yang dinginkan .

Post a Comment

Boleh Komentar Asal Jangan SPAM