Фон-клип, текст-тень и градиенты; Боже мой!

  1. Первый пример: background-clip + text-shadow
  2. Второй пример: background-clip + сгенерированный контент

Недавно у меня было несколько дизайнов, где я смог поиграть с background-clip: текст в сочетании с текстовой тенью и градиентами, и я хотел поделиться своим опытом.

Прежде чем мы зайдем слишком далеко, background-clip: text поддерживается не во всех браузерах. Я полагаю, что он все еще поддерживается только в браузерах Webkit, поэтому убедитесь, что у вас достаточно запасных вариантов. Демоверсии на этой странице также будут отображаться только со всеми изюминками в webkit, так что я буду ждать, когда вы переключитесь.

Хорошо готов?

Первый пример: background-clip + text-shadow

Первый пример: background-clip + text-shadow

Изображение выше - пример заголовка, который мне нужен для создания. Он имеет градиент над текстом и тень от него. Поскольку эти заголовки должны были настраиваться CMS, мы не хотели, чтобы они были изображениями. CSS3 на помощь!

Сначала мы добавим градиент CSS3 в качестве фона.

h1 {background-image: -webkit-градиент (линейный, 50% 0%, 50% 100%, color-stop (0%, #ffffff), color-stop (100%, # 91a9cb)); background-image: -webkit-linear-Gradient (# ffffff, # 91a9cb); }

Далее мы добавляем background-clip и цвет заливки текста. Это также хорошая возможность добавить запасной цвет текста для браузеров, которые не поддерживают background-clip: text .

h1 {background-image: -webkit-градиент (линейный, 50% 0%, 50% 100%, color-stop (0%, #ffffff), color-stop (100%, # 91a9cb)); background-image: -webkit-linear-Gradient (# ffffff, # 91a9cb); -webkit-background-clip: текст; -webkit-text-fill-color: прозрачный; цвет: #fff; }

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

h1 {background-image: -webkit-градиент (линейный, 50% 0%, 50% 100%, color-stop (0%, #ffffff), color-stop (100%, # 91a9cb)); background-image: -webkit-linear-Gradient (# ffffff, # 91a9cb); -webkit-background-clip: текст; -webkit-text-fill-color: прозрачный; цвет: #fff; тень для текста: 6px 6px 9px rgba (0, 0, 0, 0.33); }

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

<h1 data-text = "Oh heeey!"> Oh heeey! </ h1> h1 {background-image: -webkit-градиент (линейный, 50% 0%, 50% 100%, остановка цвета (0%, # ffffff), color-stop (100%, # 91a9cb)); background-image: -webkit-linear-Gradient (# ffffff, # 91a9cb); -webkit-background-clip: текст; -webkit-text-fill-color: прозрачный; цвет: #fff; положение: относительное; } h1: после {background: none; содержание: attr (data-text); слева: 0; положение: абсолютное; тень для текста: 6px 6px 9px rgba (0, 0, 0, 0.33); верх: 0; z-индекс: -1; }

Это выглядит довольно здорово и имеет запасной вариант для других браузеров. Успех!

Второй пример: background-clip + сгенерированный контент

Второй пример: background-clip + сгенерированный контент

В этом примере мы переворачиваем то, что сделали в первом случае, и используем background-clip для сгенерированного контента. Это изображение выше показывает, как нам нужен конечный результат.

Во-первых, мы просто создаем стиль отображения заголовка.

h1 {color: #fff; шрифт: 52px / 52px Georgia, Times, serif; преобразование текста: верхний регистр; }

Далее давайте используем сгенерированный контент и добавим фоновое изображение.

<h1 data-text = "Эй, приятель!"> Эй, приятель </ h1> h1 {color: #fff; шрифт: 52px / 52px Georgia, Times, serif; положение: относительное; преобразование текста: верхний регистр; } h1: after {background: url (images / structure / bg-heading-diag.png); содержание: attr (data-text); цвет: прозрачный; слева: 4 пикселя; положение: абсолютное; верх: 4 ​​пикселя; z-индекс: -1; }

Затем давайте добавим фоновый клип к этому брату.

h1 {color: #fff; шрифт: 52px / 52px Georgia, Times, serif; положение: относительное; преобразование текста: верхний регистр; } h1: after {background: url (images / structure / bg-heading-diag.png); -webkit-background-clip: текст; содержание: attr (data-text); цвет: прозрачный; слева: 4 пикселя; положение: абсолютное; верх: 4 ​​пикселя; z-индекс: -1; }

Наконец, поскольку background-clip: text не работает в браузерах, не относящихся к webkit, нам нужно добавить какую-то проверку, чтобы проверить, является ли он webkit или нет. Когда я ранее проверял, не было никакого способа проверить, поддерживается ли определенное значение для свойства, поэтому я просто свернул с Объект браузера jQuery ,

if ($. browser.webkit) {$ ('html'). addClass ('webkit'); }

Затем нам просто нужно немного изменить стили нашего сгенерированного контента, чтобы иметь сплошной цвет для браузеров без webkit.

h1 {color: #fff; шрифт: 52px / 52px Georgia, Times, serif; положение: относительное; преобразование текста: верхний регистр; } h1: после {color: # 948972; содержание: attr (data-text); слева: 2 пикселя; положение: абсолютное; верх: 2 пикселя; z-индекс: -1; } .webkit h1: after {background: url (images / structure / bg-heading-diag.png); -webkit-background-clip: текст; цвет: прозрачный; слева: 4 пикселя; верх: 4 ​​пикселя; }

И это все! Просто несколько трюков, с которыми я столкнулся, играя с этим материалом в некоторых проектах. Дайте мне знать, если у вас есть какие-то другие хитрости с background-clip .

Хорошо готов?