Как сделать обводку текста в CSS

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

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

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

Свойство

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

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

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

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

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

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

Заключение

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

Автор: Sara Vieira

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)