Photoshop Question posted in
The official user guide can be found here.

CSS 3 Text Shadow with Outline – Photoshop

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?

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search