Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> Sticky Note


Code Snippet </> Info


Snippet Name: Sticky Note

Description: Add a sticky note message to your web page without using images.
Example: View Code Demo

Note:

Author: Galen Gidman

Last Modified: 2015-08-26 22:44:24

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <head> <title>HTML5 CSS3 Sticky Note</title> <style> /* Begin HTML5 CSS3 Sticky Note */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Galen Gidman : http://lab.galengidman.com/css3stickynote/ : Creative Commons License == */ @import url(http://fonts.googleapis.com/css?family=Reenie+Beanie); * {margin:0;padding:0;font-size:100%;line-height:1;} body {font-family:'Reenie Beanie', serif;text-align:center;color:#333;background-color:#fff;padding-top:80px;} #note { width:350px; padding:50px; margin:auto; position:relative; background-color:#fe6; background:-webkit-linear-gradient(#fe6, #f5da41, #f6ef97); background:-moz-linear-gradient(#fe6, #f5da41, #f6ef97); -webkit-box-shadow:0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8); -moz-box-shadow:0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8); box-shadow:0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8), inset 0 6px 6px rgba(0, 0, 0, .1); } #note:before { content:''; display:block; width:90%; height:20%; position:absolute; left:10px; bottom:3px; background-color:rgba(0, 0, 0, .9); -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000; opacity:1; z-index:-1; } #note:after { content:''; display:block; width:90%; height:20%; position:absolute; right:10px; bottom:3px; background-color:rgba(0, 0, 0, .9); -o-transform:rotate(3deg); -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; opacity:1; z-index:-1; } #note h1 {font-size:48px;line-height:48px;letter-spacing:-5px;} #note p {font-size:24px;line-height:36px;margin-top:20px;} #note a {color:#333;} </style> </head> <body> <div id="note"> <h1>I'm a CSS3 sticky note!</h1> <p>This sticky note was created using only CSS. No images! Like it?</p> <p>If this looks funny to you, then you are probably using an, unsupported browser. Try <a href="http://google.com/chrome/">Chrome</a> instead.</p> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_154.html">Sticky Note</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library