DEV Community

Cover image for Sticky Notes with CSS3
Free Webmasters
Free Webmasters

Posted on • Updated on


Sticky Notes with CSS3

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">
<body> <link href='' 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>
Enter fullscreen mode Exit fullscreen mode

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( 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(;
#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);
Enter fullscreen mode Exit fullscreen mode

👉 Source & Preview:

Top comments (1)

gloriamaldonado profile image
Gloria Maldonado ✪

This is amazing!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.