CODEWITHSUNDEEP
css
Satch3000
Satch3000

Reputation: 49364

CSS3 Text Effect (Text outline and shadow effect)

I am trying to copy a text effect using css3

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

enter image description here

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?

Upvotes: 3

Views: 3373

Answers (2)

Heo Đất Hades
Heo Đất Hades

Reputation: 1633

You can try my code

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

if you want shadow black more, you can change 1px 3px 3px #000 to 1px 4px 3px #000 or more

Upvotes: 1

Beardy
Beardy

Reputation: 750

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.

Upvotes: 8

Related Questions