Pure CSS Folded Corner Effect With Animations-VBForums
Results 1 to 3 of 3

Thread: Pure CSS Folded Corner Effect With Animations

  1. #1

    Thread Starter
    New Member
    Join Date
    Apr 2012
    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.

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,572

    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 FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India

    Skills: PHP, MySQL, jQuery, VB.Net, VB6, Photoshop...

  3. #3
    New Member
    Join Date
    Apr 2012
    Posts
    8

    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>

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.