Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Обводка текста Категория: CSS
Название: Обводка текста
Дата добавления: 08-06-2012
Раз просмотрено: 1080
Комментарии: 0
Рейтинг: * * * * * * * * * * (1 голос)

Обводка текста

Шрифты в интернете — это важная векторная графика. Поэтому вы можете отображать их размером в 12 и 120 пикселей, и они остаются четкими и с относительно острыми краями. Векторная графика означает, что форма элементов определяется точками и математическими формулами, а не набором пикселей. А так как текст является векторной графикой, было бы неплохо, если бы мы могли получать в браузерах то, что мы можем получать в программах для работы с векторной графикой, например, Adobe Illustrator. И мы имеем такую возможность при помощи простых CSS свойств.

Одним из простейших приемов для работы с векторным текстом, в том числе в упомянутом Adobe Illustrator, является добавление обводки к тексту. Обводка представляет собой бортик, обычно не очень толстый, вокруг каждой буквы текста. Ее применяют для выделения текста и различных дизайнерских эффектов. В WebKit браузерах (Chrome и Safari) мы можем напрямую задавать обводку текста, для других браузеров будет рассмотрено обходное решение.

Обводка в WebKit браузерах

Вы можете задать обводку текста в WebKit браузерах при помощи свойств -webkit-text-stroke-width, которое задает толщину обводки текста в пикселях и -webkit-text-stroke-color, которое задает ее цвет. Давайте создадим черную обводку в один пиксель, а цвет текста сделаем белым:

h1 {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #000;
	color: #FFF;
}

Также мы можем использовать сокращенное свойство -webkit-text-stroke:

h1 {
	-webkit-text-stroke: 1px #000;
	color: #FFF;
}

Однако, в нашем случае, в других браузерах, не поддерживающих это свойство для обводки текста текст просто станет невидимым. Это естественно будет неприемлемо. Для такой ситуации, разработчики WebKit создали еще одно полезное свойство: -webkit-text-fill-color. Его действие похоже на обычное свойство color, но действует только в WebKit браузерах. Давайте применим его при создании черной обводки белого текста:

h1 {
	-webkit-text-stroke: 1px #000;
	-webkit-text-fill-color: #FFF;
	color: #000;
}

В результате мы получим похожие на это результаты в WebKit и обычных браузерах соответственно:

Обводка текста в WebKit браузерах
Обводка текста в WebKit браузерах

Обычный текст в других браузерах
Обычный текст в других браузерах

Имитация обводки текста

Мы можем пройти дальше к достижении кроссбраузерности нашей обводки текста. Для этого мы можем использовать CSS3 свойство text-shadow, которое создает тень от текста. Это будет работать во всех современных браузерах кроме Internet Explorer младше 10 версии. Об устранении багов этого браузера вы можете почитать в статье «Решение багов Internet Explorer». Мы создадим четыре черные тени в один пиксель, без размытия, направленные в каждый из четырех углов. Это поможет создать нам эффект очень близкий к обводке текста:

h1 {
	color: #FFF;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

Имитация обводки текста при помощи тени
Имитация обводки текста при помощи тени

Это интересно: «Фоновое изображение в поле ввода».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.