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

Демо – Скачать исходный код

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

Разметка

Структура будет состоять из элемента заголовка h3 c родительским элементом:

<div>

<h3>Andreas</h3>
</div>

Мы применим класс it-animate к родительскому элементу с помощью jQuery, чтобы показать переходы. 

Пример 1

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

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

Также добавим полупрозрачную белую обводку текста, через которую будет видно изображение. 

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

.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;

/* Давайте предположим, что когда-нибудь оно будет поддержано */

-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 не будет работать, мы можем изящно анимировать фоновое изображение.

Поэтому мы оставим фоновое изображение, но добавим приятное скругление углов и тень блока только для браузера Firefox.

Если Вам интересно, как это будет выглядеть в браузере Internet Explorer, не обольщайтесь, мы только добавили таблицу стилей, которая просто перепишет цвет текста и удалит фоновое изображение.

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

.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

Во втором примере мы поиграем с градиентами. Конечно, нам не надо сходить с ума с цветами, но это же градиент, давайте сделаем полосатую радугу!

Мы пропустим специфические для браузеров префиксы, так что смотрите в исходном коде.

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

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

И посмотрите CSS3 Patterns Gallery от Lea Verou, чтобы увидеть, что еще можно создать с помощью градиентов!

Размер фонового изображения для обоих градиентов будет в три раза больше длинны нашего слова и 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 мы снова добавим скругление углов и тень блока.

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

.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 мы анимируем цвет тени блока, чтобы он соответствовал цвету текста. 

Пример 3

В нашем последнем примере мы хотим изменять размер фонового изображения от огромного до 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 ;
}

Это все! Надеемся, Вам понравился этот эксперимент, и он вдохновит Вас! 

Демо – Скачать исходный код

Автор урока Mary Lou
Перевод — Дежурка

Смотрите также:

• Создание эффекта глянцевой фотографии при помощи CSS3
• Текстовые эффекты средствами CSS3 
• Цветовая палитра с помощью CSS3 & jQuery