Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to create Text Overlays in CSS?

How to create Text Overlays in CSS?

Problem

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?

Problem courtesy of: Volatil3

Solution

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.

Solution courtesy of: kapa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to create Text Overlays in CSS?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×