Текст с обводкой CSS

Контурный текст

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текст</title> <style> .stroke { font: 2em Arial, sans-serif; text-shadow: red 0 0 2px; } </style> </head> <body> <p class=»stroke»>Контурный текст</p> </body> </html>

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текст</title> <style> .stroke { font: 2em Arial, sans-serif; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style> </head> <body> <p class=»stroke»>Контурный текст</p> </body> </html>

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текст</title> <style> .stroke { font: bold 3em Arial, sans-serif; color: #0d3967; text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, #cad5e2 5px 5px 0; } </style> </head> <body> <h1 class=»stroke»>Десятикамерный холодильник</h1> </body> </html>

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текст</title> <style> body { background: #f0f0f0; /* Цвет фона веб-страницы */ } .stroke { font: bold 3em Arial, sans-serif; color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */ text-shadow: #fff -1px -1px 0, #333 1px 1px 0; } </style> </head> <body> <h1 class=»stroke»>Рельефный текст</h1> </body> </html>

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текст</title> <style> a:hover { /* Вид ссылки при наведении на неё курсора */ text-shadow: #5dc8e5 0 0 5px; color: #000; } p:first-letter { /* Первая буква абзаца */ font-size: 2em; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style> </head> <body> <p>Нишевый проект тормозит <a href=»1.html»>традиционный канал</a>, не считаясь с затратами. Структура рынка, отбрасывая подробности, стабилизирует департамент маркетинга и продаж, используя опыт предыдущих кампаний. Построение бренда, безусловно, спонтанно отталкивает конвергентный PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.</p> </body> </html>

От автора: CSS3 развивается таким образом, что мы можем перевести в код CSS почти все, что создается в Photoshop’е. Тем не менее, до сих пор нам не удавалась обводка текста (text-stroke). Можно было добавлять к тексту тени, но до настоящего момента не существовало жизнеспособного решения проблемы обводки. Сейчас в webkit появился ответ на этот вопрос, представляющий обводку текста с помощью одного лишь CSS.

Браузерная поддержка

Это свойство пока экспериментальное и не является безопасным для всех браузеров, но можно установить некие свойства по умолчанию, которые станут срабатывать лишь при применении пользователем неподдерживающего это свойство браузера (имеются в виду Firefox и IE). Важно понимать, что text-stroke – это не прогрессивное улучшение, вам потребуется резервный вариант для неподдерживающих браузеров, и ниже я раскрою вам существующее, к счастью, решение этой проблемы. Кроме того, в настоящее время text-stroke не фигурирует в спецификациях W3C, оно было наскоро включено под названием text-outline, но вскоре удалено и до сих пор заново не добавлено.

Свойство

Это – на самом деле очень простое в применении свойство, немного похожее на свойство border, да и пишется почти так же. Для назначения обводки текста потребуются лишь text-stroke-color и text-stroke-width с нужными вам значениями: например, если для всех тэгов-ссылок требуется черная обводка шириной в 2 пикселя, то вы напишете:

1 2 3 4 a { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Протестировав этот код, вы увидите, что на вашем вебсайте он работает должным образом, но, как и свойство border, имеет сокращенный метод написания, которым можно пользоваться для облегчения работы:

1 2 3 a { -webkit-text-stroke: 2px black; }

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

1 2 3 4 5 h1{ color: black; -webkit-text-stroke: 1px black; -webkit-text-fill-color: white; }

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

Применяя это новое свойство, вы с легкостью сымитируете то, что обычно создается в Photoshop’е, а так как в качестве цвета можно применять любые значения, это означает, что реально использовать даже полупрозрачные обводки текста, как здесь:

1 2 3 4 5 h1{ color: black; -webkit-text-stroke: 1px rgba(0,0,0,0.5); -webkit-text-fill-color: white; }

Написав что-то вроде этого, вы получите белый текст с полупрозрачной черной границей вокруг него. Это также можно сделать с помощью цвет-заполнителя для текста, так что если захотите создать полупрозрачную обводку с еще более прозрачным фоном, то напишите:

1 2 3 4 5 h1{ color: black; -webkit-text-stroke: 1px rgba(0,0,0,0.5); -webkit-text-fill-color: rgba(0,0,0,0.1); }

Заключение

Хотя обводка текста – экспериментальное свойство, и его невозможно применять во всех вебсайтах, оно все равно способно добавить в CSS3 немного магии Photoshop’а и дать вам возможность создавать красивые эффекты вроде полупрозрачных границ или тонкой обводки текста в 1 пиксель шириной. Свойство, может, и экспериментальное, но этой техникой все равно можно пользоваться, если позаботиться о стандартном цвете текста для неподдерживающих браузеров и переписать его с помощью text-fill-color для поддерживающих.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *