CSS 3 Text Shadow с контуром

Question

CSS 3 Text Shadow с контуром

0

У меня есть шрифт MyriadPro-BoldIt, я использовал его в Photoshop, чтобы создать текстовый дизайн, как показано ниже.

Я попытался добавить этот стиль, используя css, добавив ниже коды к тому же шрифту, который я преобразовал в веб-шрифты до

-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;

но он не дает таких же результатов. Кто-нибудь знает, как создавать такие письма с помощью css?

Suneth Kalhara 21 март 2014, в 19:08

Источник

Теги:

html

css

html5

css3

3 ответа

1

Вот демонстрация, которая хорошо работает: 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;

А также учебник CSS-Tricks: http://css-tricks.com/adding-stroke-to-web-text/

Kevin Py 21 март 2014, в 14:58

0

спасибо, но это не кросс-браузерная поддержка.
Suneth Kalhara 21 март 2014, в 18:15

1

вы пробовали просто:

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

вам нужно настроить координаты и размер шрифта, чтобы иметь что-то хорошее. http://codepen.io/gc-nomade/pen/rnmdv/

G-Cyr 21 март 2014, в 14:37

Ещё вопросы

спасибо, но это не кросс-браузерная поддержка.

newTag · Accepted Answer · 2014-03-21T16-32-00.000Z

Я смог сделать что-то подобное.

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;
}

См. Демонстрацию

Вы можете настроить значения, чтобы получить желаемый эффект. Вы можете принять ответ, если он помог вам :)
работает отлично, большое спасибо :)
IE 9 не работает, знаете ли вы о фильтре: progid: DXImageTransform.Microsoft.Shadow (color = # 0000FF, direction = 45); добавить для то есть 9