Animated Box for HTML Post - Using CSS3
Box Posting Kode HTML-1 dengan Animasi (Animated HTML Post Box-1)
<style type="text/css">
/* kode css untuk expand horizontal div / box */
.bgsGRnodetail, .bgsGRnodetail2 {
height: 220px; // width sebelum perubahan
width: 149px;
border: 6px solid transparent;
opacity: 0.6;
-o-transition: all 1s ease-in-out; // CSS3 transition - transformation CSS3 transition-transformation
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
margin: 10px;
padding: 3px;
overflow: hidden; // pentingnya overflow
border-radius: 6px;
-moz-border-radius: 6px; // rounded corners - border radius CSS3
-webkit-border-radius: 6px;
position: relative;
float: left;
}
.bgsGRnodetail {
box-shadow: 1px 1px 10px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 10px #fff;
}
</style>
Box Posting Kode HTML-2 dengan Animasi (Animated HTML Post Box-2)
<style type="text/css">
/* kode css untuk expand horizontal div / box */
.bgsGRnodetail, .bgsGRnodetail2 {
height: 220px; // width sebelum perubahan
width: 149px;
border: 6px solid transparent;
opacity: 0.6;
-o-transition: all 1s ease-in-out; // CSS3 transition - transformation CSS3 transition-transformation
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
margin: 10px;
padding: 3px;
overflow: hidden; // pentingnya overflow
border-radius: 6px;
-moz-border-radius: 6px; // rounded corners - border radius CSS3
-webkit-border-radius: 6px;
position: relative;
float: left;
}
.bgsGRnodetail {
box-shadow: 1px 1px 10px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 10px #fff;
}
</style>
Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:
Tutorial Animated Box for HTML Post Using CSS3
Tutorial Animated Box for HTML Post Using CSS3
Ini adalah sebuah teknik sederhana untuk menciptakan perubahan pada background blog, yang terutama banyak dimanfaatkan untuk widget blog. Jika sebelumnya untuk menciptakan efek atraktif yang menyertai fungsi ini hanya dapat dilakukan dengan bantuan jQuery, motool dan javascript yang lain, kini berkat CSS3, beberapa efek fantastis bisa kita buat hanya dengan kode CSS. Perubahan background (background color dan background image) dapat dibarengi dengan menyertakan bentuk animasi pada efek transparansi, transisi warna dan mungkin jika diinginkan bisa kita sertakan juga perubahan pada border (border-color, border-width) ....
Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
