Stick It / Pin It Message Box using CSS

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