Blog

Gradient Highlights

We migrated this website to a new platform, and are working to correct formatting errors in older blog posts as a result. If you encounter an error, please send an email to scholarslab@virginia.edu. Thanks!

While playing around with the CSS gradients that put the highlighting for each “facet” into lanes over the text, I think I’ve come up with an interesting new proposal for what the highlighting might look like:

Screen Shot 2013-03-03 at 10.55.23 PM

I like this because it allows each facet’s highlight to be full height—thus feeling more like a highlighter pen and clearly bonding visually with its text—while still allowing the colors to be distinct in the areas of overlap. I think this approach might work well with up to four or five colors, and maybe that’s what I’ll try next.

What was that about the value of failure and mistakes (a theme from some of our first meetings with the Praxis cohort in the fall)? I got this idea from mistyping a value when making a change to the CSS and seeing how easy it was to make this sort of gradient. I doubt I would have thought to try it otherwise. And in some ways it’s far better than any of the mock-ups I came up with in Illustrator last week.

Cite this post: Chris Peck. “Gradient Highlights”. Published March 05, 2013. https://scholarslab.lib.virginia.edu/blog/gradient-highlights/. Accessed on .