CODEWITHSUNDEEP
htmlcss
Suneth Kalhara
Suneth Kalhara

Reputation: 1221

CSS 3 Text Shadow with Outline

I have font called MyriadPro-BoldIt, I used that on photoshop to create a text design like below.

I tried to add this style using css by adding below codes to the same font which I converted to web fonts before

-webkit-text-stroke: 1px black;
color: white;
text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;

but it is not giving same results. Anyone knows how to create this kind of letters using css?

Upvotes: 0

Views: 1275

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106058

have you tried simply:

  color: black;
text-shadow:
  2px 2px 0 white,
  3px 3px 0 gray;

you have to tune coordonates and font-size in order to have something looking fine. http://codepen.io/gc-nomade/pen/rnmdv/

result

Upvotes: 1

Kevin Py
Kevin Py

Reputation: 2468

Here is a demo that works well: http://jsfiddle.net/XLRbQ/

-webkit-text-fill-color: black;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: white;
    text-shadow: 5px 5px 5px #000;

And also a tutorial CSS-Tricks: http://css-tricks.com/adding-stroke-to-web-text/

Upvotes: 1

newTag
newTag

Reputation: 2169

I was able to do something like this.

h1 {
    font-size: 100px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
            -1px 1px 0 #fff, 3px 3px 5px #333;
}​

See demo

Upvotes: 2

Related Questions