This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Free Webmasters
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);
}
Source & Preview: https://scriptcodes.co/sticky-notes-with-css3-afkxe
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Free Webmasters
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Free Webmasters | Sciencx (2023-02-07T07:50:34+00:00) Sticky Notes with CSS3. Retrieved from https://www.scien.cx/2023/02/07/sticky-notes-with-css3/
" » Sticky Notes with CSS3." Free Webmasters | Sciencx - Tuesday February 7, 2023, https://www.scien.cx/2023/02/07/sticky-notes-with-css3/
HARVARDFree Webmasters | Sciencx Tuesday February 7, 2023 » Sticky Notes with CSS3., viewed ,<https://www.scien.cx/2023/02/07/sticky-notes-with-css3/>
VANCOUVERFree Webmasters | Sciencx - » Sticky Notes with CSS3. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/07/sticky-notes-with-css3/
CHICAGO" » Sticky Notes with CSS3." Free Webmasters | Sciencx - Accessed . https://www.scien.cx/2023/02/07/sticky-notes-with-css3/
IEEE" » Sticky Notes with CSS3." Free Webmasters | Sciencx [Online]. Available: https://www.scien.cx/2023/02/07/sticky-notes-with-css3/. [Accessed: ]
rf:citation » Sticky Notes with CSS3 | Free Webmasters | Sciencx | https://www.scien.cx/2023/02/07/sticky-notes-with-css3/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.