Как создать эффект контурного текста в CSS.

CSS3 22.11.2022

Создать эффект обводки текста в CSS не так просто, как может показаться.

Мы уже говорили о свойстве text-stroke в предыдущем уроке, но это свойство вызывает проблемы с отображением в большинстве браузеров на момент написания.

Вот почему мы изучили другую технику, которая состоит из:

Использование фильтра тени для создания 4 разных теней, по одной для каждой стороны текстового элемента.
Установка цвета текста равным цвету фона.


.title {
  color: #404040;
  filter: drop-shadow(-1px 0 0 mistyrose)
          drop-shadow(1px 0 0 mistyrose)
          drop-shadow(0 -1px 0 mistyrose)
          drop-shadow(0 1px 0 mistyrose);
  font-size: 4rem;
}

body {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #404040;
}

Пара замечаний: мы не использовали свойство box-shadow, потому что оно создавало бы тень вокруг «поля», содержащего текст.

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

Было бы здорово, если бы мы могли изменить значение распространения свойства text-shadow (например, text-shadow: 0 0 0 1px mistyrose;), но, к сожалению, только свойство box-shadow поддерживает значение распространения.

Живая демонстрация:

Надеюсь Вам понравилась!

Автор Целовальников Сергей