Как обвести текст в css
Перейти к содержимому

Как обвести текст в css

  • автор:

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

Для создания обводки текста в CSS, вы можете использовать свойство text-stroke .

Пример текста с обводкой

В этом примере текст белого цвета с обводкой в 1 пиксель черного цвета. Обратите внимание, что свойство -webkit-text-stroke используется для браузеров, основанных на WebKit (например, Safari), в то время как свойство text-stroke используется для остальных браузеров. Также обратите внимание, что не все браузеры поддерживают это свойство.

Кроме свойства text-stroke , существуют и другие способы создания обводки текста в CSS, например, с помощью свойства text-shadow .

Пример текста с обводкой тенью

В этом примере текст белого цвета с обводкой из четырех теней черного цвета, сдвинутых на 1 пиксель в разные стороны. Такой способ удобен, если необходимо сделать разноцветную обводку.

Также можно использовать комбинацию свойств “text-stroke” и “text-shadow” для создания более сложной обводки текста.

Пример текста с двойной обводкой

Обводка текста в zero block

Модификация добавляет обводку тексту, а цвет делает прозрачным. Применить можно к тексту в zero block.

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

  1. Укажи тексту в zero block, которому нужно сделать обводку, класс text-stroke. Инструкция по добавлению своего класса элементу.
  2. Укажи цвет текста в настройках zero block, он применится к обводке.
  3. Укажи в настройках ниже толщину обводки.
  4. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Текст внутри круга с помощью CSS

Вписать текст в окружность можно с помощью CSS-свойства shape-outside и некоторых хитростей.

Для реализации стоит принять во внимание множество разных вещей: количество символов, количество слов, варианты шрифтов, размер шрифта, форматирование шрифта, требования к отзывчивости, макет дизайна и т.д. Один размер на все случаи здесь не подойдет, но рассмотрим всё по порядку.

Определим цель: надо отобразить цитату и имя автора внутри круга. Макет должен быть максимально гибким, сохранять HTML разметку безупречно чистой и кроме неё использовать только CSS.

Примечание: будущий уровень CSS Shapes определит свойство shape-inside , которое будет регулировать форму для обтекания содержимого внутри элемента.

Сперва HTML-разметка

Для примера понадобится элемент-оболочка, используем семантический в качестве внутреннего элемента. Внешней оболочкой может быть обыкновенный div :

 

Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.

– Jesse James Garrett

Разместим цитату в параграф

, а имя автора (подпись) – в . Ещё понадобится несколько названий CSS-классов для использования в таблице стилей.

Теперь немного базового CSS

Начинаем с оболочки div . Установим адаптивный квадрат c минимальным размером 300 пикселей, чтобы он поместился на небольших экранах и добавим относительное позиционирование (оно понадобится позже).

.quote-wrapper

Далее заставляем контейнер с цитатой заполнить всё отведенное пространство и имитировать форму круга с радиальным градиентом в качестве фона. Неожиданно, но в примере с текстом внутри окружности не используется border-radius .

.text

Следует отметить, что целые 70% отображают несколько грубые края. В ходе эксперимента выяснилось, что 70,3% края выглядят гораздо плавнее.

Край окружности справа более гладкий, чем слева.

Теперь, когда получился базовый круг, пора добавить эти css-свойства для css-класса .text .

.text

На сей момент всё будет выглядеть так:

получился базовый круг

Обработка текста CSS

Сперва стилизуем параграф:

.text p

Используем псевдоэлемент ::before для создания формы. Здесь вступает в игру свойство shape-outside . Применим координаты для polygon() и сдвинем его влево, чтобы текст обернулся внутри фигуры.

.text::before

Изменим ненадолго цвет радиального фона на красный. Точки многоугольника и соединительные линии останутся синего цвета. Это временно, для удобной отладки.

background: radial-gradient( ellipse at center, rgba(210, 20, 20, 1) 0%, rgba(210, 20, 20, 1) 70%, rgba(210, 20, 20, 0) 70.3% );

Вот что получается на сей момент:

Эти точки вдоль формы берутся из инструмента редактирования Firefox

То же самое нужно сделать для псевдоэлемента ::before параграфа p . Используем shape-outside , отражаем зеркально многоугольник и сдвигаем его вправо.

.text p::before

белый текст на белом фоне за пределами цветной окружности

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

Стилизация footer

Теперь настало время стилизовать и указать ему абсолютное позиционирование, чтобы вернуть его внутрь круга.

.quote-wrapper blockquote footer

Цвет фона выбирайте любой, какой нравится.

Теперь подошли к неудобной части. Текст должен быть оформлен таким образом, чтобы все слова и символы оставались внутри фигуры (окружности). Лучше оперировать этими CSS-свойствами:

  • font-size
  • shape-margin
  • line-height
  • letter-spacing
  • font-weight
  • font-style
  • min-width и min-height (для управления контейнером .quote-wrapper )

Декорирование этой конструкции кавычками

На демке видно гигантские кавычки. Это то, о чем пойдёт речь далее. Чтобы все выглядело правильно, потребуется не очень много усилий. Следует обратить внимание на то, что высота строки сильно влияет на вертикальное положение значка.

Тут можно воспользоваться наличием псевдоэлемента ::before у контейнера .quote-wrapper .

.quote-wrapper::before

Стили для адаптивности

На больших экранах цитату можно немного увеличить. Определим для перехода рубеж 850 пикселей, но можете использовать любое значение, которое будет уместно.

@media (min-width: 850px) < .quote-wrapper < height: 370px; width: 370px; >.quote-wrapper::before < font-size: 300px; >.text p < font-size: 26px; >.quote-wrapper blockquote footer < bottom: 32px; >>

Для масштабирования всей конструкции текста, вписанного в окружность, используется совсем немного CSS-свойств. Многоугольники, которые определяют окружность, не требуют изменений css при масштабировании.

Вот результат

Текст и HTML размещены внутри окружности с использованием комбинаций старых и новых CSS-свойств, чтобы сделать цитату яркой и привлекающей внимание. Всё это сделано без каких-либо дополнительных зависимостей и сохраняет HTML разметку чистой и семантической.

Текст и тень

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Параметры text-shadow

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

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

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

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

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

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

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст .stroke  

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст .stroke  

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

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

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

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

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

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

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

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст .stroke  

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

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

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

Рельефный текст

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст    

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

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

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст    

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow .

Текст с размытием

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст    

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

    Текст   

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

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

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