Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@victorbstan

victorbstan/post-it_css3_effects.html

Created December 12, 2010 17:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save victorbstan/738177 to your computer and use it in GitHub Desktop.
Save victorbstan/738177 to your computer and use it in GitHub Desktop.
Download ZIP
Post it note curling off the page, a more realistic adaptation
Raw
post-it_css3_effects.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>post-it-realistic-drop-shaddow</title>
<meta name="preview" content="http://victorstan.com/css-effects/post-it-realistic-drop-shadow.html">
<style type="text/css" media="screen">
body {
background-color:#ddd;
}
#box {
width:300px;
height:300px;
margin:50px auto;
position:relative;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
-webkit-box-shadow: 1px 3px 5px rgba(135, 130, 19, 0.4);
-webkit-border-bottom-right-radius: 36px 12px;
font-family:Arial;
line-height:3em;
font-style:italic;
font-size:70pt;
color:#fffb9b;
text-align:center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6),
-1px -1px 1px rgba(0, 0, 0, 0.4);
}
#box:after {
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
position:absolute;
content:'';
background:transparent;
bottom:13px;
right:11px;
width:70%;
height:70%;
-webkit-transform: rotate(5deg)
skew(10deg);
-webkit-border-bottom-right-radius: 36px 12px;
z-index:-2;
}
#box:before {
-webkit-box-shadow: 11px 11px 11px rgba(184, 177, 27, 0.7);
position:absolute;
content:'';
background:transparent;
bottom:12px;
right:12px;
width:50%;
height:50%;
-webkit-transform: rotate(3deg)
skew(5deg);
z-index:-1;
}
</style>
</head>
<body id="post-it-realistic-drop-shaddow" onload="">
<div id="box">
Post It
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment