CSS Magic #3. Обводка для текста (text-stroke effect)

Привет! Обводка для текста делается довольно легко, однако прежде чем начнем — стоит понимать, что данный метод не сработает в IE. Если Вам не особо нужен IE — либо игнорим проблему, либо выкручиваемся (я покажу как это можно сделать). Поехали!

HTML

<div class="no-ie">Text with stroke.</div>
<div class="ie">Text with stroke.</div>

Самая обыкновенная разметка. Даже и останавливаться на ней неохота, разве что тут два текста, один будет под IE, другой — под все остальное.

CSS

.no-ie {
  font-size: 4em;
  -webkit-text-stroke: 1px darkgrey;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2em;
}

.ie {
  font-size: 4em;
  color: #fff;
  text-shadow:
    -0  -1px  0   #000000,
    0   -1px  0   #000000,
    -0   1px  0   #000000,
    0    1px  0   #000000,
    -1px -0   0   #000000,
    1px  -0   0   #000000,
    -1px  0   0   #000000,
    1px   0   0   #000000,
    -1px -1px 0   #000000,
    1px  -1px 0   #000000,
    -1px  1px 0   #000000,
    1px   1px 0   #000000,
    -1px -1px 0   #000000,
    1px  -1px 0   #000000,
    -1px  1px 0   #000000,
    1px   1px 0   #000000;
}

Используем два -webkit-свойства -webkit-text-stroke и -webkit-text-fill-color для достижения нужного результата. Текст будет прозрачным и будет иметь красивую, нужную нам, обводку. Под IE идем другим путем — придется задать цвет тексту и text-shadow. Конкретно такой код может не сработать, поэтому вот вам генератор тени для текста.

Определять браузер можно любым доступным способом (благо их полно в интернете), но если нужно — я расскажу в отдельной статье как)

И по традиции пен:

Вот собственно и все. Простой, но полезный эффект. К сожалению, не лишенный недостатков, но ничего в мире не бывает идеально.

До скорых встреч!)