Wednesday, September 11, 2013

Sticky notes made by css

<html>
<head>
<title>Sticky Note</title>
<style>
.sticky {
 -webkit-box-shadow: #DDD 0px 1px 2px;
 position: fixed;
 background-color: #F4F39E;
 border-color: #DEE184;
 text-align: center;
 margin: 2.5em 0px;
 padding: 1.5em 1em;
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
 box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
 font-family: Chalkboard, 'Comic Sans';
}
.sticky.taped:after {
 display: block;
 content: "";
 position: absolute;
 width: 151px;
 height: 35px;
 top: -21px;
 left: 25%;  
 background: transparent url(tape.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<p class="sticky taped" style="width: 250px;">
 <strong>The Little Turtle</strong>.<br />
 There was a little turtle.<br />
 He lived in a box.<br />
 He swam in a puddle.<br />
 He climbed on the rocks.<br />
 —Vachel Lindsay
</p>
</body>
</html>

No comments:

Post a Comment