Results 1 to 4 of 4

Thread: [CSS] Folded Corner Effect With Animations

  1. Apr 1st, 2012, 07:51 AM #1
    XcodeX
    XcodeX is offline

    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
    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 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,...
    Reply With Quote Reply With Quote
  3. Apr 18th, 2012, 07:44 AM #3
    manandpc
    manandpc is offline
    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>
    Reply With Quote Reply With Quote
  4. Aug 3rd, 2016, 04:42 AM #4
    mrduongonline1
    mrduongonline1 is offline
    New Member
    Join Date
    Aug 2016
    Posts
    2

    Re: [CSS] Folded Corner Effect With Animations

    why when I gif image on it does not work?
    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


Click Here to Expand Forum to Full Width