Эксперименты с background-clip: text

Главная

Статьи

Верстка сайтов

28.01.2012 00:00

Эксперименты с background-clip: text

С помощью свойства CSS "background-clip: text" (которое в настоящее время поддерживается только в браузерах Webkit), мы можем добавить фоновое изображение для текстового элемента. Сегодня мы будем экспериментировать с ним и создадим несколько симпатичных примеров, добавив CSS3 переходы.

Изображения из примеров от Andreas Preis и Joanna Kustra.

HTML-разметка

Структура будет очень простая - заголовок h3 внутри обертки:

<div class="it-wrapper">

 <h3>Andreas</h3>

</div> 

Мы будем использовать класс "it-animate" в обертке при помощи JQuery, чтобы показать переходы.

Пример 1

Эксперименты с background-clip: text

В первом примере мы добавим два фоновых изображения. Изначально мы хотим чтобы изображения занимали всё слово, поэтому мы установим размер фона 100%. Так как мы задаем только одно значение, то второе значение, то есть вертикальное "растяжение", будет создаваться автоматически. Это означает, что изображение будет сохранять соотношение сторон при вставке в элемент h3.

При использовании фонового изображения и настройке background-clip: “text”, мы должны убедиться, что цвет текста либо прозрачный или полупрозрачный, с тем чтобы иметь возможность видеть изображение. Мы будем использовать свойство rgba, которое позволяет нам установить прозрачность.

Мы также добавим полупрозрачный белый text-stroke (-webkit-text-stroke), чтобы изображение просвечивалось.

Начальное положение фонового изображения будет по центру.

.it-wrapper h3{

 font-size: 320px;

 line-height: 188px;

 padding: 60px 30px 30px;

 color: rgba(67, 201, 117, 0.9);

 font-family: 'BebasNeueRegular', Arial, sans-serif;

 text-shadow: 10px 10px 2px rgba(0,0,0,0.2);

 -webkit-text-stroke: 10px rgba(255,255,255,0.6);

 background-color: #fff;

 background-repeat: no-repeat;

 background-image: url(../images/2.jpg), url(../images/1.jpg);

 background-position: 50% 50%;

 background-size: 100%;

 -webkit-background-clip: text;

 /* на тот случай когда это свойство начнет поддерживаться Firefox */

 -moz-background-clip: text;

 background-clip: text;

 transition: all 0.5s linear;

 /* добавим некоторые свойства для Firefox */

 -moz-border-radius: 30px;

 -moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2);

}

Для Firefox мы хотим добавить некоторый запасной вариант. Хотя background-clip для текста не будет работать, мы все же можем сделать анимацию для фонового изображения.

Итак, мы оставим фоновое изображение, но добавим border-radius и box-shadow только для Firefox .

Это свойства, которые мы хотим, чтобы применялись к нашему текст при переходе:

.it-wrapper h3.it-animate{

 background-size: 50%;

 background-position: 0% 50%, 130% 50%;

 color: rgba(242, 208, 20, 0.4);

 -moz-box-shadow: 0px 0px 1px 8px rgba(242, 208, 20, 0.4);

}

Размер фона для изображения будет уменьшен до 50%, и мы будем менять положение фона для перемещения одного изображения влево, а другого - вправо. Мы также изменим цвет.

Для Firefox мы изменим цвет тени.

Пример 2

Эксперименты с background-clip: text

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

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

Если вы хотите легко создавать свои собственные градиенты, вы можете использовать Ultimate CSS Gradient Generator. Это действительно прекрасный инструмент и вы можете выбрать различные форматы цвета и легко создавать собственные градиенты. Если вы используете Photoshop, Вы сразу поймете, как использовать его.

Размер фона для обоих градиентов будет в три раза больше размера нашего слова в длину и равный 100% в высоту.

.it-wrapper h3{

 font-size: 270px;

 line-height: 180px;

 padding: 30px 30px 40px;

 color: rgba(255,255,255,0.1);

 font-family: 'Fascinate', 'Arial Narrow', Arial, sans-serif;

 text-shadow: 1px 1px 1px rgba(255,255,255,0.3);

 background:

 linear-gradient(

 left,

 rgba(105,94,127,0.54) 0%,

 rgba(255,92,92,0.57) 15%,

 rgba(255,160,17,0.59) 27%,

 rgba(252,236,93,0.61) 37%,

 rgba(255,229,145,0.63) 46%,

 rgba(111,196,173,0.65) 58%,

 rgba(106,132,186,0.67) 69%,

 rgba(209,119,195,0.69) 79%,

 rgba(216,213,125,0.7) 89%,

 rgba(216,213,125,0.72) 100%

 ),

 repeating-linear-gradient(

 -45deg,

 rgba(255,255,255,0.5),

 transparent 20px,

 rgba(255,255,255,0.3) 40px

 );

 background-size: 300% 100%;

 background-position: center left, top left;

 -webkit-background-clip: text;

 -moz-background-clip: text;

 background-clip: text;

 transition: all 1.8s linear;

 -moz-border-radius: 90px 15px;

 -moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);

}

Для Firefox мы опять добавим border-radius и box-shadow.

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

.it-wrapper h3.it-animate{

 background-position: center right, top right;

 color: rgba(39,137,149,0.5);

 -moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);

}

Для Firefox мы будем анимировать цвет box shadow в соответствии с цветом текста.

Пример 3

Эксперименты с background-clip: text

В нашем последнем примере мы хотим анимировать размер фонового изображения от огромного до 100%. Идея заключается в том, что фоновое изображение не видно, пока не происходит переход. Размер фонового изображения уменьшится до такой степени, что мы сможем увидеть это изображение.

.it-wrapper h3{

 font-size: 180px;

 line-height: 180px;

 padding: 20px 30px;

 color: rgba(0,80,81,0.7);

 -webkit-text-stroke: 2px rgba(0,0,0,0.5);

 font-family: 'Gravitas One', 'Arial Narrow', Arial, sans-serif;

 text-shadow: 15px 15px 1px rgba(255,255,255,0.3);

 background-image: url(../images/3.jpg);

 background-repeat: no-repeat;

 background-position: center center;

 background-size: 400%;

 -webkit-background-clip: text;

 -moz-background-clip: text;

 background-clip: text;

 transition: all 0.3s linear;

 -moz-box-shadow:

 -10px -10px 0px rgba(255,255,255,0.4),

 10px 10px 0px rgba(0,81,81,0.4),

 0px 0px 50px 50px rgba(255,255,255,0.9) inset;

}

Кроме размера фона, мы также изменим значение прозрачности rgba, и добавим тень для Firefox:

.it-wrapper h3.it-animate{

 background-size: 100%;

 color: rgba(0,80,81,0.1);

 -moz-box-shadow:

 -20px -20px 0px rgba(255,255,255,0.4),

 20px 20px 0px rgba(0,81,81,0.4),

 0px 0px 40px 0px rgba(255,255,255,0.4) inset ;

}