Menambahkan Efek Shadow dan Rounded Corner pada Elemen Gambar di Blogger

Banyak cara yang bisa kita lakukan untuk mempercantik desain blog kita, seperti menambahkan gambar pada bagian header, mengganti skema warna (color sheme), atau mengatur ulang tipografi.

Pada posting kali ini saya akan berbagi dengan Anda, para pengguna Google Blogger, bagaimana mendesain elemen gambar, khususnya yang kita sisipkan pada tubuh posting, dengan menggunakan beberapa property dari CSS3.

Property yang akan digunakan adalah box-shadow dan border-radius.

Property box-shadow digunakan untuk membuat efek bayangan di sebagian atau seluruh sisi sebuah elemen. Adapaun property border-radius digunakan untuk membuat salah satu atau seluruh sudut elemen tampil dalam bentuk melengkung (rounded corner).

Pembahasan mengenai kedua property CSS3 ini telah banyak diulas di berbagai tempat di internet, misalnya di css3.info, www.webkit.org, www.dev-hq.net, www.the-art-of-web.com, serta css-tricks.com. Anda dapat merujuk langsung ke alamat-alamat tersebut untuk mendapatkan informasi lebih jauh.

Setelah Anda login ke dashboard Blooger, klik Design lalu pilih Edit HTML. Selanjutnya cari selector CSS berikut:

.post img

Jika Anda tidak dapat menemukannya, tambahkan kode CSS berikut tepat sebelum kode ]]></b:skin>.

.pots img{
box-shadow: 0 0 5px 5px #888;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
border-radius:3px;
-moz-border-radius:3px;}

Nilai untuk masing-masing property bisa Anda ganti sesuai kebutuhan. Demikian pula halnya dengan warna untuk bayangan (shadow). Misalnya,

.pots img{
box-shadow: 0 0 5px 5px #ffffcc;
-moz-box-shadow: 0 0 5px 5px #ffffcc;
-webkit-box-shadow: 0 0 5px 5px #ffffcc;
border-radius:3px;
-moz-border-radius:3px;}

Contoh Penggunaan

Berikut adalah beberapa pengaplikasian property box-shadow dan border-radius untuk elemen gambar pada posting di Blogger.

.post img{
background:#fff;
padding:10px;
box-shadow: 0 0 5px 5px #888;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
border-radius:5px;
-moz-border-radius:5px;}

.post img{
background:#fff;
padding:10px;
box-shadow: 0 0 5px 5px #ccc;
-moz-box-shadow: 0 0 5px 5px #ccc;
-webkit-box-shadow: 0 0 5px 5px #ccc;
border-radius:3px;
-moz-border-radius:3px;}

.post img{
background:#fff;
padding:10px;
box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
border-radius:10px;
-moz-border-radius:10px;}

.post img{
background:#fff;
padding:10px;
box-shadow: -5px 5px 5px #888;
-moz-box-shadow: -5px 5px 5px #888;
-webkit-box-shadow: -5px 5px 5px #888;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;}

Selamat mencoba! Semoga bermanfaat.