Nifty text highlight styling
Wanted to jot down this nice text highlighting CSS snippet I just discovered on basecamp.com:
With its varying opacity, it’s simulating a person’s variable pressure when marking text on an actual piece of paper. I like!
Here’s the CSS:
border-radius: 1em 0 1em 0;
background-image: linear-gradient(-100deg, rgba(250,247,133,0.3), rgba(250,247,133,0.7) 95%, rgba(250,247,133,0.1));
Instead of using <span class="highlight">, though, you should probably rather simply use the <mark> tag, which is more semantically correct.