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

Как сделать обводку текста в 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 пикселя, то вы напишете:

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

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

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

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

h1{
   color: black;
   -webkit-text-stroke: 1px black;
   -webkit-text-fill-color: white;
}

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

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

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

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

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 для поддерживающих.

Автор: Sara Vieira

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

Комментарии Facebook:

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

  1. AnSummer

    Пожалуй, самая понятная инструкция как сделать обводку, которую я нашла. Спасибо. Не очень дружу с кодами, но и плагины на все случаи жизни не хочется ставить. Так что приходится искать самые понятные и простые объяснения))

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree