Here are some examples of sticky note like CSS boxes you can add to your website. You can use them for quotes, for special ads, for sign up forms, free giveaways, etc. They can be used for anything you feel like needs to be highlighted in some way. They look pretty cool and grab some attention.

Each CSS floating box includes the CSS code and HTML code you can use. Just copy and paste it to your documents.

This is a cool looking sticky note css box and I can use this to place a special ad etc with some light weight code and no images. This has no borders or shadows and is just a plain jane box.

The CSS Code

.plane-sticky { padding: 10px; background: #FDFB8C; width: 200px; height: 200px; }

The HTML code

<div id=”plain-sticky”>The text inside the box goes here</div>

This CSS floating box has the text formatted a little like handwriting. It looks more like a sticky note in this case. You can add any text in this area.

The CSS Code

.sticky-handwriting {
padding: 10px;
background: #E57895;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: blue;
line-height: 1em;
}

The HTML Code

<div id=”sticky-handwriting”>The text inside the box goes here</div>

This CSS box is similar to the above but has a border arount it.

The CSS Code

.bordered-sticky {
border: 2px solid #363636;
padding: 10px;
background: #2f9be4;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: #363636;
line-height: 1.1em;
margin-left: 10px;
}

The HTML Code:

<div id=”bordered-sticky”>The text inside the box goes here</div>

This CSS box has a little more detail. it has a border around it and a shadow behind it.

The CSS Code

.sticky-shadow {
width: 220px;
height: 220px;
background-color: #3f3b3b;
color: inherit;
margin-left:10px;
margin-top: 5px;
}

.bordered-sticky {
border: 1px solid #3A7197;
padding: 10px;
background: #fdfb8c none repeat scroll 0% 0%;
position: relative;
bottom: 5px;
right: 15px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’;
font-size: 26px;
color: #3A7197;
line-height: 1.1em;
margin-left: 10px;
text-align: center;
}

The HTML Code:

<div id=”shadow”><div id=”bordered-sticky”>The text inside the box goes here</div>
</div>