Results 1 to 4 of 4

Thread: [CSS] Folded Corner Effect With Animations

Hybrid View

  1. #1

    Thread Starter
    New Member
    Join Date
    Apr 2012
    Posts
    4

    Thumbs up [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%,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 dday9; Feb 24th, 2016 at 12:04 PM. Reason: Added [CSS] Prefix

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

    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, Photoshop, CodeIgniter, Bootstrap,...

  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>

  4. #4

    Re: [CSS] Folded Corner Effect With Animations

    why when I gif image on it does not work?

Posting Permissions

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



Click Here to Expand Forum to Full Width