Превращаем текст в текстуру на CSS

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

Этот тип текстурного эффекта работает наилучшим образом с толстыми, блочными шрифтами, но вы также можете экспериментировать с другими шрифтами. В данном примере я буду использовать бесплатный шрифт под названием «Archivo Black«.

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11vw;
  margin: 6vw;
  line-height: 10vw;
  font-family: "Archivo Black", sans-serif;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: url(../img/texture.png);
}

Не забудьте изменить URL фонового изображения, чтобы указать свое собственное текстурное изображение. Также вы можете экспериментировать с значениями font-size и background-size. Это может изменить местоположение фонового изображения относительно текста, создавая нюансно различные текстурные эффекты.

Обратите внимание, что в коде используются вендорно-префиксные CSS-свойства, которые, на момент написания, требуются для обеспечения работы текстурного эффекта в большинстве браузеров.

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

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.