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

Ryan — Fri, 12 Feb 2010 17:08:04 +0000

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

Ryan — Wed, 10 Feb 2010 05:25:40 +0000

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 of your web page.

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 tag, set to the highlight class.

I can't emphasize enough "highlight">just
how important this is. So pay attention!

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 we just created. You add another , with nothing inside except a space, and set the class to the effect you want. Either highlight_yellow or underline_red.

I can't emphasize enough "highlight">just how
important this is"highlight_yellow"> ;
. So pay attention!

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!

HTML & CSS Tricks

Ryan — Tue, 09 Feb 2010 23:51:52 +0000

Hand-drawn CSS Highlighter and Pen Underline Effects

Ryan the Geek » html