Sticky Note with shadow effect in WordPress using CSS

A Sticky Note within a post definitely looks great. Sticky Note is nice to grab attention of the visitor. In this CSS tutorial, we will learn. how we can create a Sticky Note in WordPress Blog mainly using CSS, with a small few KB sized graphical element.

Prerequisites for creating a custom Sticky Note in WordPress using CSS

We will use this board pin as graphical element for a realistic Sticky Note effect. You can either right click and save it for your usage or find alternative in our PSD Downloads section.   We will use this board pin on the left top corner of our Sticky Note:     It is 3 KB in size, if you Smush it, it will be more smaller.

The required HTML code for creating our sticky note

In the WordPress writing panel, go to HTML mode and copy paste this where you want the Sticky Note:

<div class=”note”>This is a dummy text for our Sticky Note CSS Tutorial. You can replace this text with your own for your Sticky note.</div>

Now the CSS part of Sticky Note

Open your Theme’s style.css and add this:

.note {
background-color:#FCF9A6;
background-image:url(http://url/image-name.png);
background-repeat:no-repeat;
background-position:top-left;
width:220px;
font-family:Georgia;
font-size:14px;
font-weight:400;
color:#000;
border-top:5px dotted #fff;
text-shadow:#fff 0 1px 1px;
overflow:hidden;
padding-top:50px;
padding-bottom:15px;
padding-right:10px;
padding-left:50px;
display: block;
position: relative;
top: 0;
left: 0;
box-shadow:rgba(0,0,0,.5) 0 3px 6px;
-webkit-box-shadow:rgba(0,0,0,.5) 0 3px 6px;
-moz-box-shadow:rgba(0,0,0,.5) 0 3px 6px;
}

Save it. Here is the working example of the Sticky Note with shadow effect in WordPress using CSS 3 :