◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Peel / Flip Page Effect using CSS3 Last

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
Loading...
XMake Peel / Flip Page Effect using CSS3 Last
Membuat peel effect menggunakan atribut CSS3. Flip page effect yang menurut gue paling paten.
Subscribe my posts Register For Free!

6 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE