—»     —»   Отображаем изображение под текстом (с возможностью отката)
  Раздел: Tips and Tricks   Нет комментариев  

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



Браузеры семейства 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;
}

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

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

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

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 5245   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930