I'm using the
<mark> HTML element to highlight various words in a paragraph, and I'm trying to make it look like someone went over it with an actual marker, vs something symmetrical like a computer would do.
Irregular edges, various opacity across the mark.
So far I've toyed with setting a random
border-radius: for each corner, and
background-image:linear-gradient(to right, ...); and while those two combined are close, it just doesn't look quite right:
Does anybody have any ideas?
0Interesting idea, perhaps take a screenshot of what it looks like so far and update your above question with it. Is it just not looking natural enough? — Brian Wozeniak
1Actually I think you can only do random with Sass and possibly pseudo random with CSS which may still be enough for this effect. — Brian Wozeniak
1I've seen "sass" while reading this weekend, I haven't really read up on it yet though. There's a TON of new stuff in CSS since I looked last. — joebert