<div id="demo">
<div class="post-it">
<div class="inner">
A post-it note with some shadows
</div>
</div>
</div>
#demo { width:400px; margin:0 auto; }
.post-it {
font-size: 20px;
position: absolute;
width:300px;
margin:20px;
transform: rotate(1deg);
transform: rotate(1deg);
transform: rotate(1deg);
transform: rotate(1deg);
transform: rotate(1deg);
}
.post-it:before,
.post-it:after {
content:" ";
position: absolute;
z-index: 100;
}
.post-it:before {
background: rgba(0,0,0,0.3);
bottom:2px;
left:4px;
max-height: 60px;
max-width: 180px;
height:70%;
width:90%;
box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
}
.post-it:after {
background: rgba(0,0,0,0.1);
height:30%;
max-height: 30px;
max-width: 60px;
right:1px;
top:0px;
width:30%;
box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
}
.post-it .inner {
padding:10px;
min-height:100px;
background: #fff799;
z-index: 1000;
position: relative;
transform: rotate(-1deg);
transform: rotate(-1deg);
transform: rotate(-1deg);
transform: rotate(-1deg);
transform: rotate(-1deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.