Dua Cool CSS3 Effect

Berbicara tentang CSS animations benar-benar mengagumkan. Kode yang dibubuhkan bisa menghasilkan hasil setara JavaScript dan Flash. Halus, lembut, dinamis dengan hadirnya variabel transitions and animations Hampir semua browser sekarang mendukung variable tersebut, walau ada sedikit perbedaan dalam sentuhan hasil akhir :P
Koben akan berbagi satu web informativ dengan konten meliputi beberapa label yg memang banyak digandrungi. Tutorial kali ini akan menjelaskan cara membuat fitur CSS3 dengan animasi latar belakang miring n smooth dipadu dengan efek zoom hover di setiap div-nya.
DEMO

It's pure CSS3! Yes It Is.

Pushing the web forward.

Cool CSS Zooming and Tilting Effect

Cool CSS Zooming and Tilting Effect

It's pure CSS3! Yes It Is.

Pushing the web forward.

Here's so adem, hangat syekali!

Yes, it's soo warm...for you dude!!!

Silahkan baca caranya disini Codicode Web itu yg gue maksudkan :D Acak-acak bosss :))
KODE CSS

.dAnim {
margin: 15px auto;
padding: 5px;
border: 1px solid #aaa;
display: inline-block;
position: relative;
font-family: Georgia,Verdana,Tahoma;
transition: transform .2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-ms-transition: -ms-transform .2s ease-out;
-o-transition: -o-transform .2s ease-out;
background-image: linear-gradient(135deg,#fff 25%,#738FCE 25%,#738FCE 50%, #fff 50%, #fff 75%,#738FCE 75%,#738FCE 100%);
background-image: -moz-linear-gradient(135deg,#fff 25%,#738FCE 25%,#738FCE 50%, #fff 50%, #fff 75%,#738FCE 75%,#738FCE 100%);
background-image: -ms-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-image: -o-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #dadada), color-stop(.25, #c2c2c2),color-stop(.5, #c2c2c2),color-stop(.5, #dadada),color-stop(.75, #dadada),color-stop(.75, #c2c2c2),color-stop(1, #c2c2c2));
background-image: -webkit-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-size: 40px 40px;
animation: bganim 3s linear 2s infinite;
-moz-animation: bganim 3s linear 2s infinite;
-webkit-animation: bganim 3s linear 2s infinite;
-ms-animation: bganim 3s linear 2s infinite;
-o-animation: bganim 3s linear 2s infinite;
z-index:98;
}
@keyframes bganim { from {background-position: 0px;} to { background-position: 40px;} }
@-moz-keyframes bganim { from {background-position: 0px;} to { background-position: 40px;} }
@-webkit-keyframes bganim { from {background-position: 0px;} to { background-position: 40px;} }
@-ms-keyframes bganim { from {background-position: 0px;} to { background-position: 40px;} }
@-o-keyframes bganim { from {background-position: 0px;} to { background-position: 40px;} }
.dAnim:hover {
transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.dAnim div {
border: 1px solid transparent;
background: rgba(255,255,255,.7);
}
.dAnim:hover div {
border: 1px solid #444;
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}

HTML Markup:<div class="dAnim">
<div>
<img src="LINK-YOUR-IMAGE" />
<div>
BLAH BLEH BLOH 1 HERE...
<div>
BLAH BLEH BLOH 2 HERE...
</div>
</div>
</div>
</div>

Bonus:

Beben Koben

.mokume {
text-align: center;
font-size: 45px;
color: #2b2721;
font-weight: bold;
line-height: 80px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5),-2px -1px 1px rgba(255, 255, 255, 0.7);
margin: 0 auto;
width: 75%;
height: 80px;
border: 1px solid #ad8e5f;
border-bottom: 3px solid #736754;
border-right: 3px solid #736754;
border-radius: 80px 15px 65px 50px / 50px 15px 50px 25px;
box-shadow: 3px 3px 1px #e6cfac inset;
background-color: #bd9662;
background-image: -moz-repeating-radial-gradient(15% 10%, ellipse closest-corner, #bd9662, #dec69b 80%,#ad8745 100%);
background-image: -webkit-repeating-radial-gradient(15% 10%, ellipse closest-corner, #bd9662, #dec69b 80%,#ad8745 100%);
background-image: repeating-radial-gradient(15% 10%, ellipse closest-corner, #bd9662, #dec69b 80%,#ad8745 100%)
}

Sourcenya lupa :D
Happy coding \m/