Главная > Tips and Tricks > Отображаем изображение под текстом (с возможностью отката)

Отображаем изображение под текстом (с возможностью отката)


23 ноября 2010, 13:00. Разместил: Mysterious Master
Браузеры семейства WebKit поддерживают отличную CSS3-функцию - background-clip, с помощью которой вы можете реализовать нечто привлекательное для глаз посетителей. Впервые мы столкнулись с данной функцией в первой модели iPhone, где для разблокировки устройства, нужно перетянуть ползунок. Далее мы сталкивались с этим при реализации идеи с прозрачными границами.

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

Отображаем изображение под текстом (с возможностью отката)

Основная мысль

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

Это всё, что нужно сделать. Установить фон элемента, затем вырезать его и выставить цвет заливки текста на прозрачный режим.

Проблема

Мы уверены, что сейчас каждый задается вопросом – будет ли это работать во всех браузерах? На данный момент техника будет работать только в браузерах семейства WebKit. Но какова же тогда будет замена? Как видно в коде, приведенном выше, мы также указываем значения цвета. Это значение замещается параметром webkit-text-fill-color в браузерах, в которых есть поддержка. В браузерах же, которые не поддерживают -webkit-background-clip, мы будем видеть текст поверх изображения, а вы просто задаете наиболее приятный и подходящий цвет текста.

Итак, вот что мы делаем:

Отображаем изображение под текстом (с возможностью отката)

Всё-таки, это не конец света и мы, как минимум, сделали текст максимально читаемым. Но тут огромная пропасть между тем, что видим мы, и что видят пользователи браузеров семейства webkit. Короче говоря, нам не нравится такой откат, поэтому сейчас сделаем всё привлекательнее.

Лучшая реализация отката

Лучшим инструментом для создания откатов можно считать Modernizr. Просто внесите небольшой js-файл в код страницы, и он автоматически добавит имена классов, который определяет используемый вами веб-браузер. Он также предоставляет АПИ для тестирования функций в javascript, но сейчас он нам не нужен.

К сожалению, Modernizr не имеет функции тестирования работы background-clip. Пол Айриш (Paul Irish), один из создателей Modernizr, советует вот такой вот быстрый способ тестирования данной функции:

<script src="modernizr-1.6.min.js"></script>
<script>
        Modernizr.addTest('backgroundclip',function(){

          var div = document.createElement('div');

          if ('backgroundClip' in div.style) return true;

          'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
            if (val+'BackgroundClip' in div.style) return true;
          });

        });
</script>

Теперь мы можем знать наверняка, поддерживает ли браузер background-clip или нет. Если поддерживает, то HTML-тэгу будет задан класс backgroundclip, если не поддерживает, то класс будет - no-backgroundclip.

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

.backgroundclip h1 {
        background: url(images/west.jpg) -100px -40px no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

h1 {
        color: orangered;
}

Ба-бах! Теперь у нас вместо отпугивающего изображения, отображается сплошная заливка, которая не так режет глаза.

Отображаем изображение под текстом (с возможностью отката)

: Посмотреть демо
Вернуться назад