Hi guys, I am going to share a simple Stick It / Pin It Message box using css.

You can use this to pin your interest into Wall. By applying a 10 lines of css that turns into powerful sticky message box

Here is the CSS code

.postitdontforget {
background:url("postitdontforget.png") repeat-x scroll 0 0 transparent;
color:#493E01;
height:90px;
margin:10px 0;
padding:65px 30px 31px 46px;
text-align:left;
text-shadow:1px 1px 1px rgba(255,255,255,0.2);
width:127px;
}
.postitempty {
background: url("postitempty.png") repeat-x scroll 0 0 transparent;
color: #2F2C0D;
font-size: 13px;
margin: 10px 0;
padding: 57px 51px 0px 25px;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 171px;
height: 182px;
}
.cb { clear: both; }
.postittitle {
font-family: 'Marck Script',Helvetica Neue,Arial;
font-size: 25px;
display: block;
margin-bottom: 10px;
}

Here is the HTML code


<div class="postitdontforget"><div class="cb"></div>
Need to check out the Portfolio!<br />Visit - <a href="http://w3lessons.info">Complete Web Tutorials</a>
</div>

View Demo

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/02/stick-it-box-css11.pnghttp://w3lessons.info/wp-content/uploads/2012/02/stick-it-box-css11-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignCascading Style Sheets,CSS3,Design,sticky notes,tips & tricks,Website
Hi guys, I am going to share a simple Stick It / Pin It Message box using css.You can use this to pin your interest into Wall. By applying a 10 lines of css that turns into powerful sticky message box Here is the CSS codeHere is the HTML codeView...