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

  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 .

Похожие

Это был первый сайт в мире
Как вы можете отпраздновать двадцать лет свободной, открытой сети? ЦЕРН решил воссоздать первый сайт. Веб-страницы были изобретены Тимом Бернерсом-Ли. 30 апреля 1993 года ЦЕРН опубликовал первую страницу Всемирной паутины, в которой рассказывалось о том, что такое W3, и выпустил эту технологию. С тех пор веб-сайты перестали служить только закрытому общению и передаче информации между физиками в университетах и ​​институтах по всему миру.
Прощание с градиентами CSS3
Прежде чем мы начнем, давайте разберемся с одной вещью: Я ♥ CSS3. Я понимаю, что у нас никогда не было так хорошо. На самом деле, я не сомневаюсь, что путешественники во времени, посещающие с 2004 года, будут болеть ревностью по поводу того, как легко мы теперь вызываем закругленные углы, тени и вращения объектов. Конечно, специфичные для браузера префиксы (то есть -moz, -webkit -o и т. Д.) Являются раздражением, но, к счастью, остальная часть обозначений разумна,
C #. Пример создания отчета. Report Viewer
В данном примере продемонстрировано формирование отчета на основе данных, содержащихся в локальной базе данных типа Microsoft SQL Server. База данных реализована в файле Education.mdf. По данным примером можно научиться создавать собственные отчеты, которые формируются на основе данных, предназначенных для использования под управлением СУБД Microsoft SQL Server. содержание Условие задачи Задано базу данных, которая предназначена для использования под управлением
Mac RPG Инструменты
Вступление Я начал играть в Dungeons & Dragons в начальной школе, и я использовал компьютеры Apple почти так же долго. Я начал писать приключения на своем Apple II и печатать их на матричном принтере, совершил небольшое путешествие в мир ПК с Windows во время и после колледжа, а затем вернулся к Mac с выпуском Mac OS X. Мои Маки остаются важнейшим компонентом моей игры, так как я использую его для всего: от создания персонажей до написания приключений и отслеживания
Как установить стек Apache, MySQL и PHP (FAMP) на FreeBSD 10.1
Вступление Стек FAMP, аналогичный стеку LAMP в Linux, представляет собой группу программного обеспечения с открытым исходным кодом, которое обычно устанавливается вместе, чтобы позволить серверу FreeBSD размещать динамические веб-сайты и веб-приложения. FAMP - это аббревиатура, обозначающая F reeBSD (операционная система), Pache (веб-сервер), M ySQL (сервер базы данных) и P HP (для обработки динамического содержимого PHP).
Как безопасно настроить свой iPad
... пример, безымянный палец. Как скрыть личную информацию, отображаемую на экране блокировки? По умолчанию на экране блокировки отображается много информации. Очевидно, полезно знать, что что-то интересное произошло в Fallout Shelter, или видеть, что кто-то прокомментировал ваш пост в Facebook. С другой стороны, нет ничего положительного в том, что каждый может читать ваши последние сообщения, письма и SMS с одноразовыми паролями вашего банка. Если вы хотите

Комментарии

Есть ли другие способы защитить мой Apple ID?
Есть ли другие способы защитить мой Apple ID? Активируйте двухфакторную аутентификацию, чтобы любой, кто пытается получить доступ к вашим учетным записям Apple ID или iCloud или использует ваши учетные данные для покупки чего-либо в iTunes, App Store или iBook Store, должен будет ввести обычный пароль и 4-значный код аутентификации. , В этом после мы объясняем,
Достаточно ли одного лишь звукового опыта, чтобы Desire 10 Lifestyle выделялся на фоне второй половины?
Достаточно ли одного лишь звукового опыта, чтобы Desire 10 Lifestyle выделялся на фоне второй половины? Lifestyle пропускает сканер отпечатков пальцев, разрешение 1080p, флагманскую камеру, лазерную автофокусировку и двухцветную вспышку - все, что есть в Desire 10 Pro. Desire 10 Lifestyle не лишен функций, хотя и с более низкой ценой на его имя, есть все еще хороший шанс, что он будет претендовать на рынок среднего класса.
Я уверен, что вы могли бы успешно снять второй фильм только о функциях системы Xiaomi - почему?
Я уверен, что вы могли бы успешно снять второй фильм только о функциях системы Xiaomi - почему? Это не время. Время перемен. Резюме теста смартфона Xiaomi Mi Mix 2 Xiaomi Mi Mix 2 - идеальное устройство, но не блестящее и не феноменальное . Это может, однако, спокойно появляться в некоторых рейтинг рекомендуемых смартфонов , Отличный дизайн, очень хороший экран. Достойный мультимедиа и

Хорошо готов?
Как скрыть личную информацию, отображаемую на экране блокировки?
Есть ли другие способы защитить мой Apple ID?
Достаточно ли одного лишь звукового опыта, чтобы Desire 10 Lifestyle выделялся на фоне второй половины?
Я уверен, что вы могли бы успешно снять второй фильм только о функциях системы Xiaomi - почему?
Я уверен, что вы могли бы успешно снять второй фильм только о функциях системы Xiaomi - почему?