CSS-стили – важная часть каждого сайта. Благодаря стилям портал становится узнаваемым и дружелюбнее к посетителям. Цветовая гамма, расположение блоков сайта, красивый дизайн объектов – все это возможности CSS. До недавнего времени обводка текста в CSS оставалась только мечтой. Но с приходом CSS3 мечта стала реальностью.
Что такое обводка текста в CSS
Обводка текста – это элегантный контур вокруг слова и как их использовать">слов или части текста. Здесь могут быть тени вокруг букв, контуры, окантовки и много другое. До выхода CSS3 и параметров webkit такой дизайн текста можно было увидеть только в текстовых и графических редакторах или Adobe Photoshop и Adobe Illustrator. Теперь же это возможно и в сайтостроении.
Браузерная поддержка
Обводка текста в CSS пока на экспериментальной стадии и безопасен не для всех браузеров. Пока свойство плохо поддерживается Firefox и IE. При этом хорошо работает в браузерах Google Chrome 1.0 и выше, а также Safari 3.0 и выше. Также стоит отметить такие моменты использования этого свойства:
- Чтобы сделать обводку кроссбраузерно, требуется делать толщину линии в 1px;
- Для ряда отдельных браузеров обводку возможно сделать только через Javascript.
Но с молниеносным развитием сферы веб-программирования, уже скоро мы будем использовать рабочую версию этого свойства.
Свойства
Стоит отметить что атрибут -webkit-text-stroke возможно применить ко всем элементам на странице, будь то ссылки a, блоки div или span, параграфы p или заголовки h1-h6. При этом свойство нельзя наследовать и невозможно применить значение по умолчанию.
Для работы используются следующие свойства данного параметра:
- text-stroke-color;
- text-stroke-width;
- text-fill-color.
Примеры их использования описаны ниже.
Применение параметра в верстке
Применение обводки в css не сложное. Достаточно использовать одного из параметров: text-stroke-color и text-stroke-width. К примеру, требуется сделать обводку заголовка и подзаголовков текста для выделения среди остального текста. На практике это выглядит следующим образом:
CSS:
h1 {
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 2px;
}
h2 {
-webkit-text-stroke-color: #FF0000;
-webkit-text-stroke-width: 1px;
}
Но этот же код возможно написать и компактнее:
h1 {
-webkit-text-stroke: 2px #000;
}
h2 {
-webkit-text-stroke: 1px #FF0000;
}
В то же время если требуется сделать прозрачный текст с обводкой черного цвета, то код будет уже чуть сложнее чтобы одинаково отобразить свойство в браузерах. К примеру, фон сайта белый и хотите сделать прозрачность букв тех же заголовков. Для начала используем свойство color для задания общего цвета заголовков. Затем применяем свойство text-fill-color для задания «прозрачности» тексту. Если так не сделать, то текст заголовков будет сливаться с фоном на неподдерживаемых это свойство браузерах. Если перевести все в код, то это будет выглядеть следующим образом:
CSS:
h1 {
color: #000;
-webkit-text-stroke: 2px #000;
-webkit-text-fill-color: #fff;
}
С помощью этого свойства и фантазии возможно сделать много чего. К примеру, вот так возможно сделать симпатичную красную окантовку черного текста:
CSS:
h1 {
position: relative;
color: #000;
-webkit-text-stroke: 2px #000;
}
h1::before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
-webkit-text-stroke: 8px #FF0000; /* задаем значение размера внешней обводки и цвета */
}
Разберем этот пример. Для начала задаем заголовку h1 позиционирование относительно его исходного места, указываем что цвет главного текста должен быть черным с черной обводкой размером в 2 пикселя.
Далее требуется вывести красную окантовку перед текстом. Чтобы это сделать будем использовать псевдоатрибут before. Во-первых, указываем что обводка текста должна повторять тот же текст, что и в теге h1. Затем выводим обводку в той же позиции и с теми же размерами что и заголовок h1. Далее убираем отступы слева и справа чтобы обводка не сместилась в стороны. И напоследок задаем значение размера внешней обводки в 8 пикселей и красного цвета.
Заключения
Исходя из выше указанного делаем следующий вывод. CSS стилизация развивается и скоро через стили возможно будет сделать практически все, что возможно сделать в Photoshop. И атрибут text-stroke тому доказательство.
Свойство text-stroke в некотором роде похоже на свойство border. На момент написания статьи оно не включено ни в одну из спецификаций W3C или WHATWG. Атрибут пока возможно использовать только в некоторых браузерах семейства webkit, но вместе с тем свойство даёт неведомые до теперь возможности обводки текста. Конечно, ещё не всё так гладко как хотелось бы и text-stroke только экспериментальное нововведение в CSS3, но мир сайтостроительства стремительно развивается и вместе с ним развивается дизайн. Возможно будущие версии таких браузеров как Mozilla Firefox, IE и Opera также будут использовать это свойство, но с использованием собственной приставки вместо -webkit.
