Membuat page flip dengan menggunakan gambar
flip page use image. Berikut cara membuat
peel effect use CSS3, lantas jadi deh trik
make page peel effect using css3. Karena selama blog walking terus menerus, selama itu juga terus Koben menemukan trick serupa namun dengan hasil yang begitu indah dan mendekati perfecto :D
Trik ini harus jadi gaya dikarenakan hanya menggunakan atribut CSS dalam pembuatannya! Masukin semua bumbu CSS brkt ke dalam template kalian :D
#peelCorner {
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
display: block;
width: 75px;
height: 75px;
overflow: hidden;
background: white;
cursor: pointer;
box-shadow: 0 0 11px #000;
-webkit-transition-property: top, right, width, height;
transition-property: top, right, width, height;
-moz-transition-property: top, right, width, height;
-o-transition-property: top, right, width, height;
-webkit-transition-duration: .3s, .3s, .3s, .3s;
transition-duration: .3s, .3s, .3s, .3s;
-moz-transition-duration: .3s, .3s, .3s, .3s;
-o-transition-duration: .3s, .3s, .3s, .3s;
-webkit-transition-timing-function: ease-out, ease-out, ease-out, ease-out;
transition-timing-function: ease-out, ease-out, ease-out, ease-out;
-moz-transition-timing-function: ease-out, ease-out, ease-out, ease-out;
-o-transition-timing-function: ease-out, ease-out, ease-out, ease-out;
}
#effectPeel {
width: 100px;
height: 100px;
position: absolute;
z-index: 3;
background: -webkit-gradient(linear, right top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(150, 150, 150, 1)), color-stop(0.5, rgba(150, 150, 150, 1)));
background: -moz-linear-gradient(right top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0) 50%, rgba(150, 150, 150, 1) 50%, rgba(255, 255, 255, 1));
-webkit-transition-property: top, right, width, height;
transition-property: top, right, width, height;
-moz-transition-property: top, right, width, height;
-o-transition-property: top, right, width, height;
-webkit-transition-duration: .3s, .3s, .3s, .3s;
transition-duration: .3s, .3s, .3s, .3s;
-moz-transition-duration: .3s, .3s, .3s, .3s;
-o-transition-duration: .3s, .3s, .3s, .3s;
-webkit-transition-timing-function: ease-out, ease-out, ease-out, ease-out;
transition-timing-function: ease-out, ease-out, ease-out, ease-out;
-moz-transition-timing-function: ease-out, ease-out, ease-out, ease-out;
-o-transition-timing-function: ease-out, ease-out, ease-out, ease-out;
}
#peelCorner:hover, #effectPeel:hover {
width: 200px;
height: 200px;
}
#peelCorner p {
position: absolute;
right: 0;
top: 0;
display: block;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
color: #333;
text-align: right;
background: -webkit-gradient(linear, right top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)), color-stop(0.75, rgba(0, 0, 0, 1)), color-stop(0, rgba(200, 200, 200, 1)), color-stop(0.25, rgba(150, 150, 150, 1)));
background: -moz-linear-gradient(left bottom, rgba(0, 0, 0, 0), rgba(200, 200, 200, 1) 75%, rgba(255, 255, 255, 1));
}
HTML Planing
<div id="peelCorner">
<div id="effectPeel"></div>
<p>
ADD BLAH BLEH BLOH HERE
</p>
</div>Demo bukalah halaman ini secara full page, perhatikan pojok kanan atas monitor ;)
Beben Koben si Bloglang anu Ganteng Kalem Tea... The true adventurer of blogger. Sharing and caring the great sources all in the world. Unique, different style, funky, cool and awesome resources. DONT BELIEVE, JUST VISIT US...Pret ah!!!
Resource:
jsdo.it/RemiB/css3-Corner
Perkenalkan sobat kita...