Sticky Notes with CSS3

#webdev #html #css #tutorial

What is a sticky notes with css3, How do you make a sticky notes with css3?

Sticky Notes with CSS3 HTML Code:

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky notes with CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>
<ul id="notes"> <li> <p>Push new feature to Kiln for code review</p> </li> <li class="kiln"> <p>Browse hacker news for a bit</p> </li> <li> <p>Read JavaScript: The Good Parts by Douglas Crockford</p> </li>
</ul>
</body>
</html>

Sticky Notes with CSS3 CSS Code:

body { background: #B2CCCC;
}
#notes li { position: relative; width: 300px; min-height: 100px; margin: 25px auto; padding: 60px 15px 15px 15px; background: #fff url(http://our.fogbugz.com/images/tbKiwiLogo.gif) no-repeat 4px 8px; -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5); -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5); box-shadow: 0 1px 2px #000; -webkit-transform: rotate(-.5deg); -moz-transform: rotate(-.5deg); -o-transform: rotate(-.5deg);
}
#notes li:nth-child(even) { -webkit-transform: rotate(.5deg); -moz-transform: rotate(.5deg); -o-transform: rotate(.5deg);
}
#notes li.kiln
{ background-image: url(https://rob.kilnhg.com/Content/Images/kiln_focus.gif);
}
#notes li p { text-align: center; font: normal normal normal 40px/48px 'Reenie Beanie', Helvetica, Arial, sans-serif; color: #000; text-shadow: white 1px 1px 0px; overflow:hidden;
}
#notes li::before { content: ' '; display: block; position: absolute; left: 115px; top: -15px; width: 75px; height: 25px; z-index: 2; background-color: rgba(243,245,228,0.5); border: 2px solid rgba(255,255,255,0.5); -webkit-box-shadow: 0 0 5px #888; -moz-box-shadow: 0 0 5px #888; box-shadow: 2px 2px 2px #000; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg);
}
#notes li:nth-child(even)::before { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg);
}