Text gradient css: How to add a gradient overlay to text with CSS by Sarah L. Fossheim

градиентов CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS-градиенты

— CR

• Глобальное использование

  95,18% + 3,03% «=» 98,21%

Метод определения линейного или радиального цветового градиента как изображения CSS.

Хром

1. 4 — 9: Частичная поддержка
2. 10 — 25: Поддерживается
3. 26 — 111: Поддерживается
4. 112: Поддерживается
5. 113 — 115: Поддерживается

EDGE

1. 12- Поддерживается

Safari

1. 01% — Not supported»> 3.1 — 3.2: не поддерживается
2. 4 — 5: частичная поддержка
3. 5.1 — 6: частичная поддержка
4. 6.1 — 15,3: частичная поддержка
5. 15.4 — 16.3: поддержка
4005 40054444444444444444444444444444444444444444444444444444444444444444444444: 400544444444: 400544444: 40015 40015 40015 4005: 40054444: 40015 40015 40015: 3
6. 40015: 154444: 3
.
7. 16,5 — TP: поддерживается

Firefox

1. 2 — 3,5: не поддерживается
2. 3,6 — 15: частичная поддержка
3. 13% — Partial support»> 16 — 35: частичная поддержка
4. 36 — 110: Поддержка
5. 70707070701111:
   :
   : 35: 35: частичная поддержка
   • 36 — 110: 110015
   • 7070707011:
     :
     : 35: 35: частичная опора 112 — 113: Поддерживается

Opera

1. 9 — 11: не поддерживается
2. 11,1 — 11,5: частичная поддержка
3. 11,6 — 12: Поддерживается
4. 12,1 — 94: Поддержка
5. : 70015
6. 64% — Supported»> 12,1 — 94: 70015
7. : 70015
8. 12,1 — 94:
9. : 70015
10. 12.1 —
    1. 5,5 — 9: не поддерживается
    2. 10: Поддерживается
    3. 11: Поддерживается

    Chrome для Android

    1. 111: поддержан

    Safari на IOS

    11111115 — —

Safari на IOS

115 —

. 6.1: Частичная поддержка

• 7 — 15,3: Частичная поддержка
• 15,4 — 16,3: Поддержано
• 16,4: Поддержано
• 16,5: Поддержано

Samsung Internet

1. 81% — Supported»> 4- 1
.0126 20: поддержан

Opera Mini

1. Все: не поддерживается

Opera Mobile

1. 10–11: не поддерживается
2. 11.1 — 11.5: Partial Support
12: 12. 12: 12: 70015 12: 70015 12: 70015 12:
5 12: 70015 12: 12: 70015 12:15 12: 70015. 73: Supported

UC Browser for Android

1. 13.4: Supported

Android Browser

1. 2.1 — 3: Partial support
2. 4 — 4.3: Supported
3. 4.4 — 4.4.4: Supported
4. 00% — Supported»> 111: Supported

Firefox for Android

1. 110: Supported

QQ Browser

1. 13.1: Supported

Baidu Browser

1. 13.18: Supported

KaiOS Browser

1. 2.5: Supported
2. 3: Поддерживается

Синтаксис, используемый браузерами с поддержкой префикса, может быть несовместим с таковым для надлежащей поддержки.

Поддержка может быть частично эмулирована в более старых версиях IE с использованием нестандартного «градиентного» фильтра.

Firefox 10+, Opera 11.6+, Chrome 26+ и IE10+ также поддерживают новый синтаксис «to (side)».

Ресурсы:

Инструмент для эмуляции поддержки в IE

Webplatform Docs

Редактор поперечного браузера

Sub-Features:

CSS. Повторяющие 903

02020202020202020202020202. Блоки WordPress — BlockifyWP

Вот простой CSS-трюк, позволяющий добавить поддержку градиентного текста в WordPress, который можно настроить, используя только базовые функции блока. В этом примере используется блок «Заголовок» с настройкой цвета фона, но его можно изменить в соответствии с вашими потребностями.

Первым шагом является добавление необходимого CSS на ваш сайт, его можно разместить в файле style.css дочерней темы или в пользовательском плагине. Приведенный ниже фрагмент кода добавит поддержку градиента в блок заголовка с уровнем h2, но вы можете изменить селекторы ниже по своему вкусу, если хотите использовать градиенты с другими блоками:

