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

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Franki needs to get his girl out on a date soon.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

  Time in Don's part of the world is:   May 14, 2008, 11:58 am
  Time in Franki's part of the world is: May 15, 2008, 12:58 am
  Don't worry neither one sleeps very long!