Sticky Notes With PureCSS

Sticky notes are simple way to announce something to your website using a creative post-it note,

Here is some examples that will let you learn how to make those sticky notes even more gorgeous...,

Cool Jeans Pocket

This is cool sticky note as shown in demo below, Created with PureCSS, No jQuery or js. Let's have a look at this note below,

Lorem ipsum dolor sit amet, a hac nec mauris tincidunt, lacus curabitur justo quis, ad ac vitae. Vestibulum posuere rutrum neque et dui enim. Libero pede non eros rhoncus phasellus.

{ background:linear-gradient(top,#000,#333); width:200px; height:250px; color:white; padding:10px;border:1px dashed white;box-shadow:0 0 0 3px #000,0 5px 3px grey; transform:rotate(-10deg); background-size:2% 2%; border-radius:5px; }

Yellow Post-It

This postit has yellow background and a transparent color, you can create this with any background!, Try it by changing background...

Lorem ipsum dolor sit amet, a hac nec mauris tincidunt, lacus curabitur justo quis, ad ac vitae. Vestibulum posuere rutrum neque et dui enim. Libero pede non eros rhoncus phasellus.

{ background:yellow; width:200px; height:250px; color:rgba(0,0,0,.3); padding:10px;box-shadow:10px 10px 0 #000; border-radius:5px; }

Minimal Post-it

This is nice, simple and attractive post-it

Lorem ipsum dolor sit amet, a hac nec mauris tincidunt, lacus curabitur justo quis, ad ac vitae. Vestibulum posuere rutrum neque et dui enim. Libero pede non eros rhoncus phasellus.

{ background:linear-gradient(top,#e2e2e2,#e6e6e6); width:200px; height:250px; color:black; padding:10px;box-shadow:0 0 10px grey; border-radius:5px; }

These are demos with css, But this css doesn't have prefixes for cross-browser support, You may add for using cross-browser.

Recommendations

Recommend any design idea if you have one, Drop your idea in "Wishbox".