Hand-drawn CSS Highlighter and Pen Underline Effects

You can draw attention to your important points as easy as putting pen to 
paper  with these two realistic hand-drawn effects. Just copy, paste, and 
save  and that’s all there is to it!

Here’s How You  Can Do It! 

This neato effect is created using a couple images and a little bit of CSS styling. This tutorial should be easy enough for anybody to follow, as no advanced technical skill is required.

Step 1:  Save the image files to your website

These two images create the effect itself. They need to be uploaded to your website. I suggest putting them into a sub-folder called images. Right click and choose Save As….

Note that these are PNG files with transparency, so they will look good on almost any background colour.

Step 2:  Add the CSS style code

This CSS code must be added to your stylesheet, or posted within the <HEAD> of your web page.

<style type="text/css">
.highlight {
	position: relative;
	padding-left: -5px;
	overflow: visible;
	font-weight: bold;
	height: 100%;
}
.highlight_yellow {
	position: absolute;
	left: -3px;
	background-image: url('/images/highlight_yellow.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0px 0px;
	margin-left: -5px;
	padding-right: 5px;
	width: 105%;
	line-height: 200%;
	overflow: visible;
}
.underline_red {
	position: absolute;
	left: -3px;
	background-image: url('/images/underline_red.png');
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
	margin-left: -3px;
	padding-bottom: 5px;
	width: 105%;
	line-height: 105%;
	overflow: visible;
}
</style>

Note: the paths to the image files, indicated in red, may have to be changed depending on where you saved those two images.

Step 3:  Pick out the text you want to highlight

Within the HTML of your page content, you have to pick out the words you want to highlight and surround them with a <span> tag, set to the highlight class.

<p>I can't emphasize enough <span class="highlight">just
how important this is</span>. So pay attention!</p>

This does not actually create the effect, but it helps to properly position the effect. Be sure to use the effect sparingly unlike what you see on this page!

Important Note:  The graphic effects will not work across a line break. If you want to highlight a long passage, you must apply the effect to each individual line.

Step 4:  Add your desired highlight effect

Now the graphic style gets tucked in right before the close of that <span> we just created. You add another <span>, with nothing inside except a space, and set the class to the effect you want. Either highlight_yellow or underline_red.

<p>I can't emphasize enough <span class="highlight">just how
important this is<span class="highlight_yellow">&nbsp;</span>
</span>. So pay attention!</p>

And that’s all there is to it! You can apply the effect in the same way inside your paragraphs as well as headings. You can even highlight within an underline, or vice versa.

Troubleshooting:  If it’s not showing up, the most likely causes are that your CSS code is not in place, or the graphics have not been uploaded to the correct location.

Step 5:  Say thank you!

If you get any use from this code, you can say “thanks” for the time it took me to create and write this tutorial for you. I don’t drink beer, but I would much appreciate it if you’d support my only vice and buy me a fancy 
dark chocolate bar.  Thank you and you’re welcome!


This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

No comments yet

Leave a Reply