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….
Free Download:
Yellow Highlighter Graphic
png 8.9 kB
Free Download:
Red Underline Graphic png 987 bytes
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.
.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; height: 32px; } .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; height: 100%; }
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"> </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.
More Examples
Just highlight the important bits.
Just <span class="highlight">highlight the important bits. <span class="highlight_yellow"> </span></span>
Get out your red pen for underlines.
Get out your <span class="highlight">red pen <span class="underline_red"> </span></span> for underlines.
How about an underline inside of a highlight.
<span class="highlight">How about an <span class="highlight">underline inside<span class="underline_red"> </span></span> of a highlight.<span class="highlight_yellow"> </span></span>
And now a highlight in the middle of an underline.
<span class="highlight">And now a <span class="highlight">highlight in the middle<span class="highlight_yellow"> </span></span> of an underline.<span class="underline_red"> </span></span>
