Возникли проблемы с применением градиента к тексту, который я создал с помощью Lettering.js / Kern.js. Вот тощий:
Lettering.js разделяет каждый символ в слове на отдельные промежутки с возрастающими классами. Оттуда вы можете настроить поле каждой буквы, поэтому «кернинг» его!
Я полагаю, что есть два способа сделать это: либо использовать прозрачное изображение с repeat-x и наложить его (в дальнейшем метод 1), либо идти по дороге, предназначенной только для веб-наборов, и использовать градиент веб-наборов в качестве заливки. цвет (метод 2). По крайней мере, теоретически ...
Ни один из способов не работает для меня!
Метод 1 - Как я могу применить изображение ТОЛЬКО к буквам ... вместо отрицательного пространства между ними.
Метод 2 - для какого атрибута установить градиент, чтобы заполнить текст
Вот мой код .. Спасибо!
HTML:
<header>
<h1>LARA</h1>
</header>
CSS:
h1 {
font-family:FuturaStdExtraBold;
font-size:200px;
font-weight:normal;
font-style:normal;
color:#333e52;
//Method 1
background: url(../img/overlay_light.png) repeat-x;
text-shadow: 0 1px 3px rgba(0,0,0,1);
//Method 2
//-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(27,33,44,1)), color-stop(50%, rgba(255,255,255,1)), to(rgba(27,33,44,1)));
}