Css градиенты красивые: Красивые CSS и PNG градиенты для сайта, инстаграм и фотошопа — Gradients.app

Благодаря множественным цветовым переходам можно создавать красивые эффекты. Пример, показанный в самом начале, является “бледным” отражением того, на что способен CSS3. Другое дело, что на сегодняшний день браузеры поддерживают не все его возможности, но об этом немного ниже.

Итак, вернемся к градиентам на psd-макете. Мы разобрались, что из себя представляет такой цветовой переход. Осталось решить, как воплоить его в коде. Самый простой (надежный), удобный и быстрый способ — это воспользоваться замечательным online-инструментом “ColorZilla”.

Открываем его в браузере и видим изначально такую картину:

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

1

color stops

Само местоположение можно задать примерно, а можно и точно — в окошке “Location”, где устанавливаются проценты. В самом квадратике отображен цвет, установленный для перехода. При щелчке мыши на нем в окошке “Color” отображается цвет самого перехода. По умолчанию имеется два

1

color stops

Берем с помощью пипетки цвета градиентов с psd-макета:

и переносим их на online-генератор. Последовательно, слева направо. Для этого выбираем на панельке ColorZilla

1

stop colors

В окне “Preview” виден готовый результат, а в окне CSS — готовый CSS-код. Его можно скопировать и вставить в свой проект.

Аналогично online-генератору Colorzilla, можно воспользоваться еще одним, подобным — “CSSMatic”:

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

Есть такой замечательный сайт под названием “What can i use” (“Что я могу использовать”), на котором можно проверить, какой браузер и какой версии поддреживает то или иной CSS-свойство. Давайте откроем его и посмотрим, как обстоит дело с нашим градиентным переходом в браузерах:

Видим, что практически во всех он будет отображаться. Кроме одного — Internet Explorer v8 и Internet Explorer v9. Так что пользователи “ослика” не увидят всех красивостей.

На этом краткая статья по градиентам окончена.

Как создать красивый градиент с помощью CSS | by Mahesh

Давайте начнем этот блог с признания, я написал этот подробный тред для Твиттера, потом решил превратить его в блог и загрузить сюда.

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

Здесь я расскажу обо всех основах и наиболее важных концепциях градиента.

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

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

Градиент делает фон более привлекательным, чем сплошной цвет.

Все мы знаем об Instagram, но вы заметили, что логотип Instagram тоже градиентный?

Гениальность в простоте. ✨

В CSS есть три функции градиента.

— Линейный градиент
— Радиальный градиент
— Конический градиент

Поговорим о каждом типе подробнее.✨

Линейный градиент начинается в одной точке и изменяется по прямой до конечной точки.

Направление линейного градиента может быть вверх/вниз, влево/вправо или по диагонали.

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

Чтобы создать самый простой градиент, вам просто нужно указать два цвета. Минимум требуется два цвета, но вы можете иметь столько цветов, сколько захотите.

Без указания угла будет считаться сверху вниз.

Пример👇

Значения «вверх», «вниз», «влево» и «вправо» используются для изменения направления.

даже мы можем использовать как горизонтальную сторону (левую или правую), так и вертикальную сторону (верхнюю или нижнюю) после «to».

Пример 👇

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

Значения эквивалентны —

вверх — 0 град,
вниз — 180 град,
влево — 270 град,
вправо — 90 град.

Вы также можете использовать другие угловые единицы.

Одна вещь, о которой мы пока не говорили, это «остановка цвета». Остановки цвета — это цвета, между которыми вы хотите сделать плавные переходы.

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

Радиальный градиент начинается от центральной точки и расходится наружу к внешней конечной точке.

Прежде чем двигаться дальше, давайте обсудим некоторые ключевые термины —

— Размер
— Форма
— Положение
— color-stop (такой же, как линейный)

Давайте углубимся 👇

✔ Размер —

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

— ближайшая сторона
— ближайший угол
— самая дальняя сторона
— самый дальний угол (по умолчанию)

Подробное объяснение 👇

✔ Форма —

Определяет форму градиента, и поскольку мы говорим о радиальных градиентах,

