Gradient css3 text: How to add a gradient overlay to text with CSS by Sarah L. Fossheim

Gradient — Chakra UI

Градиенты — это способ перехода между двумя или более цветами. Можете добавить поддержка градиента с использованием любого из следующих реквизитов стиля.

• bgGradient : сокращенная, удобная поддержка стиля для применения с учетом темы градиенты.
• bgClip : сокращение для атрибута background-clip CSS. Полезно, когда создание текстовых градиентов.
• backgroundClip : типичный background-clip Атрибут CSS. Полезно, когда создание текстовых градиентов.

Background Gradient API#

Чтобы добавить градиент к элементу, передайте свойство bgGradient и установите его значение следуя API:

• linear(<направление>, <от>, <до>)
• радиальный(<от>, <до>)

Вы также можете использовать другие типы градиентов CSS, такие как повторяющийся линейный ,

конический и т. д.

Для линейных градиентов <направление> может быть установлено как направление CSS по умолчанию. (например, от до ) или сокращенный эквивалент (например, от до ).

Вот список поддерживаемых сокращений направления и их соответствующие значения:

 
 { 
 
 "to-t": "наверх", 
 
 "to-tr": "наверх справа", 
 
 "to- r": "вправо", 
 
 "to-br": "вниз справа", 
 
 "to-b": "вниз", 
 
 "to-bl": "вниз слева", 
 
 "to-l": "влево", 
 
 "to-tl": "вверх слева" 
 
 } 
 

Usage#

Давайте создадим простой градиент от зеленого.200 до розового .500

Настройка цветов#

Можно использовать как маркеры цвета с учетом темы, так и необработанные значения цвета CSS.

Несколько точек остановки цвета#

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

 
  
 w='100%' 
 
 h='200px' 
 
 bgGradient='linear(to-r, серый.300, желтый.400, розовый.200)' 
 
 /> 
3 
3 
 Следуя спецификации градиента CSS, вы также можете определить распределение
цветовых остановок 
 
 
  
 w='100%' 
 
 h='200px' 
 
 bgGradient='linear(красный.100 0%, оранжевый.100 25%, желтый.100 50%)' 
 
 /> 
 
 Градиент текста API# 
 Чтобы добавить текстовый градиент, передайте  bgGradient  в соответствии с API и  bgClip .
проп к 
  текст  .
 
  
 bgGradient='linear(to-l, #7928CA, #FF0080)' 
 
 bgClip='text' 
 
 fontSize='6xl' 
 
 fontWeight='extrabold03'  
2 > 
 
 Добро пожаловать в Chakra UI 
 
  
 
 Отзывчивые градиенты# 
 Вы можете управлять откликом градиентов, указав градиенты в
различные точки останова.
 
  
 w='100%' 
 
 h='200px' 
 
 bgGradient={[ 
 
 'linear(to-tr,teal. 300, yellow.400)', 
 '9000 к-т, синий.200, бирюзовый.500)', 
 
 'линейный(к-б, оранжевый.100, фиолетовый.300)', 
 
 ]} 
 
 /> 
 
 Изменение градиента с помощью псевдопропса# 
 Вы можете изменить градиент элемента на основе общих псевдоатрибутов CSS
(наведение, фокус, активный и т. д.).
 Например, при наведении добавьте нужный градиент.
 
  
 as='button' 
 
 p={4} 
 
 color='white' 
 
 fontWeight='bold' 
 
  borderRadius='md' 
 
 bgG , бирюзовый.500, зеленый.500)' 
 
 _hover={{ 
 
 bgGradient: 'linear(to-r, red.500, yellow.500)', 
 
 }} 
 
 > 
 
 Щелкните здесь 
 
  
 
 CSS Пример градиента текста
 В этом разделе мы увидим, как использовать градиент текста в CSS попутного ветра. В этом уроке мы создадим градиент цвета текста попутного ветра. градиент текста с несколькими цветами. Градиент попутного ветра слева направо сверху вниз, пример пользовательского стиля цветового градиента текста попутного ветра с помощью Tailwind CSS.

 Пример 1 
 Попутный ветер CSS простой градиентный текст с цветом.
 

    Цвет градиента CSS Tailwind

 
 стиль текста градиента попутного ветра css
 Цвет градиента попутного ветра для класса .from-{color} для  начального цвета от класса .to-{color} до конечного цвета.
 
 

    Цвет градиента CSS Tailwind


    Цвет градиента CSS Tailwind


    Цвет градиента CSS Tailwind


    Цвет градиента CSS Tailwind

 
 Пример 2 
 Попутный ветер Класс CSS .bg-gradient-{direction} начинается с градиентного текста слева направо сверху, градиентного текста сверху вниз сверху вниз.
 

    Цвет градиента CSS Tailwind


    Цвет градиента CSS Tailwind


    Цвет градиента CSS Tailwind

 
 Направление текста градиента CSS попутного ветра
 Пример 3 
 Текст градиента попутного ветра с трехцветным классом . from-{color} для начального цвета .to-{color} до конечного цвета.
 <ч2
   >
    Цвет градиента текста Tailwind CSS 3

 
 Попутный ветер градиент три цвета ccolor style
  
 Пример 4 
 Попутный ветер Цвет текста пользовательского градиента CSS .from-[код цвета css], например .from-[#ffff00].
 

    <голова>
        <метакодировка="UTF-8" />
        
        
          
    <тело>
        

            Пользовательский градиент цвета текста Tailwind CSS
        
    

 
 Tailwind CSS Custom Градиент Цвет текста
 Читать также 
 Tailwind CSS 3 FAQ Accordion UI Пример
 Пример напользователя 3 9000 2
 9000 2
 9000 2
 9000 2 9000 2 9000 2
 9000 2 9000 2
 9000 2 9000 2
 
  9000 2 9000 2
.