[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 ;)
Re: Pure CSS Folded Corner Effect With Animations
That's cool :thumb:
I think this should be in CodeBank :wave:
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>
Re: [CSS] Folded Corner Effect With Animations
why when I gif image on it does not work?
