Sticky Note with shadow effect in WordPress using CSS

Download PDF

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

 

  1. We need a graphical element like a board pin for a realistic Sticky Note effect
  2. HTML code for the Sticky Note
  3. The crucial part is the CSS for creating the Sticky Note

 

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:    Sticky Note with shadow effect 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 :

 

This is a dummy text for our Sticky Note CSS Tutorial. You can replace this text with your own for your Sticky note.

Signature

If you have enjoyed this article, please consider subscribing to our newsletter or share this post. As we have changed our whole website to HTTPS URL to protect your privacy, social counts will appear lower than they were on HTTP URL.

Here’s what we’ve got for you which might like :

Also, we have YouTube Videos and Apple iTunes Podcast Channel (the link will open iTunes App on Mac).

Additionally, performing a search on this website can help you.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!

If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.

Contact Us