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

Make Hover Folded Corner Effect use CSS

folded-cornerTernyata masih berlanjut cerita make peel or flip page effect using css3! Trik efek peel memang mempunyai magnet tersendiri. Selain bisa menarik perhatian pengunjung tentu hiasan blog biar lebih atraktif :d Entah ada berapa biji istilah atau namanya peel, flip, or curl!
Efek sama berbeda nama, tergantung siapa yang memberi nama saja lah ;)) Mengembangkan artikel sebelumnya tentang peel effect or css3 box shadow!. Master Nicolas Gallagher membuat trick folded corner effect secara permanent pada suatu konten. Sekarang bagaimana jadinya folded-corner effect akan terlihat ketika cursor mengarah (hover) pada konten yang dimaksud?
DEMO
folded-corner
This is animated folded-corner demo...
This is cool right?
Seperti itu :x
.folded-area {
   width: 240px;
   padding: 10px;
   margin: 0px auto 20px auto;
   position: relative;
   background-color: #fafafa;
   box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5), 0 0 40px rgba(100, 100, 100, 0.1) inset;
}
.folded-corner {
   width: 0px;
   height: 0px;
   position: absolute;
   top: 0;
   right: 0;
   border-width: 0;
   border-style: solid;
   background: red;
   -webkit-border-radius: 0 0 0 15px;
   border-radius: 0 0 0 15px;
   border-color: #000 #000 transparent transparent;
   -webkit-transition: border-width 0.2s ease-out;
   -moz-transition: border-width 0.2s ease-out;
   -ms-transition: border-width 0.2s ease-out;
   -o-transition: border-width 0.2s ease-out;
   transition: border-width 0.2s ease-out;
}
.photos {padding: 0px;}
.folded-area:hover .folded-corner {
   border-width: 0 50px 50px 0;
}
Markup HTML
Folded corner for div area<div class="folded-area">
<span class="folded-corner"></span>
BLAH BLEH BLOH
</div>
Folded corner for div image<div class="folded-area photos">
<span class="folded-corner"></span>
<img src="YOUT IMAGE" alt="" />
</div>
Resource:CSSDeck
Happy coding \m/
Loading...
XMake Hover Folded Corner Effect use CSS
Membuat efek animasi folded corner seperti page peel effect
Subscribe my posts Register For Free!

2 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