Results 1 to 3 of 3

Thread: Pure CSS Folded Corner Effect With Animations

  1. Apr 1st, 2012, 07:51 AM #1
    XcodeX
    XcodeX is offline
    New Member
    Join Date
    Apr 12
    Posts
    4

    Thumbs up Pure CSS Folded Corner Effect With Animations

    HTML :

    Code:
    <div class="post"> 
    <span class="folded-corner"></span> 
    this is an animated foldover demo 
</div> 

<div class="post photo"> 
    <span class="folded-corner"></span> 
    <img src="http://i.imgur.com/w8be8.jpg"> 
</div>

    CSS:

    Code:
    body { 
   width: 240px; 
   margin: 0px auto; 
   padding: 40px 0 0; 
   background-color: #fff; 
   font-family: Verdana, sans-serif; 
   font-size: 11px; 
} 

a {color: #000;} 

.post { 
   margin: 0px 0px 40px; 
   padding: 15px; 
   position: relative; 
   background-color: #fff; 
   -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   -moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
} 
.photo {padding: 0px!important;} 
.folded-corner { 
   width: 0px; 
   height: 0px; 
   position: absolute; 
   top: -1px; 
   right: -1px; 
   border-width: 0; 
   border-style: solid; 
   background: hsla(260,5&#37;,60%,0.2); 
   -webkit-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -moz-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -webkit-border-bottom-left-radius: 15px; 
   -moz-border-radius: 0 0 0 15px; 
   border-radius: 0 0 0 15px; 
   border-color: #fff #fff 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; 
} 
.post:hover .folded-corner {border-width: 0 40px 40px 0;} 
.photo .folded-corner {background: hsla(260,5%,75%,0.5);}
    My first post hope every one likes it

    U can check my code with this online compiler have fun friends
    Last edited by Hack; Apr 2nd, 2012 at 05:59 AM.
    Reply With Quote Reply With Quote
  2. Apr 2nd, 2012, 03:58 AM #2
    akhileshbc
    akhileshbc is offline
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 08
    Location
    Trivandrum, Kerala, India
    Posts
    7,557

    Re: Pure CSS Folded Corner Effect With Animations

    That's cool

    I think this should be in CodeBank

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD Athlon X2 5200+, ASUS Motherboard, 2 GB RAM, 400 GB HDD, Nvidia 8600 GT 512MB, 19.5" TFT(Wide), Creative 5.1 Home Theater
    Social Group: VBForums - Developers from India

    Skills: PHP, MySQL, jQuery, VB.Net, VB6, Photoshop...
    Reply With Quote Reply With Quote
  3. Apr 18th, 2012, 07:44 AM #3
    manandpc
    manandpc is offline
    New Member
    Join Date
    Apr 12
    Posts
    7

    Re: Pure CSS Folded Corner Effect With Animations

    That code is not complete if you dont put the HTML code for TESTING

    here is a simple Animation.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Animation</title>
</head>
<style type="text/css" id="animation_css"> 

body { 
   width: 240px; 
   margin: 0px auto; 
   padding: 40px 0 0; 
   background-color: #fff; 
   font-family: Verdana, sans-serif; 
   font-size: 11px; 
} 

a {color: #000;} 

.post { 
   margin: 0px 0px 40px; 
   padding: 15px; 
   position: relative; 
   background-color: #fff; 
   -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   -moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
   box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
} 
.photo {padding: 0px!important;} 
.folded-corner { 
   width: 0px; 
   height: 0px; 
   position: absolute; 
   top: -1px; 
   right: -1px; 
   border-width: 0; 
   border-style: solid; 
   background: hsla(260,5%,60%,0.2); 
   -webkit-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -moz-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 
   -webkit-border-bottom-left-radius: 15px; 
   -moz-border-radius: 0 0 0 15px; 
   border-radius: 0 0 0 15px; 
   border-color: #fff #fff 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; 
} 
.post:hover .folded-corner {border-width: 0 40px 40px 0;} 
.photo .folded-corner {background: hsla(260,5%,75%,0.5);}

</style> 

<body>

<div class="post"> 
    <span class="folded-corner"></span> 
    this is an animated foldover demo 
</div> 

<div class="post photo"> 
    <span class="folded-corner"></span> 
    <img src="http://i.imgur.com/w8be8.jpg"> 
</div>

</body>

</html>
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules