Контур для текста на CSS
Дата публикации: 06.07.2011
Задача
Сделать контур тексту средствами 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).