CSS3berikut akan menambah perbendaharaan pengetahuan seputar CSS 3 kita :D Karena pemilik blog mungkin kecepatan dalam berkreasi, dan menggunakan var webkit dalam meramunya! Seperti kita ketahui bersama, bahwasannya variable code CSS-3 pada setiap browse itu berbeda. Membuat bingung para pemakai :D Belum lagi pengetahuan type/versi browse apa saja yg sudah support terhadap varibel tersebut #-o CSS3 Browser Support Reference
Cara cepat and simpelnya begini sob: Firefox = -moz- | Chrome & Safari = -webkit- | Opera = -o- | IE = -ms- Tanpa basa-basi busuk, dari sini gue dapetin tutorial pure CSS3 itu ;)
www.nikesh.me
Featured article dari master @nikeshhayaran "Pie Menu like Path, using jquery and CSS3" awesome banget. Sudah opensource juga tuh ;)) :xZooming Image in CSS3
Aslinya trick ini membuat efek Infinitely Zoom, Koben balikin kinerja efeknya jadi mendekat :D.imageInner {
width: 200px;
height: 255px;
overflow: hidden;
margin: 10px auto;
box-shadow: 0px 0px 5px #4B2B2C;
border: 5px ridge #6F4C38;
}
.imgInner {
width: 815px;
height: 1050px;
margin-left: -277px;
margin-top: -350px;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-out;
}
.zoomInner {
animation-duration: 0.9s;
animation-name: zoom;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.9s;
-moz-animation-name: zoom;
-moz-animation-duration: 0.9s;
}
@-webkit-keyframes zoom {
100% {
width: 815px;
height: 1050px;
margin-left: -278px;
margin-top: -350px;
}
0% {
width: 200px;
height: 255px;
margin-top: 0px;
margin-left: 0px;
}
}
@-moz-keyframes zoom {
100% {
width: 815px;
height: 1050px;
margin-left: -277px;
margin-top: -350px;
}
0% {
width: 200px;
height:255px;
margin-top: 0px;
margin-left: 0px;
}
}
width: 200px;
height: 255px;
overflow: hidden;
margin: 10px auto;
box-shadow: 0px 0px 5px #4B2B2C;
border: 5px ridge #6F4C38;
}
.
width: 815px;
height: 1050px;
margin-left: -277px;
margin-top: -350px;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-out;
}
.
animation-duration: 0.9s;
animation-name: zoom;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.9s;
-moz-animation-name: zoom;
-moz-animation-duration: 0.9s;
}
@-webkit-keyframes zoom {
100% {
width: 815px;
height: 1050px;
margin-left: -278px;
margin-top: -350px;
}
0% {
width: 200px;
height: 255px;
margin-top: 0px;
margin-left: 0px;
}
}
@-moz-keyframes zoom {
100% {
width: 815px;
height: 1050px;
margin-left: -277px;
margin-top: -350px;
}
0% {
width: 200px;
height:255px;
margin-top: 0px;
margin-left: 0px;
}
}
<div class='imageInner '>
<img class='imgInner zoomInner ' src='ADD-URL-IMAGE-HERE' alt='' />
</div>
Lebar & tinggi image sangat berpengaruh pada var margin n efek keyframe.
Tidak ada komentar:
Posting Komentar