Изображения в первом демо были предоставлены Андреасом Прее (Andreas Preis), а изображение из последнего демо было предоставлено Джоанной Кустра (Joanna Kustra).
Верстка
Структура будет простой: элемент заголовка h3 с оболочкой:
<div class="it-wrapper">
<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;
/* let's assume that one day it's supported */
-moz-background-clip: text;
background-clip: text;
transition: all 0.5s linear;
/* for now, let's just add some niceness for Firefox */
-moz-border-radius: 30px;
-moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2);
}Для Firefox придется добавить небольшой «откат». Хотя здесь и не будет работать данный параметр, мы все равно можем сделать так, чтобы фоновое изображение было подкреплено красивой анимацией.
Итак, мы оставляем фоновое изображение, но добавляем немного закругленные углы и тень блока (только для браузера Firefox).
(Если вы думаете над тем, что может произойти в IE, то не беспокойтесь, так как в таблицы стилей мы внесли код, который просто переписывает параметры цвета текста и удаляет фоновое изображение).
Вот параметры, требующиеся для трансформации нашего текста:
.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);
}Пример 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;
}И на этом всё! Надеюсь, что вам понравились сегодняшние эксперименты, и вы найдете им применение!
Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
