.no-js img.lazyload { display: none; } Viewed: 2559
Code

Manage text colour with ease

When designing a website you can have varied text colours depending on the background colour. This can be an area of frustration due to the unknown elements that could potentially be contained within an area. Here’s a simple technique for overcoming that.

Your CSS may look similar to this

.panel h1,
.panel h2,
.panel p,
.alltheselectors {
  color: #444; }

This is quite tedious to do when it happens in a few situations and can be frustrating when you want to differ one colour. However a better way I have found to set this up is:

body {
  color: #444; }

h1, h2, h3, h4, h5, h6 {
  color: inherit; }

.panel {
  color: #c0ffee; }

Each of your headings and other elements will inherit the colour of the parent element. If you want to change the colour of a specific element, then that can be done by applying the colour by a class. This continues to keep the specificity low and in turn adds more convenience.

It’s a stupidly simple technique and probably why it’s taken the time to discover.

Next to read

Why you should use tachyons to make CSS easier

Save time starting a new design

It’s my aim to help you be a better designer. I’ve made you a simple template to manage your colour, grid and guides. You’ll save around 20 minutes each time you start a new design.

Join my list and I’ll send you the template and update you with new Illustrator design tutorials and workflow improvements. Schedule is currently monthly.