Question

I am looking to create text overlay similar to this link. If you see it, the color of text contrasts the div color, gives the feeling that text is overlaid by some outer layer of the main div color. How do I achieve this effect?

Answer 1

I used Chrome Inspector for you. This is a style on the numbers:

.metro .count {
    /*...*/
    color: rgba(0, 0, 0, 0.20);
}

You can check it out yourself, just:

• in Chrome, right-click on the number and Inspect Element
• in Firefox, use Firebug
• in Internet Explorer (version 8+) by pressing F12
• other browsers also have their equivalents

Read about CSS3 rgba() here

The “a” in this property-name stands, for, you guessed it: alpha. This
new feature allows us to specify an opacity value for a color.