31 Окт
Создание текстурного текстового эффекта с помощью 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-свойства, которые, на момент написания, требуются для обеспечения работы текстурного эффекта в большинстве браузеров.
На приведенном ниже примере показаны три различных примера с использованием того же шрифта, но с различной текстурой, основанной на изображении, для каждого из них.
Александр Сокирка
