Results 1 to 4 of 4

Thread: [CSS] Folded Corner Effect With Animations

Threaded 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

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