они ограничены круговым характером. наши формы будут между эллипсом или кругом.

✔ Позиция —

Это работает так же, как и для background-position. Таким образом, здесь будут работать такие ключевые слова, как «сверху», «справа», «слева» и «по центру». Вы даже можете использовать такую ​​комбинацию, как «вверху по центру».

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

Чтобы создать самый простой градиент, вам просто нужно указать два цвета. Минимум требуется два цвета, но вы можете иметь столько цветов, сколько захотите.

Все остальные значения являются значениями по умолчанию, потому что мы просто указываем цвета.

мы уже обсуждали форму и у нас есть 2 значения эллипс или круг.

Давайте посмотрим на пример обоих 👇

мы уже обсуждали все значения размеров, давайте посмотрим одно или два значения в примере.

для лучшего понимания игры со всеми значениями.

пример 👇

Мы уже говорили о позиционировании градиента.

Радиальный градиент не обязательно должен начинаться в центре по умолчанию. Он может указать определенную точку.

пример 👇

Конический градиент имеет центральную точку в вашем прямоугольнике, начинается сверху и огибает круг на 360 градусов.

Функция conic-gradient принимает аргументы положения и угла. По умолчанию угол равен 0 градусов, который начинается сверху, в центре

Выше мы уже говорили о положении или угле, так что давайте рассмотрим несколько примеров.

👇👇

Как и в случае с линейным и радиальным градиентом, все, что нам нужно для создания конического градиента, — это два цвета.

⚡ https://gradientgenerator.com

⚡ https://cssgradient.io

⚡ https://colordesigner.io/gradient-generator

Это мой первый пост в блоге, и я хотел бы прочитать ваши отзывы а также критика.

Руководство по добавлению градиентов с помощью 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 для улучшения цифрового взаимодействия

Подробнее →

В этом примере мы хотим, чтобы поток шел слева направо, поэтому мы добавим класс bg-gradient-to-r :

 <дел>
 

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

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

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

 <дел>
 

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

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

Подсказка: если мы хотим создать эффект блеклого градиента, нам не нужно добавлять класс to-{color} . Нам нужно использовать только bg-gradient-to-{direction} и from-{color} для создания эффекта выцветшего градиента в Tailwind CSS.

Настройка CSS-градиентов Tailwind с более чем двумя точками цвета

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

До сих пор мы использовали только две точки цвета: from-{color} и to-{color} . Теперь, чтобы добавить третью точку цвета в наш градиент, мы будем использовать via-{color} вместе с классами from-{color} и to-{color} , чтобы добавить средний цвет.

Давайте сделаем это, используя наш предыдущий пример. Ваш код должен выглядеть так:

 <дел>
 

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

См. Градиент фона пера
: более двух цветовых остановок от Риши Пурвара (@rishi111)
на CodePen.

Добавление радиальных градиентов фона

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

Первое, что нам нужно сделать, это добавить поддержку радиального градиента. Мы делаем это, расширяя свойство темы, добавляя следующий код в наш файл tailwind.config.js :

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

Теперь мы готовы приступить к созданию нашего первого радиального фонового градиента!

Сначала скопируйте и вставьте окончательный код из последнего раздела:

 <дел>
 

Чтобы создать радиальный градиент фона, нам нужно заменить bg-gradient-to-r классом bg-gradient-radial , чтобы добавить радиальный градиент фона:

 <дел>
 

На изображении ниже вы можете увидеть радиальный градиент фона с тремя точками цвета:

Добавление текстовых градиентов

Текстовые градиенты — отличный способ добавить яркости вашему тексту. В этом разделе мы узнаем, как добавить текстовые градиенты в Tailwind CSS.

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

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

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

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

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

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

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

Чтобы получить желаемый эффект, нам нужно использовать CSS-класс bg-clip-text Tailwind, который позволяет нам обрезать фон элемента. В нашем случае мы хотим обрезать фон тега h2 , чтобы он соответствовал форме текста. Идем дальше и добавляем этот класс:

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

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

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

 <дел>
  Имя