Xiper

Контур для текста

Автор: Евгений Рыжков и Анна Лысак Дата публикации:

Задача

Сделать контур тексту средствами CSS.

контур текста

Решение

На момент написания этого материала только разработчики Webkit предусмотрели такую возможность — CSS свойство -webkit-text-stroke. Чтобы нам сделать белый текст с черным контуром, достаточно двух строк кода:

color: white;
-webkit-text-stroke: 1px black;

Т.к. контур появится только у webkit браузеров, остальным незачем цвет текста сливать с цветом фона. Для этого предусмотрено еще одно свойство — -webkit-text-fill-color:

color: white; /* цвет текста для всех браузеров */
-webkit-text-fill-color: white; /* цвет текста для webkit */
-webkit-text-stroke: 1px black;

Само собой не подходит вариант, который работает только в паре браузеров, поэтому для остальных браузеров будет все немного сложнее. Для эмуляции контура будем использовать text-shadow:

	color: #fff;
	text-shadow:
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;

Данный прием сработает во всех распространенных ныне браузеров, кроме IE8 и ниже. Для них можно либо сделать заголовки по проще (без контура), либо использовать картинки, или же применить небольшой скрипт + несколько дополнительных CSS правил для эмуляции тени. Ниже приведенный код подключаем только для IE8 и версий ниже:

h1 {
	position: relative;
}
h1 span {
	position: absolute;
	z-index: -1;
	color: #000;
}
.h1 {
	left: -1px;
	top: -1px;
}
.h2 {
	left: 1px;
	top: -1px;
}
.h3 {
	left: -1px;
	top: 1px;
}
.h4 {
	left: 1px;
	top: 1px;
}

function stroke() {
	var header = document.getElementById("strokeHeader"),
		text = header.innerText,
		strokeIE = 	text+
					&<span class="h1"><+text+&</span>&+
					&<span class="h2">&+text+&</span>&+
					&<span class="h3">&+text+&</span>&+
					&<span class="h4">&+text+&</span>&;
	header.innerHTML = strokeIE;
}
window.onload = stroke;

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari 5
  • Chrome

Недостатки

  • для «особых» браузеров нужен Javascript;
  • кроссбраузерно можно сделать контур только в 1px;
  • начертание в разных браузерах немного отличается.

Возможно когда-то в будущем, свойство text-stroke появится в спецификациях и его начнут поддерживать браузеры, мы не будем городить такие костыли.

И на последок более симпатичный пример.

P.S.

Интересно как на такое решение отреагируют поисковики, ведь цвет текста (color) совпадает с цветом фона (background-color).

Материалы

  • Adding Stroke to Web Text

По теме