Question

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?

Answer 1

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.