После добавления приведенного выше фрагмента кода на ваш сайт , вы сможете выбрать цвета градиента с помощью параметра «Цвет фона» при редактировании блока заголовка, как показано на записи экрана ниже:

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

Разборка фрагмента кода CSS

Фрагмент кода, используемый в этом примере, использует несколько простых приемов CSS для включения градиентов текста. Вот некоторые дополнительные сведения о том, как это работает, и как вы можете изменить его в соответствии с вашим проектом:

h2.has-background[class*="-gradient-background"]

Селекторы классов нацелены на любой элемент заголовка h2 с классом, содержащим «-gradient-background». Это обрабатывает градиенты тем и пользовательских предустановок, которые используют именованные классы и пользовательские свойства для применения значения.

h2.has-background[style*="-gradient("]

Этот селектор обрабатывает пользовательские градиенты, не включенные в список предустановок. Это позволяет пользователям выбирать любой цвет в редакторе. Он ищет любой элемент, который содержит «-gradient» в атрибуте встроенного стиля. 0003

-webkit-background-clip: text !important

Маскирует текст фоновым изображением/цветом. Это важная часть CSS, благодаря которой все работает.

цвет: прозрачный

Сбросить текущий цвет текста на прозрачный, чтобы маска работала.

padding: 0

По умолчанию WordPress добавляет некоторые отступы к блокам заголовков и абзацев, если установлен цвет фона. Это удаляет заполнение по умолчанию, но если в редакторе установлено пользовательское значение заполнения, оно переопределит этот сброс.

Улучшенные подходы к добавлению текстовых градиентов

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

Text Format

В идеале WordPress должен добавить поддержку градиента в формат расширенного текста Highlight. Доступ к формату Highlight можно получить с панели инструментов блока для любого блока, который использует форматированный текст и поддерживает выделение текста. Ниже приведен скриншот формата выделения, который идеально подходит для текстовых градиентов (я уверен, что поддержка скоро будет добавлена ​​в ядро):

Стиль блока

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

Пользовательский класс

Другой вариант — создать собственный класс CSS, например, .has-gradient-text . Пользовательские классы можно добавить из раздела «Дополнительно» в настройках блока.

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

Другие подходы

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

Тема Blockify поставляется с форматом Gradient Text для всех блоков, использующих поле Rich Text. Сюда входят кнопки, списки, ссылки, заголовки, абзацы и многое другое. Если/когда поддержка градиентов будет добавлена ​​в ядро ​​​​WordPress, эта функция будет устаревшей, и вместо этого мы переключимся на нативную функцию.

Ниже показано, как применить пользовательский градиент к выделенному тексту в теме Blockify:

Дополнительные трюки с градиентом текста с помощью CSS

Вот еще несколько интересных вещей, которые вы можете обнаружить при работе с текстовыми градиентами в WordPress. . Все это возможно с помощью приведенного выше фрагмента кода (с селекторами CSS, настроенными для всех блоков).

Градиентные смайлики

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

⚡️⚡️⚡️

Градиентный текст кнопки

Градиентный текст также можно применить к блоку кнопок, поскольку он использует поле Rich Text. Обратите внимание, что может потребоваться увеличить высоту строки кнопки, чтобы предотвратить обрезку маскированного текста:

Кнопка с градиентным текстом

Градиентная рамка

Градиентные границы не являются градиентным текстом, но иногда необходимы при работе с градиентным текстом. Вот один из способов добиться градиентных границ в WordPress, используя только базовые блоки и не используя CSS. Он использует групповой блок с градиентным цветом фона и отступом в 2 пикселя, затем внутренний блок со сплошным фоном, соответствующим цвету фона тела, чтобы он отображался как прозрачный фон. :

Трюк с градиентной границей группового блока!

Gradient Box Shadow

Поскольку CSS не поддерживает градиентные тени, для включения этой функции обычно требуется сложный обходной путь.

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

Тень поля градиента

Поддержка градиентного текста в ядре WordPress

Я хотел бы, чтобы в ядро ​​WordPress была добавлена ​​поддержка текстовых градиентов, чтобы темам и плагинам не приходилось создавать и поддерживать свои собственные настройки. Я уверен, что это будет добавлено в ближайшее время, учитывая скорость улучшения редактора блоков. Он быстро становится мощным инструментом дизайна для разработчиков тем.