Geek Answers Handbook

CSS3 text effect (text and shadow effect)

I am trying to copy a text effect using css3

Here is an image of the text I'm trying to copy:

enter image description here

Here is what I have so far:

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 is how to make the text a white outline?

+3
source share
2 answers

All these shadows are not needed, you can achieve the desired effect only with this:

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

Shadow placement works in a hierarchy when it was defined in the application, so placing a white shadow at the beginning will overlay it on top of the gray shadow and call it like a border.

, , , .

+7

text-shadow: 1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px 3px 3px #000;

, , 1px 3px 3px #000 1px 4px 3px #000

0

More articles:


All Articles