Membuat Tepi Gambar Bershadow Dengan CSS 3

Pada postingan kali ini saya mau share bagaimana membuat tepi gambar bershadow agar tampilan blog kita lebih menarik gan, mau tau caranya gimana??

let's check it out,,,!!

sebelum masuk ke pokok pembahasan terlebih dahulu kita mengetahui pengertian dari CSS itu sendiri agar agan-agan semua paham dan tidak pusing untuk menerapkannya ke dalam blog

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah setelah mengetahui pengertiannya langsung saja kita praktekkan "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau udah kamu pasang dan lihat dehh hasilnya
semoga bermanfaat ya gan,,,!

Baca Yang ini Juga Ya....