Как сделать обводку текста в CSS
Для создания обводки текста в CSS, вы можете использовать свойство text-stroke .
Пример текста с обводкой
В этом примере текст белого цвета с обводкой в 1 пиксель черного цвета. Обратите внимание, что свойство -webkit-text-stroke используется для браузеров, основанных на WebKit (например, Safari), в то время как свойство text-stroke используется для остальных браузеров. Также обратите внимание, что не все браузеры поддерживают это свойство.
Кроме свойства text-stroke , существуют и другие способы создания обводки текста в CSS, например, с помощью свойства text-shadow .
Пример текста с обводкой тенью
В этом примере текст белого цвета с обводкой из четырех теней черного цвета, сдвинутых на 1 пиксель в разные стороны. Такой способ удобен, если необходимо сделать разноцветную обводку.
Также можно использовать комбинацию свойств “text-stroke” и “text-shadow” для создания более сложной обводки текста.
Пример текста с двойной обводкой
Обводка текста при помощи HTML и CSS
Привет всем хабражителям. Начал я как-то теплым летним вечером рисовать дизайн сайта, попробовал применить однопиксельную обводку текста, смотрелось довольно миленько, решил оставить, наивно думая что большинство последних версий браузеров будут иметь какое-то черновое CSS3 свойство.
Когда дошло дело до верстки того самого элемента, текст в котором нужно было обвести, выяснилось, что text-stroke доступен только в webkit’ах, а это всего-лишь 20-30% браузеров.
Решение проблемы было придуманно довольно быстро: использовать множественную тень.
Если вам стало интересно то добро пожаловать под кат.
Для множественной тени (так-же применимо в современных браузерах и к background) следует описать все тени (я их использовал 4) через запятую, следующим образом:
body text-shadow: #000 1px 0 0px, #000 0 1px 0px, #000 -1px 0 0px, #000 0 -1px 0px;
>
в результате получаем правую, нижнюю, левую и верхнюю тени
text-shadow имеет следующий синтакс: #цвет сдвиг_по_х сдвиг_по_у размер_размытости; являеться CSS2.1 свойством.
Для большей наглядности используем сдвиг по больше и раскрасим тень в разные цвета:
body color: #000;
text-shadow: text-shadow: #f00 40px 0px 0px, #0f0 0px 20px 0px, #00f 0px -20px 0px, #f0f -40px 0px 0px;
>
Получим следующий результат:
Также можно поиграться с размером шрифта, сдвигом, размытием для получения желаемого результата. К примеру для получения изображения в начале поста использовался следующий вариант:
body font: 40px Tahoma;
color: #e7e7e7;
text-shadow: #000 2px 0px 2px, #000 0px 2px 2px, #000 0px -2px 2px, #000 -2px 0px 2px;>
Надеюсь эта информацию будет кому-то полезной.
Файл с примерами
Как сделать обводку текста в css
Чтобы сделать обводку текста в CSS, используйте свойство text-stroke . Это свойство задает толщину и цвет обводки для текста.
Вот пример CSS кода для добавления:
.my-text color: #000000; /* Цвет текста */ -webkit-text-stroke: 1px #FFFFFF; /* Толщина и цвет обводки */ text-stroke: 1px #FFFFFF; /* Толщина и цвет обводки (стандартное свойство) */ > В этом примере класс .my-text применяется к элементу с текстом, и свойство -webkit-text-stroke задает толщину обводки в 1 пиксель и цвет белый (#FFFFFF) для браузеров, использующих движок WebKit (например Google Chrome). Свойство text-stroke указывает те же значения для браузеров, которые не используют движок WebKit.
Обратите внимание, что не все браузеры поддерживают свойство text-stroke , поэтому, возможно понадобится использовать префиксы для поддержки разных браузеров.
Проверить поддерживается ли это свойство в выбранном вами браузере можно на сайте canIUse
Как сделать контурный текст?
Контурный текст выглядит так, будто каждую букву обвели цветной тушью. Обычно такой способ оформления применяется к заголовкам с рубленым шрифтом и крупными буквами (рис 1). Для мелкого текста, как правило, контурные буквы не используются, поскольку снижают читаемость и восприятие текста.
Рис. 1. Вид контурного текста
Ниже рассмотрим три метода создания контурных заголовков:
- через свойство text-stroke;
- через свойство text-shadow;
- с помощью SVG.
Свойство text-stroke
Для создания контурных заголовков применяется два стилевых свойства:
- text-stroke-width — устанавливает толщину контура ( text-stroke-width: 2px );
- text-stroke-color — задаёт цвет контура ( text-stroke-color: red ).
Вместо этих двух свойств можно написать и одно универсальное text-stroke. В качестве значения через пробел пишем толщину и цвет контура ( text-stroke: 2px red ).
Эти свойства официально не входят в спецификацию CSS и браузерами поддерживаются только с префиксом -webkit- (даже в Firefox). В примере 1 показана стилизация заголовков с помощью оранжевого контура толщиной в два пикселя.
Пример 1. Использование -webkit-text-stroke
Функция Вейерштрасса
Обычный текст.
Цвет текста можно менять через привычное нам свойство color. И если это значение, как в примере, установить прозрачным, то будет отображаться только контур.
Данный метод создания контура является наиболее универсальным и поддерживается всеми современными браузерами. При этом следует учитывать, что свойство text-stroke нестандартное и не входит официально в спецификацию CSS.
Свойство text-shadow
text-shadow добавляет к тексту тень, но при определённых значениях свойства такая тень напоминает контур. Используем следующий синтаксис:
text-shadow: 0 0 2px
Толщина в два пикселя подобрана опытным путём; если установить большее значение, то контур станет выглядеть размытым. Но даже в этом случае тень слабо похожа на контур. Для усиления цвета надо повторить одни и те же параметры тени несколько раз через запятую. Четырёх раз вполне достаточно, хотя при желании можно сделать и больше. На рис. 2 показан вид контуров с разным числом теней. Первым сверху идёт текст с одной тенью, для каждого следующего текста количество теней увеличивается на единицу.
Рис. 2. Вид контура в зависимости от тени
В примере 2 показано создание контурного заголовка через тень.
Пример 2. Использование text-shadow
Функция Вейерштрасса
Обычный текст.
Поскольку этот метод лишь имитирует создание контура, цвет текста должен явно совпадать с цветом фона. Тем самым буквы перекрывают часть тени, оставляя только внешний контур, идущий по внешнему краю букв.
Данный метод создаёт фиктивный контур за счёт использования тени вокруг букв, из-за чего такой контур не имеет чётких очертаний и слегка размыт. Чтобы усилить цвета приходится повторять параметры тени несколько раз. Зато свойство text-shadow работает во всех браузерах, включая устаревшие версии.
Использование SVG
SVG предлагает дополнительные возможности для оформления текста по сравнению с CSS. К тому же SVG поддерживают все браузеры, включая устаревший Internet Explorer.
Для создания контурного текста внутрь контейнера вставляем элемент и для него задаём свойство stroke-width , определяющее толщину контура, и свойство stroke , которое устанавливает цвет этого контура (пример 3).
Пример 3. Использование SVG
В браузере Opera текст отображается белым цветом с оранжевым контуром. Чтобы оставить только контур, используем свойство fill со значением none .
Использование SVG для стилизации текстовых заголовков имеет как свои плюсы, так и минусы. В частности, у нас больше возможностей по управлению видом текста, но при этом некоторые вещи из HTML, вроде автоматического переноса текста, для SVG не работают.
См. также
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- Свойства текста в CSS