Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

How would I go about highlighting an inline part of a paragraph decorated with a "highlighted" effect as if it were marked by a real highlighter on paper.

<p> The dog <em>jumped over</em> the lazy fox.</p>

Here I want to apply that effect to the em element. Im looking for something more than just background-color: yellow. Something thats a little non-linear.

For instance, something like in this picture -

http://i.imgur.com/xXH1V6A.jpg

share|improve this question
add comment

2 Answers

The proper way to do that is with the <mark> element. CSS alone can't produce that realistic effect. Therefore, you'd have to use some sort of graphic.

share|improve this answer
    
You are right. mark is the right element and yes, I guess one could use a graphic as a background and set proper spacing around the element. –  sri Apr 14 '13 at 9:51
add comment

In case you choose to go for graphics, you could use CSS2 background images, and have a long fixed height graphic with the highlighter irregularities, or you could also use CSS3 border image effects, and use any height you want.

So for example, starting with a graphic like this:

enter image description here

You can use something like:

div#myElement { 
   border-image-source: url(../img/border-image.png); 
   border-image-slice:26; 
   border-width:26px; 
   border-image-outset:5px; 
   border-image-repeat: repeat;
   height:182px; 
   width:182px; 
}

And en up with this:

enter image description here

In both cases, you will need a graphic big enough to crate irregularities without looking like a pattern.

Source: Crazy Egg Blog

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.