Menampilkan gambar dengan effect polaroid menggunakan CSS

Bila anda merasa bosan pada tampilan gambar pada website anda. Apa salahnya bila mencoba effect polaroid ini sehingga dapat membuat tampilan gambar pada website anda lebih berbeda dari biasanya. Dan bagi saya sendiri tentunya lebih rapih karena bordernya memang sudah memiliki ciri khas dari polaroid itu sendiri. Berikut merupakan script yang bisa anda tambahkan pada file css anda.

img.polaroid {
background:#000; /*Warna Background Gambar (sesuai keinginan)*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard blur adalah 5px. Tambahkan jika ingin mempertebal */
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:180px; /*Sesuaikan dengan img atau div*/
width:180px; /*Sesuaikan dengan img atau div*/
}

Berikut tampilan antara sebelum & sesudah menggunakan effect polaroid :

noerone-polaroid di css

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s