CSS Generated Sticky Note Image on Your Page to Draw Attention to a Note

We all use sticky notes in real life.

So why not use them on a web page when you really want to make a point. The sticky note on this page is just a screenshot! The real deal is not! It is a flexible expandable division built in CSS. See the demo here. It won't work exactly right on our page because of the style sheets we used, but will work in most other contexts.

Of course you can You can use my css and images. I do ask for a voluntary $3 donation or more if you decide to use it because I did spend a couple of hours by the time I took the picture (yep that is a real picture of a 3m Post It Brand (r) Sticky Note!), I sliced it, played with the css to make it both expandable and workable in both IE (even though it looks broken on this page .... see the demo!) and Firefox. I know you could do it quicker. Go ahead without using my css and without using my images ... or just give me the $3 using the donation button at the bottom of the page.

Easy to use with just two images:

You just need two images, the background and the footer. So grab a copy of both of those. Then you need this as your CSS:

This goes in the body where you want the sticky.

<style type="text/css">
<!--
.sticky_note_container {
    float: right;
    width: 253px;
    margin-right: 10px;
    margin-left: 40px;
}
.sticky_note {
     width: 253px;
     min-height: 240px;
     /* make sure you have uploaded the following image */
     background-image: url(note_middle.gif);
     background-repeat: repeat-y;
     margin: 0px 0px 0px 0px;
     padding: 20px 0px 0px 0px;
}
.sticky_note_content {
     padding: 20px 30px 0px 30px;
     color: blue;
     font: normal normal bold Comic Sans MS, Cursive, Serif;
}

.sticky_note_footer {
     width: 253px;
     /* make sure you have uploaded the following image */
     background-image: url(note_finish.gif);
     background-position: 0% 100%;
     background-repeat: no-repeat;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}
-->
</style>

This goes in the body where you want the sticky.

<div class="sticky_note_container">
<!-- actually use a post it note here on the page -->
<div class="sticky_note">
<div class="sticky_note_content">
<!-- content of sticky note here -->
This is a notice that will be on a sticky note.
  It should be pretty smooth, no matter
 how much content we put in here.
 Lets see how it goes.
<!-- end of content of sticky note -->
</div>
</div>
<div class="sticky_note_footer">&nbsp;</div>
<br clear="all" />
</div>

If you would like to learn more with our other tutorials:
Back to the Tutorial Index