3

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

3

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.

| 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 Kadimisetty Apr 14 '13 at 9:51
3

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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