—»     —»   Экспериментируем с background-clip: text
  Раздел: Руководства   Комментариев: 2  

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



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

Изображения в первом демо были предоставлены Андреасом Прее (Andreas Preis), а изображение из последнего демо было предоставлено Джоанной Кустра (Joanna Kustra).

Верстка

Структура будет простой: элемент заголовка h3 с оболочкой:

<div class="it-wrapper">
<h3>Andreas</h3>
</div>

К оболочке мы применим класс it-animate с помощью jQuery для того, чтобы отображать переходы.

Пример 1

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

В первом примере нам нужно добавить два фоновых изображения. Сначала нам нужно, чтобы изображения занимали все слово, поэтому мы устанавливаем размер фона на 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

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

Во втором примере мы поиграем с градациями. Конечно же, не стоит злоупотреблять этим, но… это градация! Давайте делать радугу!

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

Фоновое изображение представляет собой линейную градацию со множеством цветов, а второе изображение представляет собой повторяющуюся линейную градацию с полосами.

Вы без труда можете создать собственные градации, вам просто нужно воспользоваться 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

Экспериментируем с 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;
}

И на этом всё! Надеюсь, что вам понравились сегодняшние эксперименты, и вы найдете им применение!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 8699   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 января 2012 @ 17:39
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
Отличная задумка, вот только не везде работает и посему не актуальна на данное время.


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Комментарий #2: 27 февраля 2012 @ 22:08
Написал: Максим — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
класс!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Товары для телефонов
товары для телефонов
орбита.su
Металлические лестницы
лестницы ламинатом? Быстро! Качественно и долговечно
ipk-triumf.ru
Ремонт айфон киев
Надежно, быстро и по низким ценам производим ремонт айфон любой сложности
iprofix.com.ua
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2019    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031