Tag Archives: effect

How to draw all over your web page with a highlighter marker

12 Feb

photo credit: uhuru1701 via Flickr

Have you ever had the urge to draw attention to your text  the old-school way?

I wrote up a complete tutorial on using HTML, CSS and a couple images to create realistic highlighter and pen underline effects on any web page.

Link: Underline and Highlight CSS Tutorial

My only request is that you use it with restraint.  

Hand-drawn CSS Highlighter and Pen Underline Effects

9 Feb

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!