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.

1. gubhug reyot
2. Tanty Template Modification
3. bloggerstuars

Thank you for your visit!

Greeting