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

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

Разметка

1
2

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

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

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

.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. Конкретно такой код может не сработать, поэтому вот вам генератор тени для текста.

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

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

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

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

Метки: css, css magic, text-stroke