Css gradient background: Using CSS gradients — CSS: Cascading Style Sheets

23.12.2020 Разное

Руководство по добавлению градиентов с помощью Tailwind CSS

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

Вам повезло! Недавно я экспериментировал с градиентами в Tailwind CSS и подумал, что было бы интересно написать руководство по их добавлению.

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

• Введение в CSS-градиенты Tailwind
• Как добавить линейные градиенты фона в Tailwind CSS
• Настройка CSS-градиентов Tailwind с более чем двумя точками цвета
• Добавление радиальных фоновых градиентов
• Добавление текстовых градиентов
• Как добавить градиенты границ в Tailwind CSS
  • Градиент границы кнопки
  • Градиент границы ввода
  • Градиент границы карты
• Добавление градиентного подчеркивания
• Как анимировать градиенты в Tailwind CSS
  • Кнопки градиентной фоновой анимации
  • Анимация градиента границы ввода
  • Градиент подчеркивания анимации

Введение в CSS-градиенты Tailwind

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

Перед тем, как углубиться в CSS-градиенты Tailwind и написать несколько интересных вещей, нам нужно понять основы CSS-градиентов Tailwind и то, как они работают.

Чтобы создать базовый градиент в Tailwind CSS, нам нужно использовать эти три класса Tailwind CSS:

1. bg-градиент-к-{направлению}
2. от-{цвет}
3. к-{цвет}

Давайте обсудим первый. bg-gradient-to-{direction} определяет направление градиента. направление может быть горизонтальным, вертикальным или диагональным.

Горизонтальный линейный градиент имеет два класса:

1. bg-gradient-to-r : определяет горизонтальный линейный градиент (HLG) слева направо
2. bg-gradient-to-l : определяет HLG справа налево

Вертикальный линейный градиент также имеет два класса:

1. bg-gradient-to-t : определяет вертикальный линейный градиент (VLG) снизу вверх
2. bg-gradient-to-b : определяет VLG сверху вниз

Наконец, диагональный градиент имеет четыре класса:

1. bg-gradient-to-tr : определяет диагональный линейный градиент (DLG) снизу слева вверх справа
2. bg-gradient-to-tl : определяет DLG снизу справа вверху слева
3. bg-gradient-to-br : определяет DLG сверху слева вниз справа
4. bg-gradient-to-bl : определяет DLG от верхнего правого до нижнего левого

Далее у нас есть from-{color} . Это определяет начальный цвет градиента. Мы можем использовать любой класс Tailwind CSS color в качестве начального цвета для градиента, например from-purple-500 .

Наконец, у нас есть to-{color} . Это определяет конечный цвет градиента. Мы можем использовать любой класс Tailwind CSS color в качестве конечного цвета для градиента, например to-purple-800 .

Как добавить линейные градиенты фона в Tailwind CSS

Мы узнали об основных классах CSS-градиента Tailwind. Теперь давайте воспользуемся этими знаниями для создания линейного фонового градиента.

Для начала нам понадобится контейнер div . Давайте сначала создадим его и зададим ему высоту:

 <дел>
 

Следующее, что нам нужно сделать, это добавить фоновый градиент. Давайте добавим простой линейный градиент, указав CSS-классы from-{color} и to-{color} Tailwind.

В этом примере мы создадим линейный градиент от от фиолетового-600 до до синего-600 . Давайте добавим эти классы:

 <дел>
 

Далее нам нужно указать направление с помощью класса bg-gradient-to-{direction} . Это сообщает Tailwind CSS, в каком направлении он должен течь.

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

В этом примере мы хотим, чтобы поток шел слева направо, поэтому мы добавим класс

 <дел>
 

В приведенной ниже демонстрации вы должны увидеть линейный градиент фона:

См. Фоновый градиент Pen
от Rishi Purwar (@rishi111)
на CodePen.

Попробуем изменить направление градиента слева направо сверху вниз. Чтобы изменить направление, нам нужно заменить bg-gradient-to-r на 9Класс 0053 с классом bg-gradient-to-b :

 <дел>
 

Вы можете видеть, что градиент теперь течет сверху вниз, а не слева направо:

См. Градиент фона пера
: сверху вниз от Риши Пурвара (@rishi111)


 <дел>
 

 модуль.экспорт = {
  содержимое: ["./src/**/*.{js,jsx}"],
  тема: {
    продлевать: {
      изображение на заднем плане: {
        'радиальный градиент': 'радиальный градиент (var (--tw-gradient-stops))',
      }
    }
  }
}
 

 <дел>
 

 <дел>
 

  
Руководство по добавлению градиентов с помощью Tailwind CSS
 
 

Следующее, что нам нужно сделать, это добавить фоновый градиент к нашему тексту. Давайте добавим простой линейный градиент, указав точки цвета. Мы будем использовать те же цвета, что и в предыдущем примере, 9.0052 от фиолетового-600 через розовый-600 до синего-600 .

Далее нам нужно указать направление градиента с помощью класса bg-gradient-to-r . Добавьте эти классы.

  
Руководство по добавлению градиентов с помощью Tailwind CSS
 
 

Вы должны увидеть что-то вроде этого:

Как мы видим, градиент фона применяется в качестве фона для нашего текста вместо градиента текста. Итак, как заставить его работать?

Чтобы получить желаемый эффект, нам нужно использовать класс CSS

  
Руководство по добавлению градиентов с помощью Tailwind CSS
 
 

Здесь мы обрезали фон элемента, но не видим градиент текста. Это потому, что черный цвет текста перекрывается с фоновым градиентом. Чтобы скрыть это, нам нужно использовать text-transparent класс, чтобы сделать цвет текста прозрачным. Идем дальше и добавляем этот класс:

  
Руководство по добавлению градиентов с помощью Tailwind CSS
 
 

Отлично! Вы можете увидеть текстовый градиент в действии в этой демонстрации:

См. Текстовый градиент CSS Pen
Tailwind от Rishi Purwar (@rishi111)
на CodePen.

Как добавить градиенты границ в Tailwind CSS

Градиент границы кнопки

Во-первых, давайте посмотрим, как мы можем добавить градиент границы к элементу кнопки. Давайте создадим кнопку с базовым стилем CSS Tailwind:

 <кнопка>
  Следуй за мной

 

Затем добавьте к кнопке градиентный фон, используя классы фонового градиента, которые мы видели в предыдущих разделах:

 <кнопка>
  Следуй за мной

 

Кнопка должна выглядеть так:

Теперь нам нужно добавить класс bg-white к тегу span, чтобы скрыть градиентный фон кнопки. Нам также нужно добавить отступ к элементу кнопки, чтобы создать границу вокруг тега span . Идем дальше и добавляем эти классы:

 <кнопка>
  Следуй за мной

 

В этой демонстрации вы можете увидеть кнопку с градиентной рамкой:

83203125″ data-default-tab=»result» data-slug-hash=»BarWaeW» data-user=»rishi111″> See the Pen
Кнопка Tailwind CSS с градиентом границы от Rishi Purwar (@rishi111)
на CodePen.

Градиент границы ввода

Далее мы рассмотрим, как добавить градиентную рамку вокруг входного тега . Это может быть немного сложно.

Во-первых, давайте создадим ввод с базовым стилем:

 <дел>
  Имя