Как сделать окантовку текста в css

Контур для текста на CSS

контур текста

На момент написания этого материала только разработчики Webkit предусмотрели такую возможность — CSS свойство -webkit-text-stroke. Чтобы нам сделать белый текст с черным контуром, достаточно двух строк кода:

Т.к. контур появится только у webkit браузеров, остальным незачем цвет текста сливать с цветом фона. Для этого предусмотрено еще одно свойство — -webkit-text-fill-color:

Само собой не подходит вариант, который работает только в паре браузеров, поэтому для остальных браузеров будет все немного сложнее. Для эмуляции контура будем использовать text-shadow:

Данный прием сработает во всех распространенных ныне браузеров, кроме IE8 и ниже. Для них можно либо сделать заголовки по проще (без контура), либо использовать картинки, или же применить небольшой скрипт + несколько дополнительных CSS правил для эмуляции тени. Ниже приведенный код подключаем только для IE8 и версий ниже:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari 5
  • Chrome

Недостатки

  • для «особых» браузеров нужен Javascript;
  • кроссбраузерно можно сделать контур только в 1px;
  • начертание в разных браузерах немного отличается.

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

Интересно как на такое решение отреагируют поисковики, ведь цвет текста (color) совпадает с цветом фона (background-color).

Делаем тень к тексту на CSS. Обводка текста с помощью CSS

Делаем тень к тексту на CSS. Обводка текста с помощью CSSстолкнулся с необходимостью использовать тень с текстом, чтобы покрасивее вглядел заголовок

Конечно, в Photoshop'е можно наводить красоту, но что делать если нужно сохранить именно текст, а не вставлять его красивой картинкой?

Например, заголовок для пущей индексации захотелось сделать текстом в тегах <h1> </h1>. Но при этом сохранить красивость. Вот так:

тень к тексту на css

* — здесь применён ещё градиент к тексту, используя опять таки CSS. О том как это реализовать — читайте в статье — Делаем градиент к тексту, используя CSS

Итак, делаем текст с тенью, используя CSS:

Уровень 3 CSS обладает свойством &#39;text-shadow&#39; для добавления тени на каждую букву любого текста.

CSS свойство text-stroke

Свойство text-stroke — это сокращенная форма записи для следующих свойств:

Есть еще свойство text-fill-color, которое переопределяет свойство color, позволяя изменить цвет текста в браузерах, которые не поддерживают свойство text-stroke .

Можно выбрать цвет отсюда: HTML colors.

Значение по умолчанию 0 currentColor
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Да
Версия
DOM синтаксис object.style.textStroke = "1px #666";

Синтаксис¶

Пример¶

Рассмотрим другой пример, где использованы несколько значений свойства text-stroke :

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

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