Css3 Effect (Simple and More Usefull)

Oi sobat sobat giblog.. posting lagi nih . Sekarang mau share gimana canggihnya css3 . Kalau menurut aku sendiri css3 juga bisa disbut write less do more code nih, layaknya jquery, mootools, protoype dll.. (lha itu kan javascript library ? kok disama2in sama css ?? =D ) .

Dan share kali ini, akan share beberapa effect menggunakan css3 yg cukup berguna dan tanpa menggunakan banyak script atau javascript .

ini beberapa effect nya.

1.Sliding Door
2.Link Nudging
3.Gradient Background tanpa Image
4.Simple Slide Hover
5.Simple Rotate Scale
6.Advandce Rotate Scale
7.Mask Image
8.Reflection

dan semuanya bisa temen2 liat disini,

Demo

Nb: Checked on chorme n safari4, ga jalan di IE atau FF, itu mungkin salah satu sebab saya lebih suka dengan google chrome .
Gimana ? mau coba ?? nih saya share satu demi satu tutorialnya..

1. Sliding Door .

Css.

.open {
   width: 200px;
   height: 200px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   float: left;
   margin: 1em;
  }
  
  .open img {
   position: absolute;
   top: 0; left: 0;
  }
  
  
  .open img {
   -webkit-transition: left .6s linear;
  }
  
  .open:hover img {
   left: -200px;
  }

Nb: Letak effect / kelebihanya adalah pada -webkit-transition . ini membuat image bergeser kekiri . Dan juga pada hover img yg membuat image bergeser kekiri .

HTML

<div class="open"> 
  <img src="img/image.jpg" alt="" /> 
  <p>Sliding Door</p> 
</div> 

Nb: img/image.jpg ini adalah gambar yg dimana saat hover mouse akan terbuka, ganti dengan Url gambar semau sobat .


2. Link Nudging.

Css

#nudging li a {
   position: relative;
   -webkit-transition: left .3s linear;
  }
  
  #nudging li a:hover {
   left: 10px;
  }

HTML

<ul id="nudging"> 
  <li><a href="#">Link</a></li> 
  <li><a href="#">Link</a></li> 
  <li><a href="#">Link</a></li> 
  <li><a href="#">Linkt</a></li>      
  </ul> 

Nb: Gag perlu lagi deh pake jQuery Link nudging

3. Gradient Background Tanpa Image.

Css:

background: -webkit-gradient(linear, 0 0, 100% 100%, from(#000), to(#ffffff));

Nb:

>>so pasti warna bisa diganti sesuai selera .
>>Bisa digunakan untuk background blog ataupun background box, background apa saja bisalah..

4. Simple Slide Hover

Css:

#box {
   width: 250px;
   height: 250px;
   background: grey;
   position: relative; 
   
   -webkit-transition: left 2s linear;
  }
  
  #box:hover {
   left: 100px;
  }

Nb: -webkit-transition: left 2s linear; bisa di implementasikan dimana saja, tidak hanya di sebuah 'box'

HTML:

<div id="box"> 
      
     </div> 

5. Simple Rotate Scale

Css:

@-webkit-keyframes pulse {
   from {
    -webkit-transform: rotate(0deg);
   }
   
   to {
    /*
    -webkit-transform: rotate(20deg);
    -webkit-transform: scale(2);
    */
    
    -webkit-transform: rotate(180deg) scale(2);
   }
  }
   
   .pulse {
    _-webkit-animation: pulse 4s alternate 2;
    
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 4;        
    
    width: 300px; height: 100px; background: grey; position: relative; margin: 200px auto 0; line-height: 100px; text-align: center; font-family: arial;
   }

HTML

<div class="pulse"> 
  <p>Giblog</p> 
 </div> 

6. Advance Rotated Scale

Css:

@-webkit-keyframes pulse {
   0% {
    
   }
   
   50% {
    -webkit-transform: rotate(-180deg) scale(5);
   }
   
   100% {
    -webkit-transform: rotate(-360deg) scale(2.5);
   }
  }
  
  .pulse {
   -webkit-animation: pulse 4s alternate 2;
    
    width: 300px; height: 100px; background: grey; position: relative; margin: 200px auto 0; line-height: 100px; text-align: center; font-family: arial;   
  }

HTML:

<div class="pulse"> 
  <p>Giblog</p> 
 </div> 

7. Mask Image.

Css:

#mask img {
  -webkit-mask-box-image: url(http://i38.tinypic.com/21l7vnr.jpg);
  opacity: .2;
 }
 
#mask img:hover {
  -webkit-transition: opacity 1s linear;
  opacity: 1;

Nb: http://i38.tinypic.com/21l7vnr.jpg ini adalah mask berbentuk hati .

HTML:

<div class="Mask"> 
  <img src="http://i38.tinypic.com/2n84qcl.jpg"> 
 </div> 

8. Reflection.

Css:

#reflection img {
  -webkit-box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white));
 }

HTML:

<div class="relection"> 
  <img src="image.jpg"> 
 </div> 

Selesai...... banyak banget dah.. tapi cukup usefull nih.. moga berguna yah sob ?? comment nya dong ?? wkwkwkwkw .