Transparency and letter spacing lift the feel

01 / 05

Let it show through faintly

opacity sets how solidly a thing is shown.

1 … as it is (the value it starts at)
0.5 … half as solid
0 … completely see-through, invisible

It gets used a lot for softening a background picture.

.photo {  opacity: 0.6;}

02 / 05

opacity applies to everything inside

Watch out for this: opacity fades everything inside that box as well.

You meant to fade only the background, but the words you put on top go faint too and become hard to read.

.box {  background-color: #333333;  opacity: 0.5;}

03 / 05

rgba fades only the background

A colour can also be written as rgba(red, green, blue, solidity). The fourth number is the solidity, from 0 to 1.

This way only the background colour goes see-through, and the words inside stay properly solid.

.panel {  background-color:    rgba(255, 255, 255, 0.8);  padding: 24px;}

04 / 05

Open up the space between letters

letter-spacing adds space between each letter.

Open it a little and it looks unhurried and settled, which suits a logo or a heading. Too much in ordinary writing does the opposite, so 1px to 4px is about right.

.logo {  font-size: 28px;  letter-spacing: 3px;}

05 / 05

Set it alongside the line height

line-height is the space between lines, letter-spacing is the space between letters.

Open both together and the very same writing reads far more easily. The fun of this round is that you change the impression without changing a word. Have a go.

.text {  line-height: 2;  letter-spacing: 1px;}