Kumpulan efek gambar untuk blog
Berjumpa lagi dengan saya kali ini saya akan membagikan sebuah tutorial efek efek gambar untuk mempercantik blog anda,
dan mungkin sekarang dalam postingan kali ini saya tidak menyertakan contohnya atau demo, saya yakin dengan sobat smua tentunya sudah tau kan ketika sobat berkunjung ke blog lain dan ketika Sobat menaruh mous kita di sebuah gambar akan terjadi sebuah perubahan atau sebuah gerakan dari gambar tersebut entah itu membesar gambarnya atau juga berputar. nah langsung aja ni sob kalau sobat berminat tinggal kopas kode kode tersebut di bawah ini.
- EFEK BERPUTAR
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}
- EFEK FADE OUT
.post img{-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;}.post img:hover{opacity:0.2;}
- EFEK BUMPING
.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}.post img:hover{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px);}
- EFEK ROTASI
.post img{background-color:#ffffff;border:0px;outline:none;padding:5px 5px 20px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);box-shadow:0 1px 3px rgba(0,0,0,0.7);}.post img:hover{-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}
- EFEK ZOOM
.post img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }
- EFEK ZOOM Versi ke 2
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Langkah Penerapannya gampang tinggal Copy/paste
- Buka blog id sobat
- kemudian pilih templat
- Selanjutnya edit HTML
- Kemudian Copy kode pilihan Sobat Letakan di atas kode ]]></b:skin>
- Simpan
Selesai...
Selamat mencoba dan semoga bermanfaan untuk sobat semua khususnya bagi saya sendiri
================================================================
Sedikit tambahan
Efek zoom ala kaca pempesar
Letakan kode d bawah ini tepat di atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://gadget-irvan.googlecode.com/files/perbesar-gambar.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#gambaranu').perbesaranunya({ sorotanu: 2, kisaranu: [2,10], anubesar: null, pembesaranu: [140,140] }) }) </script>
dan ini kode penerapan image nya
<img id="gambaranu" src="Url gambar" style="height: 300px; width: 400px;" />
Cara memakai background image pada postigan
Penerapan nya gampang tinggal memasukan kode di bawah ini ke dalam postingan (HTML)
<div style="padding: 5px; background-image: url(URL GAMBAR FORMAT JPG); background-repeat: repeat; background-position: center;">
TULIS ARTIKEL/POSTINGAN SOBAT DI SINI
<br /> </div>
0 komentar:
Posting Komentar