Membuat Ujung Gambar Bershadow Dengan CSS3

Apa Itu Sih CSS3 ?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.
oooo...
Eh Ada Agan.. yang setia nih :P,,kali ini ane akan sharing cara buat gambar bershadow dengan CSS3 gan.
silahkan ikuti langkah-langkah Dibawah ini gan dan buktikan kecanggihan CSS 3 Terbaru ini !!


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

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Keterangan :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna Biru 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 Biru saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 5, Safari V 4 dan Google Chrome.

Author : Unknown

Share this

Related Posts