gubhug reyot
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

CSS nggolekisearchporm

Animated Box for HTML Code Posting Using CSS3

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

You can see other best tutorial below ...

Please open the links below to read the others bloggers tutorial who can complete the tutorials and demos on this blog.Thank you for your visit!

Greeting

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

Recent Posts Using jQuery-CSS3

 
GR | Edited by | gubhug reyot