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

CSS3 Text Effect (Text outline and shadow effect)

CSS3 Text Effect (Text outline and shadow effect)

Problem

I am trying to copy a text effect using css3

Here is the image of the text I am trying to copy:

Here is what I have upto now:

h1 {

font-size:4em;  
color: #E6012F;

text-shadow:
      3px 3px 0 #888087,
     -1px -1px 0 #888087,  
      1px -1px 0 #888087,
      -1px 1px 0 #888087,
      1px 1px 0 #888087;

}

The main problem here is, how do I do the text white outline?

Problem courtesy of: Satch3000

Solution

All of those shadows aren't needed, you can achieve the desired affect with just this:

text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;

Shadow placement works by hierarchy of when it was defined in the statement, so placing the white shadow at the start will layer it on top of the gray shadow and cause it to look like a Border.

It's also worth noting that the white border will only display over the shadow and not around the text, thus placing the text on a darker background would show no white border towards the top and left sides of the word.

Solution courtesy of: Beardy

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

CSS3 Text Effect (Text outline and shadow effect)

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×