membuat bingkai photo transparan dengan css3

membuat bingkai photo transparan dengan css3.Untuk trik blogspot kali ini kita akan belajar membuat bingkai Foto transparant .
manfaatnya sendiri ,kita bisa membuat tampilan foto di blog ,website atau postingan menjadi lebih keren.

berikut ini contoh screenshotnya:

nah..cukup kerenkan, kita membuat tampilan foto di postingan menjadi lebih unik.

sekarang lanjut ke cara-cara membuatnya:
1.silahkan ke Rancangan/design pada blog anda.
2.1. untuk selain posting = lalu  tambahkan add a gadget --> pilih html/javascript.
2.2 untuk di postingan , silahkan buat postinagn, lalu pada halaman postingan ,silahkan klik edit HTML.
3. lalu copy dan pastekan kode berikut ini di tempat sesuai selera anda.
berikut ini kodenya:
<div class="system-of-blogYow"><img src='http://1.bp.blogspot.com/-RoZWra3JhtY/Tx_QW0WsXiI/AAAAAAAAAog/0lgkdFqBoQs/s1600/cosplay-girls-japanese.jpg' width='200' height='270'/></div>
<style type="text/css">
.system-of-blogYow {
    width: 200px;
    height: 270px;

    float: left;
    border: 1px solid rgb(30, 144, 255);
    -webkit-box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    -moz-box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    }
.system-of-blogYow:before {
    content: "";
    position: absolute;
    border: 15px solid rgba(30, 144, 255, 0.5);
    width: 170px;
    height: 240px;

    -webkit-box-shadow: inset 0 0 45px #F0F;
    -moz-box-shadow: inset 0 0 45px #F0F;
    box-shadow: inset 0 0 45px #F0F;
    }
</style>

catatan:
Ganti url gambar yang warna biru dengan url gambar kesukaan kamu.
ganti yang warna ungu jika anda mau mengubah lebar dan tinggi gambar.
Kode Berwarna merah lebar dan tinggi elemen bordernya, tinggi dan lebarnya lebih kecil agar bordernya berada di dalam gambar, jadi jika anda rubah kode 200px dan juga 270px silahkan anda sesuaikan juga kode berwarna merah tersebut agar kelihatan cantik.

nah, cukup itu saja.. tidak sulitkan..