Красивые css градиенты: CSS Gradient генератор — создать градиент для веб сайта

14.04.1973 Разное

Содержание

Линейные градиенты • Про CSS

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Угол или направление градиента

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

В градусах: от 0 до 360, например 270deg.

Ключевыми словами:

to top = 0deg;

to right = 90deg;

to bottom = 180deg — значение по умолчанию;

to left = 270deg.

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.

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

Вот код самого первого квадрата, для примера:

.top-left {
   background: linear-gradient(to top left, purple, crimson, orangered, gold);
}

Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При

to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.

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

При отсутствии ограничений код может быть гораздо короче:

.light {
  background: peachpuff linear-gradient(90deg,
    rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%
  ) center center / 2em;
}

.dark {
  background: steelblue linear-gradient(
    rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
  ) center center / 100% 1em;
}

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

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin. com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться

leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient(
  green, green .5em,
  transparent .5em, transparent 1em
);

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Создание красивых градиентов на CSS / Хабр

Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:

Заметили, что в центре он становится бледным и грязным?

Это явление Эрик Кеннеди назвал «мёртвой зоной серого».

Если вы тщательно не выбираете цвета для своих градиентов, то в ваших градиентах на CSS часто возникает такая обесцвеченная часть посередине.

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

Как вычисляются градиенты

Задавались ли вы когда-нибудь вопросом, как работает алгоритм

linear-gradient

в CSS? Как он вычисляет конкретное значение цвета для каждого пикселя вдоль спектра?

Он вычисляет его, беря математическое среднее для каждого из трёх цветовых каналов: Red, Green и Blue.

[Прим. пер.: в оригинале статьи все изображения интерактивны.]

В цветовом пространстве RGB мы создаём цвета смешением трёх каналов: красного, зелёного и синего. Каждый канал имеет диапазон значений от 0 до 255.

Если мы увеличим до максимума значения всех трёх каналов — 255 / 255 / 255, то получим чисто белый цвет. А если установим каждый канал на 0, то получим чёрный, отсутствие всех цветов.

На самом деле, если всем трём каналам присвоить одинаковое значение, то результат всегда будет цветом в оттенках серого:

В показанном выше виджете градиента мы начали с чисто жёлтого цвета (255/255/0). При перемещении по градиенту мы начинаем примешивать синий (0/0/255). К тому моменту, как мы достигнем самой середины, мы уберём половину жёлтого и добавим половину синего.

Иными словами, все три канала сходятся к их среднему значению, 127,5. И в результате получается серый цвет.

Мне кажется немного странным, что среднее между синим и жёлтым — это серый. Смешав два очень насыщенных цвета, мы получили совершенно блеклый. Вот если бы был какой-то способ смешения только

пигмента с постоянным сохранением насыщенности…

Альтернативные цветовые модели

Существует множество разных способов задания цвета. Пока мы использовали только модель R/G/B. И, честно говоря, эта цветовая модель довольно отстойная.

Давайте поговорим о другой цветовой модели: HSL.

HSL расшифровывается как Hue / Saturation / Lightness (тон, насыщенность и светлота). Если вы пользовались селектором цветов, то, вероятно работали с этой цветовой моделью.

Пример:

Вот что означает каждое значение:

Hue (тон) управляет тем, каким будет пигмент, где находится цвет на шкале цветов.
Saturation (насыщенность) управляет тем, насколько ярок будет цвет.
Lightness (светлость) управляет тем, насколько светлым или тёмным будет цвет.

Лично мне такой способ кажется

гораздо

более интуитивным способом восприятя цветов.

Но вот что по-настоящему волшебно: что если вместо усреднения значений RGB в наших градиентах мы будем усреднять значения HSL?

Мёртвой зоны серого больше нет, потому что теперь мы смешиваем не значения R/G/B, а значения H/S/L.

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

Вот ещё один пример, на этот раз смешение цветов с разной насыщенностью и светлостью. Ниже для сравнения показаны цвета со стандартным RGB-смешением:

Достаточно наглядная разница, правда?

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

Согласно цветовой модели HSL, оба этих цвета имеют одинаковую «светлость»:

Не все люди воспринимают цвета одинаково, но большинство сказало бы, что жёлтый ощущается гораздо более светлым, чем синий, несмотря на одинаковое значение «светлости». Однако модель HSL не волнует, как воспринимают цвета люди; она основана на чистой физике, энергии, длинах волн и тому подобном.

К счастью, существуют другие цветовые модели, учитывающие восприятие человека. Например, HCL, похожая на HSL, однако смоделированная с учётом зрения человека:

Какая цветовая модель лучше всего?

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

Используем знания на практике

У меня есть хорошие и плохие новости. Давайте начнём с плохих.

CSS не позволяет нам выбирать цветовую модель. используемую в вычислении градиентов. Мы не можем выбрать интерполяцию HSL для конкретного градиента, по крайней мере, пока. Насколько я знаю, CSS Images Level 4 даёт возможность указания «способа интерполирования цветов», но он поддерживается не всеми браузерами.

Однако есть и хорошие новости: исхитрившись, мы можем обойти эти ограничения.

Градиенты в CSS не привязаны только к двум крайним цветам. Можно передавать 3 цвета, или 10 цветов, или даже 100 цветов.

Сначала нам нужно вручную вычислить набор промежуточных цветов. Мы можем сделать это с помощью JavaScript, чтобы можно было использовать любую нужную цветовую модель (благодаря полезной библиотеке наподобие chroma.js):

Далее мы берём этот набор цветов и передаём каждое значение функции градиента CSS:

.box {
  background-image: linear-gradient(
    to right,
    #ffff00,
    #f8ea47,
    #f0d465,
    #f0d465,
    #e7bf7c,
    #ddaa8f,
    #d095a1,
    #c280b2,
    #b26cc2,
    #9d56d2,
    #8440e1,
    #6028f0,
    #0000ff
  )
}

(Здесь мы используем линейные градиенты, но тот же трюк работает с радиальными и коническими градиентами!)

Но постойте, разве движок CSS не использует RGB-интерполяцию для вычисления пространств между каждым из указанных цветов? Если мы не передаём сотни цветов, достаточные для каждого отдельного пикселя, то всё равно используем RGB-интерполяцию!

Да, это правда, но, к счастью, это не особо важно.

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

Например, вот градиент, в котором используются два очень схожих цвета:

Цвета настолько близки, что RGB-интерполяция никак не может их испортить.

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

Ну а теперь самое интересное. Давайте поговорим о том, как генерировать эти градиенты.

Знакомство с генератором градиентов

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

Я в восторге от этого инструмента. В нём используются все элементы, о котором говорилось в посте, а также другие трюки (типа применения кривой для управления

распределением

цветов).

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

Генератор находится здесь: https://www.joshwcomeau.com/gradient-generator/

Предыдущие работы

На создание собственного генератора меня вдохновили эти два чудесных генератора градиентов:

Модные градиенты в веб-дизайне

Мы собираемся проанализировать текущие тенденции диджитал-дизайна. В первую очередь — это градиенты, одна из наиболее обсуждаемых тем по результатам нашего исследования тенденций, проведенного благодаря сотрудничеству пользователей Awwwards и жюри. Ознакомьтесь с полным перечнем результатов опроса в нашей книге прямо СЕЙЧАС. Современный ландшафт для цифровых мыслителей.

Градиенты уже были когда-то в моде. Сейчас они опять вернулись в веб-дизайн, где их используют в фонах и изображениях. Spotify снова сделал их популярными, применив двухцветные градиенты к фотографиям в своих кампаниях и на микросайтах как характерный элемент бренда. Здесь вы можете ознакомиться с небольшим уроком о том, как создавать градиенты в Photoshop.

Spotify micro site 2015, двухтоновое изображение с градиентными картами.

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

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

Многоцветные градиенты на главном экране, iPhone X

Градиенты в 3D? Цвет вершин и стиль цветовой карты

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

3D Gradient Mapping

Типы градиентов

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

Полезные инструменты для CSS градиентов

Для воссоздания этих эффектов в CSS доступно множество инструментов, которые позволяют создавать их с помощью визуальных редакторов, просто копируя и вставляя код CSS: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

Скачайте исходный файл с градиентами!

Начните работать с градиентами, скачайте исходный файл бесплатно в векторном формате .ai или pdf, чтобы самостоятельно поэкспериментировать с градиентами.

Скачать тут!

Коллекция градиентов от Awwwards

Как всегда, мы создали подборку сайтов дня и номинантов, в которой вы можете увидеть все эти эффекты в использовании. Мы надеемся, что вы найдете вдохновение в коллекциях Awwwards или в нашей книге СЕЙЧАС. Современный пейзаж для цифровых мыслителей, в котором обсуждаются основные тенденции года в веб-дизайне.

Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.

Создание градиентных переходов на CSS – Zencoder

Столкнулся с градиентыми переходами на psd-макете. Сразу скажу, что данная статья не претендует на полный и глубокий обзор CSS-градиентов.

Это лишь маленький практический “кусочек”, посвященный тому, как решить поставленную задачу. И еще один момент — вопрос, освященный здесь, не является таким уж сложным. Но первоочередная цель моего скромного сайта — служить записной книжкой для своего владельца. Поэтому все записи здесь можно рассматривать как вехи (milestones) в долгом пути верстальщика.

Пример с градиентным переходом на реальном psd-макете показан ниже:

Видим, что имеется градиент, который “растянут” по горизонтали. Начинается он в левой крайней точке, затем имеется плавный переход цвета в центре, и в правой крайней точке снова возврат к прежнему цвету (как в левой крайней точке). Такие переходы оттенков называются цветовыми переходами .

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

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

Кстати, положение таких точек можно задавать не только с помощью процентов, но и “жестко”, фиксированными величинами, такими как пиксели .

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

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

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

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

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

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

и переносим их на online-генератор. Последовательно, слева направо. Для этого выбираем на панельке ColorZilla , одинарным щелчком мыши выбираем окошко Color и в диалоговом окне (кстати, очень похожем на такое же в Photoshop) вставляем цвет. В результате получаем необходимый цветовой переход:

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

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

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

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

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

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

cssgradientCSS
Коты
Switch Day and Night
Мяукающий котёнок
Котёнок раскачивается на верёвке
Всё остальное
Советы
Фон для сайта
scroll-margin-top: удобный переход по ссылке при статичном верхнем блоке
Анимация звёздочки и сердечка (Twitter-стиль)
Псевдоэлементы ::before и ::after
Градиенты
Подключаем шрифты
Селекторы
Блочные элементы
Стилизация списков
float
position. Примеры с позиционированием
keyframes
border
figure и figcaption
Hover — эффекты при наведении. Часть 1
Hover — Красивые эффекты для значков при наведении с помощью CSS3. Часть 2
Таблицы
Геометрические фигуры
Рисуем треугольники
transition
Стилизация placeholder
Создание кнопки при помощи CSS3
Несколько трюков с тегом textarea
Подготавливаем веб-страницу для печати средствами CSS
Свойства CSS: text-shadow
Создание красивых сообщений
Значки к ссылкам для разных документов
Рисуем британский флаг при помощи CSS
Смена оформления сайта при помощи CSS и Javascript
Медиатипы
Существует несколько предопределенных медиатипов: screen, print, all, braille, tv, aural.
Объявить можно так:
@media screen { /* правила для экранов */ }
}
Также можно задать внешние таблицы стилей, которые будут применяться к нужным медиатипам.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Также существуют CSS-запросы.
@media screen and (min-width: 480px) { /* CSS-rules */}
min — это префикс медиазапроса относительно минимальной ширины (также есть max). Мы спрашиваем — осуществляем ли рендеринг содержимого на экране и является ли ширина окна в текущий момент равно по крайней мере 480 пикселям?
Другой пример.
@media print, screen and (monochrome) {}
Запятая означает логическое ИЛИ (глупое правило). Рендеринг осуществляется с использованием принтера ИЛИ на монохромной (черно-белом) экране? Да? Использовать наши стили.
Еще примеры
@media all and (orientation: landscape) {} — применить стили для всех медиатипов при альбомной ориентации
@media screen and (color) — применить стили для цветных экранов.
Картинки без размеров
В некоторых случаях картинки без явного указания их размеров (атрибуты width, height тега img) могу поломать вёрстку. Нужно не забывать прописывать всем изображениям вышеперечисленные атрибуты. А если случайно забыли? Есть простой и эффективный способ решения проблемы. Достаточно вставить в файл стилей вот такой кусочек кода:

img:not([width]):not([height]) {
    border: 2px solid red !important;
}
После этого, все добавленные на сайт картинки с отсутствующими атрибутами width и height будут подсвечены красной рамкой.
Реклама
Поделиться 10 Красивые Кнопки CSS Исходный код
Перевод | Разработка веб-сайта
Английский Оригинал | https://1stwebdesigner.com/free-code-snippets-css-buttons/
Веб-дизайнеры не нужно полагаться на фотошоп, делая классные кнопки. Используя CSS3, вы можете реализовать градиент, тень и блеск / блестящий эффект.
1、Plastic Buttons
Адрес: https://codepen.io/ben_jammin/pen/syacq.
Этот набор кнопок чистые, и у них есть много разных цветов и размеров, вы можете легко переделать эти кнопки.
Существуют различные стили, которые могут быть выбраны, маленькие, средние или большие кнопки. Есть кнопка по умолчанию, отключить кнопки и дизайн в качестве переключателя или тега. Для чистых решений CSS это одна из самых чистых шаблонов кнопок в Интернете.
2、Cool Buttons
Адрес: http://codepen.io/felipemarcos/pen/tfheg.
Это набор классных кнопок, изготовленных из Felipe Marcos, немного отличающийся от пластиковых кнопок выше, но они также просты в использовании. Хотя нет блестящей пластиковой конструкции, он все равно будет чувствовать эффект «толчка» после нажатия.
Вы можете выбрать или настроить цвет, который вы хотите от шести предварительно разработанных цветов. CSS разделен на разные имена классов, поэтому вы можете установить стиль кнопки по умолчанию на класс и альтернативные цвета с другими классами.
Примечание переводчика: следующее является скриншотом некоторых типов кнопок
3、Google Buttons
Адрес: https://codepen. io/timwagner/pen/paecq.
Онлайн-инструменты Google, такие как блогер, облачные жесткие диски, Gmail и его функция поиска имеют разные шаблоны кнопок. Разработчик Тим Вагнер клонировал эти стили в этой ручке.
Они построены в CSS3, эти кнопки показывают много стиля Google, вы можете построить их отлично. Это аналогичный пример, который расширяется на этих кнопках и добавляет некоторые другие кнопки.
4、Bunch-o-Buttons
Адрес: https://codepen.io/alancollins/pen/ewdar.
Кроме того, этот набор глянцевой кнопки в стиле пластика можно найти в этой ручке, созданную Аланом Коллинзом. Он поддерживает несколько цветов и имеет разные стили для небольших, средних и больших кнопок.
Уникальный дизайн этого дизайна — это то, как переключать глянцевые стили и плоские места в категории. Большинство кнопок имеют «стиль», но вы можете использовать класс CSS для включения или отключения конструкции поверхности, который очень удобно.
5、Social Buttons
Адрес: http://codepen. io/stanssongs/pen/ggvbd.
Эта группа может быть коллекцией социальных кнопок с самыми уникальными цветовыми схемами и иконками бренда.
Разработчик Stan Williams выпустил этот параметр с обновленными цветами и кнопками обновления на GitHub. Однако эта демонстрация является четким показателем его качества, с более чем 50 различными кнопками. Все они имеют блестящий градиент в качестве фона, но степень и качество очень разные.
Если вам нужно поделиться социальным совместным использованием на вашем сайте, вы можете использовать этот набор интересных Pure CSS-пакетов кнопок CSS.
6、Jelly Animation
Адрес: http://codepen.io/ayamflow/pen/dufxr.
На первый взгляд это может выглядеть как обычная кнопка. Но после нажатия на кнопку вы найдете очень интересный анимационный эффект.
В дополнение к невероятной анимации я также впечатлил тень полуареальной кнопки на следующем. Он анимирует с помощью кнопки, чтобы сделать его идеальным вызовом для любого предпринимательского веб-сайта или социальной сети для улучшения желания клики.
7、Parallax Button
Адрес: https://codepen.io/electerious/pen/rroqdl.
Этот набор кнопок, разработчики Tobias Reich использует радиальные градиенты CSS3 и некоторые очень причудливые цвета создали эту кнопку.
Насколько он сам по себе, кнопка CSS3 впечатляет. Весь фон и прогнозы создаются только через CSS. Но по некоторым JavaScript Tobias может добавить искажение различий при парении и нажатиях.
Это одна из более продвинутых кнопок, которые я видел в течение определенного периода времени, что можно интегрировать на любую веб-страницу.
8、Hubspot Pills
Адрес: http://codepen.io/joehenriod/pen/qexjaq.
Эта группа кнопок является разработчик Джо Генриод создается в соответствии с дизайном HUBSPOT. Они похожи на традиционные HTML-кнопки, но они строятся с использованием классов CSS, которые могут быть применены к любому элементу.
Эта группа использует красные и синие буклюты со ссылкой на матрицу, но вы можете изменить цвет на любой цвет, который вам нравится. Hover + Click Status очень великолепен, вы можете привлечь внимание любых людей.
9、Sexy SCSS Buttons
Адрес: https://codepen.io/jgthms/pen/ejxbdr.
Большинство передних концов, как использовать Sass / SCSS, потому что он обеспечивает больше контроля и легче записано, чем традиционные CSS. Эти кнопки SCSS являются долговечными, внутренние и внешние теневые эффекты впечатляют.
Вы можете использовать один класс для изменения цвета, и вы даже можете добавить свой собственный цвет в смесь. Состояние Hover делает кнопку чувствовать 3D и активна при нажатии кнопки.
Эти кнопки должны быть легко реализованы на любом веб-сайте, вы можете преобразовать SCSS на CSS непосредственно из кодепена.
10、Mozilla-Style Buttons
Адрес: http://codepen.io/slimsmearlapp/pen/hjgfg.
Сайт Mozilla пережил решающий бренд и отказался от кнопки пластикового стиля. Когда мне нравится их предыдущий стиль дизайна, к счастью, этот эффект сделан Феликс Шварцером.
Синяя форма треугольника фактически создана с использованием чистых CSS и градиента фона и 3D наклонного эффекта. Эти кнопки являются сложными, отличными дизайном, легко привлекать внимание пользователя.
подводить итогиЭти 10 кнопок уникальны, легко настроить любую макет. Поскольку они являются чистыми CSS3 для дизайна, вы можете изменить свой размер, цвет и стиль в проекты, применимые к предприятиям, блогам, социальным сетям или магазинам электронной коммерции.
Но этот список всего лишь немаловая часть кодепена. Если вы ищете больше, вы можете просматривать CodePen, чтобы увидеть более чистую кнопку CSS.
CSS3 
CSS3 — это новая версия каскадных таблиц стилей. Я, надеюсь, не нужно объяснять, зачем нужен вообще CSS. Если нужно, то сначала обратите внимание на категорию по основам CSS, а уже потом можно будет изучать и новую версию.
В CSS3 появилась масса новых возможностей, которые в разы упрощают огромное количество задач. Помните, сколько Вам бед доставляло закругление обычного div? Сколько картинок приходилось вырезать, сколько блоков добавлять, сколько стилей прописывать? Теперь же ничего лишнего нет: 1 блок div и одно свойство border-radius, закругляющее рамку. Всё.
Появилась так же возможность добавлять градиенты, несколько фонов на один блок. Теперь можно делать лёгкую анимацию на CSS3, что само по себе уже чудо, поскольку раньше для подобных эффектов требовался JavaScript.
Такие вещи как тени, раньше отнимающие кучу нервов и времени, теперь реализуются так же всего одним свойством из CSS3.
В общем, расписывать все новые возможности надо достаточно долго. Одно могу сказать точно: если Вы изучите CSS3, что сделать совсем легко, если знаете предыдущую версию CSS, Ваша жизнь как верстальщика значительно упростится.
Прочитав 
статьи по CSS3, Вы узнаете: 
1) Как создавать тени для текста и блоков.
2) Новые способы задания цвета в CSS3.
3) Как закруглить углы на CSS3.
4) Как делать плавные переходы на CSS3.
5) Как трансформировать объекты на CSS3.
6) Как сделать анимацию на CSS3.
7) Как задать несколько фоновых изображений на CSS3.
8) Как разбить текст на несколько колонок с помощью CSS3.
9) Как верстать круглые кнопки на CSS3.
10) Примеры теней на CSS3.
11) Как задавать градиенты в CSS3.
12) Как сделать комментарии в виде пузырька на CSS3.
13) Новое свойство CSS3 — box-sizing.
14) Новый псевдокласс CSS3 — nth-child.
15) Новый псевдокласс CSS3 — not.
16) Новые псевдоклассы CSS3 — only-child и only-of-type.
17) Новые псевдоклассы CSS3 — valid и invalid.
18) Новые псевдоклассы CSS3 — read only и read write.
19) Новые псевдоклассы CSS3 — in-range, out-of-range и indeterminate.
20) Как сделать эффект серого оттенка на CSS.
21) Зачем нужен псевдокласс target в CSS3.
22) Как сделать аккордион на чистом CSS3.
23) Как сделать эффект вдавленного текста на CSS3.
24) Новые свойства CSS3 — box-ordinal-group и box-orient.
25) Новые свойства CSS3 — nav-left, nav-right и nav-up.
26) Как сделать навигационное меню на HTML5 и CSS3, используя псевдокласс target.
27) Как сделать красивые анимации на CSS3, используя библиотеку Animate.css.
28) Зачем нужна функция calc() в CSS3.
29) Как сделать анимацию загрузки на чистом CSS3.
30) Как сделать пролистывающийся текст на чистом CSS3.
31) Как добавить эффект перехода аккордеону на CSS3.
32) Как сделать блоки со слайдер эффектом на чистом CSS3.
33) Как сделать 3D менюшку на чистом CSS3.
34) Зачем нужно свойство flexbox в CSS3.
35) Как сделать прелоадер на чистом CSS3.
36) Как сделать слайдер на чистом CSS3 без использования JavaScript.
37) Как сделать выскальзывающее меню на CSS3.
38) Как сделать прогресс бар на чистом CSS3.
39) Как сделать изогнутую тень на чистом CSS3.
40) Как сделать многоуровневое меню-аккордион на CSS3.
41) Как установить иконки загрузки на чистом CSS3.
42) Как сделать индикатор прокрутки на CSS3.
43) Как сделать выпадающее меню на чистом CSS3.
44) Как применять свойство CSS background-image в веб-дизайне.
45) Как использовать свойство float в CSS.
46) О свойстве float на практике.
47) Основные типы CSS селекторов.
48) Что лучше Opacity или RGBA в CSS3.
49) Как сделать адаптивное меню на flexbox.
50) Как сделать изображения адаптивными в CSS3.
51) Как сделать адаптивную верстку на flex CSS. Часть 1.
52) Как анимировать элементы сайта. Часть 2.
53) Как просто разместить текст в колонки.
54) Как сделать плавный переход в CSS — transition.
55) О свойстве transform CSS на примерах.
56) Как применять filter grayscale на практике.
57) Как сделать красивый эффект при наведении.
58) Как сделать hover эффект для кнопки.
59) Как сделать всплывающие подсказки при наведении.
60) Как сделать полупрозрачный текст на фоне в CSS.
61) Как сделать плавное подчеркивание ссылки при наведении.
62) Как сделать анимированную кнопку обратного звонка.
63) Как использовать иконки Font Awesome на сайте.
64) Как сделать адаптивное меню для сайта. Часть 1.
65) Как сделать адаптивное меню для сайта. Часть 2.
66) Как сделать прелоадер на чистом CSS.
67) Как сделать иконки соц сетей на CSS.
68) Как сделать вертикальное меню на CSS.
69) Как сделать прозрачную панель навигации в CSS.
70) Как сделать выезжающее боковое меню. Часть 1.
71) Как сделать выезжающее боковое меню.Часть 2.
72) Как сделать поворот 3d картинки в CSS.
73) Как сделать CSS эффект при наведении на ссылку.
74) Как сделать  анимацию текста в CSS.
75) Как создать  градиент поверх фоновой картинки в CSS.
76) Как сделать  CSS анимацию при прокрутке страницы.
77) Как сделать  анимацию при скролле на WordPress.
78) Что такое  CSS позиционирование блоков.
79) Как сделать  адаптивную форму обратной связи.
80) Как сделать  адаптивное навигационное меню с иконками.
81) Как позиционировать  текст на картинке в CSS.
82) Как сделать  alert кнопку в CSS.
83) Как создать  адаптивную контактную форму.
84) Как сделать  таблицу адаптивной.
85) Как сделать  поиск по сайту на HTML.
86) Как сделать  чекбокс на HTML/CSS.
87) Как сделать  карточку товара на CSS.
88) Как изменить  маркер списка.
89) Как сделать  фиксированное меню.
90) Как сделать  адаптивную шапку сайта (float vs flex).
91) Как сделать  анимацию блока и картинки в CSS.
92) Как сделать  иконку гамбургер-меню на CSS+JS.
93) Как сделать  меню для мобильной версии сайта.
94) Как создать  иконки для меню сайдбара.
95) Как сделать  выравнивание по центру блока внутри блока.
96) Как сделать  блок с отзывами на HTML.
97) Как выделить  блок текста на CSS.
98) Как сделать  купон на CSS.
99) Про CSS эффекты  при наведении на картинку.
100) Как сделать  карточку блог поста на CSS.
101) Как изменить  шапку сайта (часть 1).
102) Как изменить  шапку сайта (часть 2).
103) Как изменить  шапку сайта (часть 3).
104) Как сделать  верстку портфолио на flexbox (часть 1).
105) Как сделать  верстку портфолио на flexbox (часть 2).
106) Как сделать  стилизацию select на CSS.
107) Как сделать  стилизацию radio на CSS.
108) Про верстку формы и скрипт выбора даты.
109) Единицы измерения em, rem, vh, vw, vmin, vmax.
110) SVG спрайты.
111) Верстка формы входа (часть 1).
112) Верстка формы входа (часть 2).
113) Верстка формы входа (часть 3).
114) Адаптивная таблица для мобильных устройств.
115) Установка тени для блока и текста в CSS.
116) Как использовать псевдо классы в CSS.
117) Эффект тени при наведении в CSS.
118) CSS свойство position: sticky.
119) Вертикальный аккордеон на чистом CSS.
120) Управление размерами flex-элементов.
121) Flex блоки на примере шапки.
122) Выравнивание элементов формы на flex.
123) CSS3 свойство box-sizing.
124) Градиент для текста на CSS.
125) Как изменить полосу прокрутки на CSS.
126) 5 способов горизонтального выравнивание блоков по центру.
127) Стилизация радиокнопок на CSS.
128) Рамки вокруг элементов в CSS3.
129) Анимация набора текста на CSS.
130) 3 основных способа верстки сайтов. Часть #1.
131) 3 основных способа верстки сайтов. Часть #2.
132) 3 способа вертикального выравнивание блока по центру.
Все материалы по CSS3
 36 красивых цветовых градиентов для вашего следующего дизайн-проекта 
 Ищете классные градиенты для вашего графического, веб-дизайна или пользовательского интерфейса? Дизайнер продукта и разработчик внешнего интерфейса Индрашиш Гош создал полезный онлайн-инструмент под названием uiGradients — бесплатную коллекцию из более чем 260 линейных градиентов, которые можно использовать для дизайна и кода. Вы можете просматривать градиенты по цвету, копировать их шестнадцатеричные коды или коды CSS и даже загружать версию каждого из них в формате .JPG. Вот некоторые из наших фаворитов из коллекции.
 1. Розанна 
 #ffafbd → #ffc3a0  
 2. Сексуальный синий 
 #2193b0 → #6dd5ed  
 3. Фиолетовая любовь 
 #cc2b5e → #753a88  
 4. Поросенок 
 #ee9ca7 → #ffdde1  
 5. Лиловый 
 #42275a → #734b6d  
 6. 50 оттенков серого 
 #bdc3c7 → #2c3e50  
 7. Потерянная память 
 #de6262 → #ffb88c  
 8. Социальный 
 #06beb6 → #48b1bf  
 9.Вишня 
 #eb3349 → #f45c43  
 10. Пинки 
 #dd5e89 → #f7bb97  
 11. Пышный 
 #56ab2f → #a8e063  
 12. Кашмир 
 #614385 → #516395  
 13. Спокойный 
 #eecda3 → #ef629f  
 14. Бледное дерево 
 #eacda3 → #d6ae7b  
 15. Зеленый пляж 
 #02aab0 → #00cdac  
 16.
 Ша Ла Ла #d66d75 → #e29587  
 17. Мороз 
 #000428 → #004e92  
 18.Почти 
 #ddd6f3 → #faaca8  
 19. Вирджин Америка 
 #7b4397 → #dc2430  
 20. Бесконечная река 
 #43cea2 → #185a9d  
 21. Пурпурно-белый 
 #ba5370 → #f4e2d8  
 22. Кровавая Мэри 
 #ff512f → #dd2476  
 23. Ты чувствуешь любовь сегодня вечером 
 #4568dc → #b06ab3  
 24. Бурбон 
 #ec6f66 → #f3a183  
 25. Сумерки 
 #ffd89b → #19547b  
 26.Реле 
 #3a1c71 → #d76d77 → #ffaf7b  
 27. Достойный 
 #4ca1af → #c4e0e5  
 28. Сладкое утро 
 #ff5f6d → #ffc371  
 29. Скутер 
 #36d1dc → #5b86e5  
 30. Небесный 
 #c33764 → #1d2671  
 31. Королевский 
 #141e30 → #243b55  
 32. Градиент заката Эда 
 #ff7e5f → #feb47b  
 33. Персик 
 #ed4264 → #ffedbc  
 34.
 Морской синий #2b5876 → #4e4376  
 35.Оранжевый коралл 
 #ff9966 → #ff5e62  
 36. Баклажаны 
 #aa076b → #61045f УЗНАТЬ БОЛЬШЕ …
 Поделитесь этим постом с другом-дизайнером и выскажите свое мнение в комментариях ниже.
 Лучшие генераторы градиентов CSS для дизайнеров 
 Мы рассмотрим десять лучших генераторов градиентов CSS, которые можно использовать для создания различных стилей градиента (и прямого вывода CSS!). Кодирование градиента вручную не доставляет удовольствия (особенно после того, как вы преодолеете простой двухцветный градиент), поэтому эти инструменты обязательно должны быть в вашей папке закладок.
 Одним из самых модных элементов веб-дизайна является использование градиентного фона или цветового наложения. Двухцветный линейный градиент — самая популярная вариация этого тренда. И хотя градиенты могут выглядеть  причудливыми и сложными, на самом деле их довольно легко создавать и развертывать… если вы используете правильный инструмент!
 CoolHue — впечатляющая коллекция готовых комбинаций градиентов. От розового и оранжевого до синего и зеленого, есть все: от градиентов с поразительным контрастом до мягких изменений.
 Хотя у вас нет большого контроля над настройкой параметров с помощью CoolHue, вы сразу узнаете, подходит ли вам одна из цветовых комбинаций, потому что все параметры прямо на экране.
 И одним щелчком мыши вы можете скопировать CSS. (Вот и все. Серьезно!) Если вы хотите скачать, каждый файл также доступен в формате PNG.
 CSS Gradient имеет множество переключателей и числовых параметров, так что вы можете выбрать до трех цветов и создать собственный градиент CSS.
 Переключатели просты в использовании, и даже человек с небольшим опытом работы с цветом может понять, как создать удобный градиент.Кроме того, есть несколько начальных градиентов в нескольких разных стилях для вдохновения.
 Одной из лучших особенностей этого инструмента может быть высокий уровень контроля над каждой деталью создаваемого вами градиента. Код генерируется ниже на экране, чтобы вы могли видеть все это во время работы.
 Для каждого градиента можно одним щелчком скопировать CSS или загружаемый файл jpg.
 UI Gradients — полноэкранный генератор градиентов. Преимущество просмотра цветовых вариаций в полном размере заключается в том, что вы действительно можете визуализировать, как они будут выглядеть в реальных дизайнерских проектах.
 UI Gradients включает в себя множество готовых вариантов градиента. Просмотрите коллекцию или выполните поиск по цвету. Диапазон выбора от двух до трех цветов с линейными узорами.
 Не нравится то, что ты видишь? Пользователи также могут добавить сведения о градиенте в файл градиентов.json в репозитории проекта и отправить запрос на включение.
 CSSmatic — это простой генератор градиентов с удобными кнопками, которые помогут вам настроить выбор цвета, остановки и поворот. Пользователи могут создавать линейные или радиальные градиенты.
 Начните с одного из простых пресетов — здесь есть несколько хороших монохромных вариантов — и настраивайте, пока не получите нужный градиент. Затем скопируйте код, и вы готовы к работе.
 Ultimate CSS Gradient Generator очень похож на CSSmatic, и экранные функции аналогичны, но он также имеет некоторые другие функции.
 Инструмент включает в себя таблицу совместимости браузера, несколько цветовых форматов, возможность импорта градиентного изображения и более 135 пользовательских пресетов.Пользователи также могут импортировать градиенты из существующего CSS и вносить коррективы. (Это может быть отличным вариантом для настройки градиента на вашем сайте, который выглядит не совсем так, как вы хотите.)
 Каждый градиент CSS поставляется с уникальным URL-адресом, которым вы можете поделиться с членами команды, когда работаете с вариантами цвета.
 ColorSpace — еще один инструмент полноэкранного градиента с визуальным веб-сайтом.
 Он прост в использовании. Выберите ориентацию (линейную или радиальную) для вашего градиента, добавьте два цвета с помощью кнопок и палитры цветов, затем нажмите «Создать».
 Хотя этот инструмент все еще находится в стадии бета-тестирования, он работает хорошо. И код находится прямо на экране, чтобы вы могли копировать его в проекты. Все, что вам нужно, от изображения градиента до CSS, находится прямо на экране. И если вам не нравится выбранный вами цвет, его легко изменить и снова нажать «Создать».
 Генератор градиентов CSS создает код, используя простой графический интерфейс пользователя. CSS будет работать во всех браузерах, поддерживающих CSS3.
 Генератор позволяет создавать линейные и радиальные градиенты, а также имеет возможность импортировать существующий код градиента CSS для редактирования.Он также поставляется с несколькими предустановками, чтобы ускорить визуализацию градиента.
 CSS3 Factory — это простой инструмент, который работает лучше всего, если вы знаете, какие цвета вы хотите использовать для градиента CSS.
 Эта опция без наворотов позволяет вам вводить варианты цветов, задавать направление для цветов и копировать код. Есть небольшое окно предварительного просмотра, чтобы увидеть, как будут выглядеть градиенты, но этот инструмент не содержит предустановок.
 CSS-Gradient — это генератор плюс учебник по градиенту «все в одном».
 Инструмент включает в себя поля для выбора двух вариантов цвета в шестнадцатеричном формате или RGB, направленного и линейного или радиального вариантов. (Поэтому этот инструмент, вероятно, лучше всего подходит, если у вас есть представление о том, какие цвета вы хотите использовать.)
 Скопируйте код и примените его к своему дизайну.
 Но что замечательно в этом инструменте, так это то, что под прокруткой есть масса полезной информации для пользователей о градиентах, о том, как работают градиенты CSS, и о различиях между линейными и радиальными параметрами. Все эти ресурсы особенно хороши для начинающих.
 GradientGenerator — отличный инструмент для вдохновения в создании градиентов. Начните с одного из предустановленных — существует множество различных вариантов на выбор — а затем добавьте свои собственные настройки для уникального градиента.
 Этот инструмент содержит множество настроек и даже включает простые, расширенные и экспертные настройки, которые можно выбрать в зависимости от вашего уровня навыков и способности сочетать цвета.
 Вы можете нажать, чтобы скопировать CSS, загрузить PNG, получить QR-код для тестирования на мобильном устройстве или создать ссылку для общего доступа.Этот инструмент также имеет другие довольно продвинутые параметры конфигурации, с которыми вы можете поиграть, включая тип сгенерированного кода.
 Заключение 
 Одним из самых больших преимуществ использования генератора градиентов CSS является то, что большинство этих инструментов показывают, как градиент будет выглядеть на экране, при создании соответствующего кода. Вы можете визуально настроить цвета, перекрытия, направление, непрозрачность и многое другое прямо на экране.
 Тогда все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать.Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится и которым легко пользоваться. Мы надеемся, что один из вариантов в этом списке отлично подойдет вам.
 20+ полезных инструментов для создания CSS-градиентов — Bashooka 
 Вот 20 полезных инструментов, которые генерируют градиенты CSS и экономят вам много времени, которое вы обычно тратите на написание CSS вручную.
 Раскройте всю мощь рекламы WordPress 
 Потрясающая коллекция из более чем 11 000 тем WordPress, включая шаблоны Bootstrap и ресурсы дизайна 
 Скачать сейчас Тщательно подобранная коллекция красивых готовых градиентов с использованием цветов по умолчанию из цветовой палитры Tailwind CSS.Просто скопируйте фрагменты кода и используйте их в своих приложениях.
 Mesh — это простой способ создания красивых градиентов в браузере с помощью шейдеров WebGL.
 Позволяет создавать градиенты CSS3 на лету с помощью визуальных редакторов в браузере. Вы можете выбирать между линейным и радиальным градиентом, смешивая цвета.
 Этот инструмент создает фильтр карты градиента SVG из заданных цветов. Вы можете использовать готовые палитры или отредактировать их и получить свою.Перед добавлением в проект протестируйте фильтр на своих изображениях, результат может отличаться для разных изображений.
 Фантастический инструмент для создания более эстетичных градиентов CSS, особенно при смешивании дополнительных цветов.
 Создавайте улучшенные градиенты CSS, используя альтернативные цветовые пространства и интерполяцию Безье.
 Получите градиент для своего CSS.
 Галерея фантастических и уникальных градиентов CSS.
 GradPad разработан, чтобы помочь дизайнерам и разработчикам быстро и интуитивно создавать красивые градиенты для своих дизайнерских проектов, которые они могут экспортировать в виде CSS. GradPad дает вам полный контроль над несколькими точками цвета и непрозрачности, а также галерею вдохновения, чтобы вы могли начать.
 ColorSpark был создан, чтобы помочь дизайнерам найти уникальные цвета и яркие сочетания градиентов. Создавая инструмент, который генерирует исключительно случайные цвета и градиенты, можно найти цвета, о которых иначе и не подумали бы.Цель ColorSpark — помочь дизайнерам избавиться от привычки использовать одну и ту же, ограничивающую цветовую палитру почти в каждом проекте. ColorSpark работает так же просто, как кажется. Каждый раз, когда нажимается кнопка «Создать», случайная строка из 6 символов объединяется в шестнадцатеричный код цвета. Для градиентов процесс повторяется для создания второго цвета и угла между -180° и 180°. Каждый цвет генерируется совершенно случайно и независимо.
 Фантастический редактор градиентов, созданный Дэвидом Аэрном.
 Простой и красивый список редактируемых градиентов.
 Cool Backgrounds — это набор инструментов для создания привлекательных красочных изображений для блогов, социальных сетей и веб-сайтов. Помимо фона, сгенерированные изображения можно использовать в качестве обоев для рабочего стола или обрезать для мобильных обоев.
 CoolHue 2.0 — это тщательно отобранная коллекция из 60 градиентов для вашего следующего проекта, которые можно копировать в виде кодов CSS или экспортировать в виде изображений.
 Коллекция красивых цветовых градиентов для дизайна и кода.
 Генератор CSS для создания красивых анимированных градиентов для использования на вашем веб-сайте.
 draGGradients — это простой инструмент для создания и настройки нескольких радиальных градиентов css3.
 Идея состоит в том, чтобы иметь несколько слоев линейных градиентов CSS под разными углами. Градиенты переходят от цвета к прозрачному, чтобы нижние слои просвечивали и создавали желаемый эффект.Количество слоев не ограничено.
 Генератор градиентов CSS с лучшей поддержкой браузера. Три разных макета для удовлетворения ваших требований (от простых линейных до сложных радиальных градиентов).
 Его удобный и простой в использовании пользовательский интерфейс позволяет быстро и без кодирования настраивать богатые графические стили.
 Генератор градиента CSSmatic позволяет использовать несколько цветов и остановок непрозрачности для создания потрясающих эффектов градиента с плавным изменением цвета или тонкой прозрачностью.Инструмент «Радиус границы» экономит время и позволяет создавать CSS для добавления закругленных углов к вашему блоку или изображениям.
 34 кнопки градиента CSS, которые могут придать глубину вашему дизайну 
  Коллекция лучших концепций кнопок градиента CSS, которые вы можете использовать в 2021 году.  
 Градиентные цветовые схемы почти мертвы в эпоху плоского веб-дизайна. Но теперь градиентные цвета постепенно возвращаются в веб-дизайн, а также в дизайн мобильных приложений.В недавнем обновлении Adobe XD предоставил нам возможность легко добавлять градиентные цвета; это показывает, как быстро тренд градиентного цвета распространяется среди дизайнеров. Причина, по которой дизайнеры любят градиент, заключается в том, что он добавляет глубины и жизни дизайну. Вы можете легко выделить веб-элемент или элемент приложения среди остальных, используя цветовую схему градиента. В этом списке мы собрали кнопки градиента CSS, которые помогут вам выразить ощущение и глубину функции кнопки.
 Простые в использовании дизайны CSS-кнопок с градиентом 
 Все примеры кнопок градиента CSS в этом списке имеют профессиональную структуру кода, поэтому вы можете легко использовать код в своих проектах.Чтобы сделать работу еще проще для вас, также включены фрагменты кода проектов.
 Вот лучшие кнопки градиента CSS.
 Текст кнопки градиента CSS 
 В этом примере вы получаете чистый и красивый текст кнопки с градиентом CSS. Создатель элегантно использовал градиенты как в текстах кнопок, так и в границах кнопок. К этой кнопке также добавлена тонкая анимация при наведении, чтобы сделать ее еще более привлекательной. Поскольку вся концепция градиентной кнопки и текста создана с использованием последнего скрипта CSS3, вы можете попробовать любую современную анимацию и дизайн этой кнопки, чтобы придать ей индивидуальность.
 Информация / Загрузить демоверсию
 Кнопки с анимированным градиентом 
 В этом пакете представлены два типа кнопок градиента CSS. Один из них представляет собой обычную кнопку с двойным цветовым градиентом, а другой — кнопку с многоцветным градиентом. В этом пакете анимация при наведении со сменой цвета обрабатывается так, чтобы она выглядела более яркой и привлекательной. Синхронизация анимации и естественные цвета придают дизайну аутентичный вид благодаря новейшему сценарию CSS3. Весь сценарий кода доступен вам в редакторе CodePen, чтобы вы могли легко использовать код в своем проекте.
 Информация / Загрузить демоверсию
 Кнопка линейного градиента 
 В этом наборе дизайна кнопки с градиентом вы получаете две кнопки с линейным градиентом CSS и две одноцветные кнопки. В этом пакете используются две разные градиентные анимации; каждый из них выглядит красиво. Кроме того, яркая градиентная кнопка легко привлечет внимание пользователя. В дизайне по умолчанию используется сине-фиолетовая цветовая схема градиента. Вы можете попробовать свои собственные цвета, чтобы кнопка градиента соответствовала вашему веб-сайту или приложению.Кнопка-призрак также дается вместе с кнопками градиента, которые также могут вам пригодиться.
 Информация / Загрузить демоверсию
 Персиковая пляжная пуговица 
 The Peach Beach Button — прекрасный пример грамотного использования контрастных градиентных цветов. Эта кнопка использует простой зеленый и желтый цвет градиента в обычном состоянии и превращается в кнопку градиента оранжевого и красного оттенка, когда вы наводите на нее курсор. Создатель умело обработал эффекты изменения цвета в этом примере, что делает его особенным.Поскольку весь дизайн использует последний скрипт CSS, вы можете попробовать новые цвета градиента, а также попробовать новые эффекты, чтобы оживить дизайн.
 Информация / Загрузить демоверсию
 Карта простого входа 
 Как следует из названия, это пример карты входа, в которой используется кнопка с градиентом. Вместо того, чтобы использовать эффекты изменения цвета, создатель использовал эффект свечения, что делает этот дизайн привлекательным. Если вы разрабатываете любую современную страницу входа в систему с яркими цветами, такие градиентные кнопки вам пригодятся.Говоря о карточках, взгляните на наши примеры загрузочных карточек для более интерактивных дизайнов, которые помогут вам представить контент в интерактивном формате размером с укус.
 Информация / Загрузить демоверсию
 Сексуальная кнопка градиента 
 Sexy Gradient Button — это смелый и привлекающий внимание градиентный дизайн кнопок. Использование современного полужирного шрифта и высококонтрастных градиентных цветов делает эту кнопку с градиентом CSS уникальной. Чтобы сделать эффект еще более очевидным, создатель добавил к кнопке эффект глубины. Все эффекты в этом дизайне сделаны с использованием скриптов HTML5 и CSS. Следовательно, вы можете легко обрабатывать код и использовать его даже на существующем веб-сайте. Время и поток анимации плавные в самом дизайне по умолчанию, поэтому не может быть никаких проблем, если вы используете этот код как таковой.
 Информация / Загрузить демоверсию
 Кнопка градиента CSS от Will 
 Это простая кнопка с градиентом синего и зеленого цветов. Разработчик дал вам очень простую кнопку призыва к действию.На этой кнопке градиента нет эффектов наведения или эффектов анимации. Но не волнуйтесь, мы обеспечим вас эффектами наведения. Взгляните на нашу коллекцию CSS-эффектов наведения, которые можно использовать в своем дизайне. Поскольку эта кнопка с градиентом создана с использованием скриптов CSS3 и HTML5, добавление модных анимационных эффектов на эту кнопку будет легкой задачей. Информация / Загрузить демоверсию
 Анимированная кнопка-призрак с градиентом CSS 
 Как следует из названия, создатель применил эффект градиентного цвета на кнопке-призраке. Дизайнеры предпочитают кнопки-призраки, когда они не хотят, чтобы фоновое содержимое было скрыто, и чтобы добавить визуальной эстетики дизайну. Если вы хотите сделать свою кнопку-призрак немного привлекательной, вы можете использовать градиентную анимацию со сменой цвета. В дизайне по умолчанию создатель сохранил анимацию градиента как автоматическую. Но вы можете отредактировать код и запустить анимацию при определенном действии, например при наведении курсора на кнопку. Вся анимация кнопки сделана исключительно с использованием сценария CSS3, поэтому разработчик может легко использовать код в своем проекте.
 Информация / Загрузить демоверсию
 Кнопка с градиентной тенью 
 Использование теней и освещения в дизайне придает дизайну глубину и размерность. С помощью современных фреймворков веб-разработки мы можем создавать реалистичные элементы. В этом примере создатель использовал эффект градиентной тени, чтобы придать кнопке градиента естественный вид. Эффекты наведения эффективно используются для выделения и отображения кнопки на фоне. В этом примере приведены два типа анимации наведения, увеличение и уменьшение масштаба.Вы можете взять концепцию дизайна и использовать свой собственный эффект наведения. Для большего вдохновения взгляните на нашу коллекцию примеров эффекта наведения CSS.
 Информация / Загрузить демоверсию
 Кнопка градиента CSS с плавным наведением 
 Этот разработчик добавил функцию, которую мы упустили в предыдущем примере с кнопкой градиента CSS. В этом дизайне используется живой эффект смены цвета при наведении. Самое приятное то, что анимация появляется и на границе кнопки. Полая кнопка с градиентным цветом придает кнопке стеклянную отделку.Чтобы элегантно представить дизайн аудитории, разработчик использовал узор в качестве фона. Если вы ищете модный фоновый узор, чтобы выделить важный раздел на веб-странице, взгляните на нашу коллекцию фоновых узоров CSS.
 Информация / Загрузить демоверсию
 Кнопка градиента CSS 
 В этом дизайне разработчик использовал градиентный цвет на границе кнопки. Кнопка постоянно светится, чтобы привлечь внимание пользователя к специальному элементу.Вы можете использовать привлекающие внимание элементы, подобные этому, в дизайне вашей целевой страницы, чтобы направлять пользователя на нужные веб-страницы. Как мы уже упоминали в стиле ссылок CSS, одним из наиболее часто используемых методов выделения важных ссылок являются кнопки призыва к действию. Поскольку разработчик напрямую поделился структурой кода, вы можете либо сохранить анимацию как таковую, либо сделать ее эффектом наведения.
 Информация / Загрузить демоверсию
 Анимированная кнопка градиента 
 В этом примере создатель добавил к элементу карточки аккуратную анимированную кнопку с градиентом.Карточки — один из универсальных элементов адаптивного дизайна, поэтому в настоящее время вы можете увидеть множество карточных элементов в мобильных приложениях и веб-дизайне. Что касается этого дизайна, эффект изменения цвета выглядит привлекательно на кнопке градиента. Поскольку весь дизайн использует последний скрипт CSS, вы можете без проблем использовать любые современные цвета градиента.
 Информация / Загрузить демоверсию
 Светящаяся кнопка градиента 
 Светящиеся эффекты всегда добавляют глубины дизайну. Когда вы комбинируете правильный цвет градиента и правильный эффект свечения, это должно быть сочетание, сделанное на небесах; Пользователям понравится использовать ваш сайт/приложение.Кроме того, вы также можете аккуратно выделить важную кнопку среди других. Код максимально прост, чтобы вы могли легко добавлять нужные пользовательские функции. Чтобы узнать больше о подобных светящихся эффектах, взгляните на нашу коллекцию CSS-эффектов свечения.
 Информация / Загрузить демоверсию
 Кнопка градиента с тонкой анимацией 
 Это еще одна анимированная кнопка с градиентом CSS, активируемая наведением. Цвета градиента плавно меняются при наведении на него курсора.Как и дизайн, код также прост и опрятен. Еще одним преимуществом использования облегченного кода является то, что он загружается быстрее, и у вас есть достаточно места для добавления собственных пользовательских функций. Внеся несколько изменений в код, вы сможете использовать этот код на своем веб-сайте или в форме.
 Информация / Загрузить демоверсию
 Кнопки градиента CSS 
 Кнопки градиента CSS дают вам набор различных кнопок призыва к действию. Все кнопки имеют одинаковый дизайн, но имеют разную цветовую схему градиента и значки.Наряду с кнопками градиента в этом дизайне вы также получаете эффекты наведения. Анимация наведения по умолчанию очень нежная и медленная, но вы можете масштабировать скорость анимации в соответствии с вашими требованиями. Поскольку этот дизайн создан исключительно с использованием сценариев HTML5 и CSS3, настройка кнопок будет легкой задачей. В основном в этих кнопках призыва к действию используются шрифтовые значки. Следовательно, у вас есть множество оптимизированных значков на выбор.
 Информация / Загрузить демоверсию
 Кнопка градиента от Эрика Груца 
 Это еще одна кнопка с градиентом в плоском стиле.В этом дизайне разработчик предоставил вам как градиентный дизайн кнопки, так и эффект градиентного изменения цвета при наведении курсора. Не только дизайн, но и структура кода упрощены для быстрой и легкой настройки. Поскольку это дизайн на основе CSS3, вы можете добавить в него любые модные цвета. Если вас не устраивает эффект анимации по умолчанию, вы также можете поиграть с эффектом анимации. Простой плоский дизайн кнопки делает ее идеальной для любых шаблонов веб-дизайна и мобильных приложений.Вы можете сразу же использовать этот код на своем существующем веб-сайте, внеся в него несколько изменений.
 Информация / Загрузить демоверсию
 Кнопки градиента изменения цвета фона 
 Как следует из названия, это кнопка с анимированным градиентом. Разработчик дал вам пять кнопок цвета градиента, и все они имеют одинаковый эффект изменения цвета градиента. Но, если вам нужно, вы можете изменить направление анимации изменения цвета. В самом скрипте кода разработчик четко упомянул, как изменить направление анимации.Все пять градиентных цветов, использованных в демонстрации, представляют собой холодную и светлую цветовую комбинацию. Поскольку это дизайн на основе CSS3, он поддерживает все современные цвета и эффекты анимации. Просто выберите понравившуюся кнопку градиента и начните работать над ней, чтобы она идеально подходила для вашего дизайна.
 Информация / Загрузить демоверсию
 Кнопки-призраки с градиентом 
 Это еще один пример кнопок-призраков. В этом примере кнопки с градиентом создатель предоставил три типа дизайна кнопки; Градиент тени блока, градиент границы и дизайн без радиуса границы.Поскольку это концептуальная модель, создатель не использовал анимацию при наведении на эту кнопку с градиентом CSS. Но вы можете добавить к этим кнопкам свои собственные анимации, чтобы сделать их более живыми. Создатель использовал сценарий CSS3 для создания этого дизайна, поэтому он может обрабатывать любые современные анимационные эффекты. Если вам нравится использовать анимационные эффекты для ваших элементов, взгляните на нашу коллекцию примеров анимации Bootstrap.
 Информация / Загрузить демоверсию
 Тени для кнопок с градиентом 
 Концептуально этот дизайн почти аналогичен приведенному выше примеру кнопки с градиентной тенью.Но в этом примере создатель использовал другой подход к дизайну. Хотя кнопка градиента CSS в этом примере не анимирована, она выглядит привлекательно. Редактируя код, вы можете добавить желаемый тип эффекта анимации. Как и большинство других примеров кнопок с градиентом CSS в этом списке, этот также сделан в основном с использованием скрипта CSS3. Следовательно, вы можете легко использовать код даже на своем существующем веб-сайте или в приложении.
 Информация / Загрузить демоверсию
 Кнопка переключения градиента 
 В этом примере вместо обычной кнопки призыва к действию автор использовал кнопку-переключатель. Переключатели широко используются в другой части дизайна, потому что пользователь может более естественно взаимодействовать с ними на сенсорных устройствах. Для кнопок-переключателей используются различные типы анимационных эффектов и эффектов перехода. В этом примере создатель использовал градиентные цвета. Не только линия ползунка, но и круг ползунка также плавно меняет цвет, когда вы перемещаете кнопку от одного к другому.
 Информация / Загрузить демоверсию
 Кнопка градиента при наведении курсора 
 Gradient Button Hover почти аналогичен кнопкам градиента изменения цвета фона, упомянутым выше.Единственная разница в том, что он имеет другую цветовую схему и более округлые кнопки. С точки зрения сценария существует большая разница в дизайне кнопки градиента. Каждый разработчик использовал различную структуру кода. Но обе структуры кода просты в обращении, поэтому другим разработчикам не составит труда использовать эти кнопки. В этом дизайне вы получаете более яркие цвета, и они выглядят привлекательно, когда они анимированы. Эффекты тени используются с умом, чтобы выделить кнопки на фоне. В целом, это чистая привлекательная коллекция кнопок с градиентом.Все, что вам нужно сделать, это выбрать понравившийся дизайн и использовать его в своем дизайне.
 Информация / Загрузить демоверсию
 Кнопка с градиентом Cat Disco 
 Все предыдущие анимированные кнопки градиента анимируются, когда пользователь наводит на кнопку курсор. Но эта кнопка постоянно меняет цвет. Вы можете использовать этот эффект не только для кнопок, но и для элементов, которые хотите выделить. Еще одна интересная особенность этой кнопки градиента заключается в том, что она разработана исключительно с использованием скрипта CSS3.Следовательно, обработка кода и его настройка значительно упростят работу. Если вы действительно хотите сделать кнопку привлекательной, этот дизайн может вам очень помочь. Поскольку целевые страницы должны сделать многое за короткий промежуток времени, такие элементы помогут вам повысить уровень взаимодействия.
 Информация / Загрузить демоверсию
 Кнопки с анимированным градиентом 
 Кнопки с анимированным градиентом вы получаете три типа кнопок и три типа анимации кнопок. Все три анимации основаны на цветовой схеме градиента, поэтому с помощью этого кода вы получите привлекательную кнопку.Чтобы создать эффект плавной анимации, разработчик использовал в этом дизайне CSS3 и Javascript; Поскольку оба сценария кода являются последними фреймворками, вы также можете использовать другие эффекты анимации. Эффекты анимации вращения и подъема очень профессиональные, поэтому вы можете использовать их на любом современном бизнес-сайте. Анимация Sweep немного интенсивна, поэтому вы должны убедиться, где вы собираетесь использовать эту кнопку.
 Информация / Загрузить демоверсию
 Анимация кнопок с градиентом 
 В этом примере с анимированной кнопкой градиента вы получаете два типа эффектов анимации.Один из них представляет собой обычный эффект изменения цвета при наведении, а другой — эффект бесконечного изменения цвета. Эффект бесконечного изменения цвета — это круто выглядящий эффект, который сейчас становится тенденцией. Еще одним преимуществом этого дизайна кнопки с градиентом является то, что он полностью разработан с использованием скриптов CSS3 и HTML5. Следовательно, вы можете легко включить этот дизайн даже в свой существующий веб-сайт или дизайн. Из-за этой простой структуры кода редактирование и добавление дополнительных функций к кнопке градиента будет легкой задачей для разработчиков.
 Информация / Загрузить демоверсию
 Кнопки экзистенциального градиента 
 Разработчик этой кнопки с градиентом предоставил вам как кнопки с полным градиентом, так и полые кнопки с градиентом границы. Помимо эффекта анимации смены цвета, вы также получаете эффект расширения при наведении курсора на кнопку призыва к действию. В демоверсии вы получаете три типа цветовых градиентов, но дизайн кнопки остается прежним. Благодаря сценарию CSS3 вы получаете естественные цвета и плавные анимационные эффекты. Сделав несколько настроек, вы можете легко использовать этот код в своем проекте или приложении. Правильно структурированный код скрипта поможет разработчикам легко найти и отредактировать нужную функцию.
 Информация / Загрузить демоверсию
 Кнопки 3D-градиента 
 Как следует из названия, этот разработчик предоставил нам 3D-кнопку. Наряду с выступающим анимационным эффектом кнопка 3D выглядит сюрреалистично. Пользователи действительно могут почувствовать, как кнопки выскакивают из экрана. Градиентные цвета используются с умом на всех сторонах 3D-элемента, так что вы получаете хорошо сбалансированную кнопку.Разработчик дал нам как полноцветную кнопку, так и полую кнопку с рамкой. Эффекты теней также используются для обозначения кнопок, выступающих из чистого фона. Все эти эффекты и дизайны полностью созданы с использованием скрипта CSS3, что делает эту кнопку градиента особенной в этом списке кнопок градиента CSS.
 Информация / Загрузить демоверсию
 Кнопки градиента 
 Все приведенные выше дизайны кнопок с градиентом CSS были созданы для кнопок призыва к действию. В этом дизайне разработчик сделал градиентные кнопки для ссылок на иконки. В этом наборе вы получаете как светлую, так и темную версию кнопки. Для демонстрации создатель использовал ссылки на профили в социальных сетях. Эффекты лучше видны на темной версии, чем на светлой. Эффекты теней и цвета теней разумно используются в светлой и темной версиях, поэтому вы получаете одинаковое впечатление от обеих версий кнопок. Сценарии HTML5 и CSS3 используются для создания этого чистого дизайна.
 Информация / Загрузить демоверсию
 Кнопка градиента холодного эффекта 
 В этом дизайне кнопки с градиентом вы получаете цветовые эффекты стиля затухания.Края и цвета на крайних правых краях размыты, чтобы придать аутентичный вид, используется более светлая версия того же цвета в шкале градиента. Но при желании вы можете изменить дизайн. Как и большинство других кнопок градиента CSS в этом списке, эта также сделана исключительно с использованием скрипта CSS3. Поскольку он использует новейшие фреймворки, у разработчиков есть полная свобода творчества в дизайне. Если вам нравится дизайн по умолчанию, вы можете использовать код как таковой в своем дизайне.
 Информация / Загрузить демоверсию
 Анимированная кнопка градиента 
 Это флуоресцентная градиентная кнопка, которая постоянно светится.Если вы действительно хотите отличить важную ссылку или кнопку от остальных вариантов, этот дизайн будет мудрым выбором. Поскольку весь анимационный эффект происходит внутри кнопки, вам не нужно настраивать дизайн веб-страницы, чтобы добавить кнопку. Кроме того, эта кнопка сделана с использованием скрипта CSS3, поэтому использовать ее на существующем веб-сайте будет несложно. Разработчик поделился всей структурой кода в редакторе CodePen. Следовательно, вы можете легко редактировать и визуализировать результаты, прежде чем использовать этот код на своем веб-сайте или в проекте.
 Информация / Загрузить демоверсию
 Кнопки с градиентом от Arturo 
 В этом дизайне кнопки с градиентом разработчик предоставил вам анимированные кнопки с градиентом. Создатель дал вам эффекты смещения цвета в разных направлениях, то есть слева направо, вращение по часовой стрелке, вращение против часовой стрелки и справа налево. Для каждой кнопки используется разная цветовая схема градиента. Как обычно, вы можете легко изменить цвет кнопки градиента на понравившийся вам. Разработчик использовал кодовые сценарии HTML5 и CSS3 для этого дизайна.Правильно обработанная структура кода поможет вам легко найти функцию кнопки и отредактировать ее. Сделав несколько оптимизаций, вы можете использовать этот код в своем дизайне.
 Информация / Загрузить демоверсию
 Кнопка CSS со светящимся фоном 
 Кнопка CSS со светящимся фоном — это еще одна версия дизайна кнопки с анимированным градиентом, упомянутого выше. В этом дизайне вы также получаете постоянно светящуюся кнопку градиента. Хотя дизайн одинаковый, оба разработчика по-разному обработали код.Кроме того, светящийся эффект также отличается, поэтому в этом дизайне вы получаете совершенно другую светящуюся кнопку. Эффект тени используется с умом, так что вы получите аккуратный профессиональный вид. Этот аккуратный деловой вид делает этот дизайн идеальным для всех типов веб-сайтов. Поскольку эффект свечения происходит на внутренней стороне кнопки, вам не нужно настраивать другие элементы на вашей веб-странице.
 Информация / Загрузить демоверсию
 Кнопка градиента контура 
 Кнопка градиента контура, само название ясно объясняет этот дизайн кнопки.Граница кнопки украшена цветовой схемой градиента, и вся кнопка заполняется градиентным цветом, когда вы наводите на нее курсор. Текст в середине кнопки — это смарт-элемент, который меняет цвет при наведении курсора. Следовательно, читабельность текста на этой кнопке будет проще, и пользователь сможет легко взаимодействовать с кнопкой. Полный сценарий CSS, используемый для создания этого дизайна, предоставляется вам, чтобы вы могли легко редактировать и использовать код в своем дизайне.
 Информация / Загрузить демоверсию
 Градиентная кнопка Аарона Скарборо 
 Разработчик Аарон Скарборо предоставил нам интерактивную градиентную кнопку. Если вы планируете использовать градиентную кнопку в разделе заголовка с большим главным изображением, этот дизайн кнопки будет хорошим вариантом. Разработчик применил эффект градиента на границе кнопки призыва к действию. На полой кнопке градиентная цветовая схема выглядит привлекательно и легко сочетается с современными шаблонами веб-дизайна. Не только дизайн, но и структура кода в этой кнопке с градиентом очень проста. Следовательно, другие разработчики могут легко использовать этот код в своем проекте или веб-дизайне.
 Информация / Загрузить демоверсию
 Анимация при наведении на один раздел 
 Анимация при наведении на один элемент div — это, по сути, эффект наведения для кнопок призыва к действию. Разработчик умело использовал простой фон и эффект наведения, чтобы придать пользователям элемент неожиданности. Эффект градиента плавно перемещается вокруг кнопки, элегантно выделяя ее. Эффект тени также используется для придания рельефности кнопке. Подобные элементы-сюрпризы всегда имеют тенденцию лучше привлекать внимание пользователей и повышать уровень их вовлеченности. Все эти умные эффекты в этом дизайне сделаны с использованием скрипта CSS3, поэтому вы получите лучшую производительность с этим кодом.
 Информация / Загрузить демоверсию
 Easy Gradient Generator Tool (избегает серых мертвых зон ☠️) 
 Почему этот генератор градиентов лучше других 
 Когда вы пытаетесь создать градиенты в широком диапазоне оттенков, вы часто будете видеть серую мертвую зону  ☠️  ™ в середине вашего градиента.Почему это стоит смехотворно зловещего смайлика  ? Потому что это означает, что ваши градиенты выглядят как  это  :
 Любители цвета: это небольшое приближение, так как мы сжимаем поперечное сечение куба в круг. Проще говоря: чтобы получить градиент, который избегает страшной серой мертвой зоны ☠️, вы не рисуете прямую  линию  от A до B, вы рисуете  большую кривую  .
 Или, если быть более точным/гиковским: мы интерполируем градиент в цветовой системе на основе оттенков, такой как HCL, HSB или HCL (не RGB) 🤓. Это позволяет избежать линии серого, проходящей через центр каждого цветового пространства. Дизайнерские приложения, онлайн-инструменты градиента и даже CSS  — все они терпят неудачу в этом отношении  — поэтому я сделал этот инструмент!
 Цветовые градиенты в HCL, HSB и HSL 
 В настоящее время в этом инструменте можно создавать градиенты в 3 различных цветовых системах, которые дают несколько разные результаты. Вот тощий:
  HCL (оттенок-цветность-яркость)  : Выбор по умолчанию для этого инструмента. HCL представляет собой потрясающую цветовую систему  , которая не только создает красивые, богатые градиенты в широком диапазоне оттенков, но и делает это с плавным восприятием. способ.Если бы вы просматривали градиент в оттенках серого, вы бы увидели только плавный переход от более светлого к более темному серому, что предотвращает ужасную «полосатость», которую вы увидите в некоторых подобранных вручную градиентах. (Примечание: перцептивно однородный характер HCL также делает его отличным для цветовых палитр визуализации данных)
  HSB (оттенок-насыщенность-яркость)  : Несмотря на неравномерность восприятия, иногда HSB предлагает более интересный (и яркий) градиент между двумя стопами.В частности, если ваш градиент HCL имеет уродливые коричнево-желтые оттенки, попробуйте версию HSB. HSB — фантастическая цветовая система для дизайнеров, и я написал подробное руководство по HSB.
  HSL (оттенок-насыщенность-яркость)  : HSB и HSL часто очень похожи, особенно в ярких градиентах. Тем не менее, иногда стоит посмотреть и то, и другое. Кроме того, обратите внимание на розовую «полосу» в градиенте HSL выше — это, по сути, небольшой всплеск яркости, вызванный артефактами использования неперцептивной системы цвета.Используйте HCL, чтобы избежать этого. (Также: меня часто спрашивают о разнице между HSB и HSL)
 Экспорт градиента в виде изображения SVG 
 Необходимо использовать один из этих градиентов в приложении для дизайна — например. Figma, Sketch или Adobe XD?
 Просто — просто нажмите «Экспорт SVG» и перетащите файл прямо в приложение для дизайна.
 Но что, если вы разрабатываете в браузере? Прежде всего, остановитесь.Используй дизайнерское приложение, глупый. Но полагая, что вы настроены по-своему, просто возьмите…
 Gradient CSS (для линейных, радиальных и конических градиентов) 
 Очень просто получить градиент CSS для любого из 3-х типов градиентов.
 Просто нажмите «Копировать CSS» и добавьте код к нужному элементу.
 Примечание: если у вас установлены другие свойства фона для рассматриваемого элемента, вы можете изменить свойство с  background  на  background-image  👍
 Подробнее о цвете 
 Дополнительные инструменты для работы с цветом и статьи об использовании цвета в дизайне пользовательского интерфейса см. по адресу:
. И, как всегда, присылайте мне отзывы и пожелания.Я стремлюсь к тому, чтобы это был самый лучший инструмент градиента в Интернете — так что вы хотите увидеть? 😎
 Использование градиентов CSS — CSS: каскадные таблицы стилей 
  Градиенты CSS  представлены типом данных   , специальным типом   , состоящим из прогрессивного перехода между двумя или более цветами. Вы можете выбрать один из трех типов градиентов:  линейный  (созданный с помощью функции  linear-gradient() ),  радиальный  (созданный с помощью функции radial-gradient() ) и  конический  (созданный с помощью функция  conic-gradient() ).Вы также можете создавать повторяющиеся градиенты с помощью функций  Repeating-Linear-Gradient()  ,  Repeating-Radial-Gradient()  и  Repeating-conic-gradient()  .
 Градиенты можно использовать везде, где вы бы использовали    , например, на заднем плане. Поскольку градиенты генерируются динамически, они могут свести на нет необходимость в файлах растровых изображений, которые традиционно использовались для достижения подобных эффектов. Кроме того, поскольку градиенты генерируются браузером, при увеличении они выглядят лучше, чем растровые изображения, и их размер можно изменять на лету.
 Мы начнем с линейных градиентов, затем представим функции, которые поддерживаются во всех типах градиентов, используя линейные градиенты в качестве примера, затем перейдем к радиальным, коническим и повторяющимся градиентам
 Линейный градиент создает полосу цветов, которые прогрессируют в прямая линия.
 Базовый линейный градиент 
 Чтобы создать базовый тип градиента, все, что вам нужно, это указать два цвета. Они называются  цветовыми упорами  . У вас должно быть как минимум два, но вы можете иметь столько, сколько хотите.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .просто-линейный {
  фон: линейный градиент (синий, розовый);
}
  
 Изменение направления 
 По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить их вращение, указав направление.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .горизонтальный градиент {
  фон: линейный градиент (вправо, синий, розовый);
}
  
 Диагональные градиенты 
 Вы даже можете сделать градиент диагональным, из угла в угол.
  <дел>
  
  раздел {
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
  
  .диагональный градиент {
  фон: линейный градиент (внизу справа, синий, розовый);
}
  
 Использование углов 
 Если вы хотите больше контролировать его направление, вы можете задать градиенту определенный угол.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .угловой-градиент {
  фон: линейный градиент (70 градусов, синий, розовый);
}
  
 При использовании угла  0 градусов  создает вертикальный градиент снизу вверх,  90 градусов  создает горизонтальный градиент слева направо и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.
 Все типы градиентов CSS представляют собой диапазон цветов, зависящих от положения.Цвета, создаваемые градиентами CSS, могут постоянно меняться в зависимости от положения, создавая плавные цветовые переходы. Также можно создавать полосы сплошных цветов и резкие переходы между двумя цветами. Для всех функций градиента действуют следующие условия:
 Использование более двух цветов 
 Вам не обязательно ограничиваться двумя цветами — вы можете использовать столько, сколько захотите! По умолчанию цвета равномерно распределены по градиенту.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .автоматический линейный градиент {
  фон: линейно-градиентный (красный, желтый, синий, оранжевый);
}
  
 Позиционирование цветовых маркеров 
 Вам не нужно оставлять цветные маркеры в их позициях по умолчанию. Чтобы точно настроить их расположение, вы можете задать каждому нулевое, одно или два процента или, для радиальных и линейных градиентов, абсолютные значения длины. Если указать местоположение в процентах,  0%  представляет собой начальную точку, а  100%  представляет собой конечную точку; однако вы можете использовать значения за пределами этого диапазона, если это необходимо для получения желаемого эффекта.Если вы оставите местоположение неуказанным, положение этой конкретной цветовой точки будет автоматически рассчитано для вас, при этом первая цветовая точка будет равна  0% , а последняя цветовая точка будет равна  100%  , а любой другой цвет перестанет быть на полпути между соседними цветовыми точками.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .multicolor-linear {
   фон: линейный градиент (влево, салатовый 28px, красный 77%, голубой);
}
  
 Создание четких линий 
 Чтобы создать четкую линию между двумя цветами, создавая полосу вместо постепенного перехода, смежные точки цвета можно установить в одном и том же месте.В этом примере цвета имеют общую цветовую остановку на отметке  50% , на полпути через градиент:
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .полосатый {
   фон: линейный градиент (внизу слева, голубой 50%, бледно-золотистый 50%);
}
  
 Подсказки градиента 
 По умолчанию градиент равномерно переходит от одного цвета к другому. Вы можете включить цветовую подсказку, чтобы переместить среднюю точку значения перехода в определенную точку вдоль градиента. В этом примере мы переместили среднюю точку перехода с отметки 50% на отметку 10%.
  <дел>
<дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей; плыть налево; поле справа: 10px;
}
  
  .цвет-подсказка {
  фон: линейный градиент (синий, 10%, розовый);
}
.просто-линейный {
  фон: линейный градиент (синий, розовый);
}
  
 Создание цветных полос и полос 
 Чтобы включить сплошную непереходную цветовую область в градиент, укажите два положения цветовой точки.Ограничители цвета могут иметь две позиции, что эквивалентно двум последовательным ограничителям цвета с одним и тем же цветом в разных позициях. Цвет достигнет полной насыщенности на первой цветовой метке, сохранит эту насыщенность до второй цветовой метки и перейдет к цвету соседней цветовой метки через первую позицию соседней цветовой метки.
  <дел>
<дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
  плыть налево; поле справа: 10px; box-sizing: граница-коробка;
}
  
  . многопозиционные остановки {
   фон: линейный градиент (влево,
       лайм 20%, красный 30%, красный 45%, голубой 55%, голубой 70%, желтый 80%);
   фон: линейный градиент (влево,
       лайм 20%, красный 30% 45%, голубой 55% 70%, желтый 80%);
}
.multiposition-stop2 {
   фон: линейный градиент (влево,
      лайм 25%, красный 25%, красный 50%, голубой 50%, голубой 75%, желтый 75%);
   фон: линейный градиент (влево,
      лайм 25%, красный 25% 50%, голубой 50% 75%, желтый 75%);
}
  
 В первом примере выше салатовый переходит от отметки 0%, что подразумевается, к отметке 20%, переходы от салатового к красному на протяжении следующих 10% ширины градиента, достигают сплошного красного цвета на 30% метка и остается сплошным красным до 45% градиента, где он становится голубым, становится полностью голубым на 15% градиента и так далее.
 Во втором примере вторая цветовая метка для каждого цвета находится в том же месте, что и первая цветовая метка для соседнего цвета, создавая эффект полос.
 В обоих примерах градиент записывается дважды: первый — это метод CSS Images Level 3 с повторением цвета для каждой точки, а второй пример — метод CSS Images Level 4 с несколькими цветовыми точками включения двух длин цветовых остановок в объявление линейной остановки цвета.
 Управление последовательностью градиента 
 По умолчанию градиент равномерно перемещается между цветами двух соседних цветовых точек, при этом средняя точка между этими двумя цветовыми точками является значением цвета средней точки.Вы можете управлять интерполяцией или переходом между двумя точками цвета, включив расположение цветовой подсказки. В этом примере цвет достигает средней точки между лаймовым и голубым на 20% градиента, а не на 50% пути. Второй пример не содержит подсказки, чтобы выделить разницу, которую может сделать цветовая подсказка:
  <дел> <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
  плыть налево; поле справа: 10px; box-sizing: граница-коробка;
}
  
  . colorhint-градиент {
  фон: линейно-градиентный (вверх, салатовый, 20%, голубой);
}
.regular-прогресс {
  фон: линейный градиент (вверх, салатовый, голубой);
}
  
 Наложение градиентов 
 Градиенты поддерживают прозрачность, поэтому вы можете накладывать несколько фонов друг на друга, чтобы получить довольно причудливые эффекты. Фоны складываются сверху вниз, причем первый указанный фон находится сверху.
  <дел>
  
  раздел {
  ширина: 300 пикселей;
  высота: 150 пикселей;
}
  
  .многослойное изображение {
  фон: линейный градиент (вправо, прозрачный, туманный),
      URL ("твари.png");
}
  
 Градиенты с накоплением 
 Вы даже можете складывать градиенты с другими градиентами. Пока верхние градиенты не полностью непрозрачны, нижние градиенты все равно будут видны.
  <дел>
  
  раздел {
  ширина: 200 пикселей;
  высота: 200 пикселей;
}
  
  . stacked-linear {
  задний план:
      линейный градиент (217 градусов, rgba (255,0,0,.8), rgba(255,0,0,0) 70,71%),
      линейный градиент (127 градусов, rgba (0,255,0,.8), rgba (0,255,0,0) 70,71%),
      линейный градиент (336 градусов, rgba (0,0,255,.8), rgba (0,0,255,0) 70,71%);
}
  
 Радиальные градиенты аналогичны линейным градиентам, за исключением того, что они исходят из центральной точки. Вы можете диктовать, где находится эта центральная точка. Вы также можете сделать их круглыми или эллиптическими.
 Базовый радиальный градиент 
 Как и в случае с линейными градиентами, все, что вам нужно для создания радиального градиента, — это два цвета.По умолчанию центр градиента находится на отметке 50% 50%, а градиент имеет эллиптическую форму, соответствующую соотношению сторон его поля:
.  <дел>
  
  раздел {
  ширина: 240 пикселей;
  высота: 120 пикселей;
}
  
  .простой радиальный {
  фон: радиально-градиентный (красный, синий);
}
  
 Позиционирование радиальных цветовых точек 
 Как и в случае с линейными градиентами, вы можете расположить каждую радиальную цветовую точку с процентной или абсолютной длиной.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .radial-gradient {
  фон: радиальный градиент (красный 10px, желтый 30%, #1e90ff 50%);
}
  
 Позиционирование центра градиента 
 Вы можете расположить центр градиента с ключевыми терминами, процентами или абсолютными длинами, длиной и процентными значениями, повторяющимися, если присутствует только одно, в противном случае в порядке положения слева и положения сверху.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 240 пикселей;
}
  
  .radial-gradient {
  фон: радиальный градиент (0% 30%, красный 10px, желтый 30%, #1e90ff 50%);
}
  
 Размер радиальных градиентов 
 В отличие от линейных градиентов, вы можете указать размер радиальных градиентов. Возможные значения:  ближайший угол  ,  ближайший угол  ,  дальний угол  и  дальний угол  , причем  дальний угол  используется по умолчанию. Круги также могут иметь длину, а эллипсы — длину или процент.
 Пример: ближайшая сторона для эллипсов 
 В этом примере используется значение размера  ближайшей стороны , что означает, что размер задается расстоянием от начальной точки (центра) до ближайшей стороны ограничивающего блока.
  <дел>
  
  раздел {
  ширина: 240 пикселей;
  высота: 100 пикселей;
}
  
  .radial-ellipse-side {
  фон: радиальный градиент (ближайшая сторона эллипса,
      красный, желтый 10%, #1e90ff 50%, бежевый);
}
  
 Пример: самый дальний угол для эллипсов 
 Этот пример аналогичен предыдущему, за исключением того, что его размер указан как  дальний угол  , который задает размер градиента расстоянием от начальной точки до самого дальнего угла ограничивающего прямоугольника от начальной точки.
  <дел>
  
  раздел {
  ширина: 240 пикселей;
  высота: 100 пикселей;
}
  
  . radial-ellipse-far {
  фон: радиальный градиент (эллипс в самом дальнем углу при 90% 90%,
      красный, желтый 10%, #1e90ff 50%, бежевый);
}
  
 Пример: ближайшая сторона для кругов 
 В этом примере используется  ближайшая сторона  , что делает размер круга равным расстоянию между начальной точкой (центром) и ближайшей стороной.Радиус круга — это расстояние между центром градиента и ближайшим краем, который из-за расположения 25% сверху и 25% снизу ближе всего к низу, так как высота в этом случае уже. чем ширина.
  <дел>
  
  раздел {
  ширина: 240 пикселей;
  высота: 120 пикселей;
}
  
  .radial-circle-close {
  фон: радиальный градиент (круг ближайшей стороны на 25% 75%,
      красный, желтый 10%, #1e90ff 50%, бежевый);
}
  
 Пример: длина или процент для эллипсов 
 Только для эллипсов: размер эллипса можно задать с помощью длины или процента.Первое значение представляет горизонтальный радиус, второе — вертикальный радиус, где вы используете процентное значение, соответствующее размеру поля в этом измерении. В приведенном ниже примере я использовал процент для горизонтального радиуса.
  <дел>
  
  раздел {
  ширина: 240 пикселей;
  высота: 120 пикселей;
}
  
  .radial-ellipse-size {
   фон: радиальный градиент (эллипс 50% 50px,
      красный, желтый 10%, #1e90ff 50%, бежевый);
}
  
 Пример: длина кругов 
 Для кругов размер может быть указан как <длина>, который является размером круга.
  <дел>
  
  раздел {
  ширина: 240 пикселей;
  высота: 120 пикселей;
}
  
  .radial-circle-size {
  фон: радиальный градиент (круг 50px,
      красный, желтый 10%, #1e90ff 50%, бежевый);
}
  
 Составные радиальные градиенты 
 Как и линейные градиенты, радиальные градиенты можно накладывать друг на друга. Первый указанный находится сверху, последний — снизу.
  <дел>
  
  раздел {
  ширина: 200 пикселей;
  высота: 200 пикселей;
}
  
  . многослойный радиальный {
  задний план:
      радиальный градиент (круг на 50% 0,
        RGBA(255,0,0,.5),
        rgba(255,0,0,0) 70,71%),
      радиально-градиентный (круг на 6,7% 75%,
        RGBA(0,0,255,.5),
        rgba(0,0,255,0) 70,71%),
      радиально-градиентный (круг на 93,3% 75%,
        RGBA(0,255,0,.5),
        rgba(0,255,0,0)70,71%) бежевый;
  радиус границы: 50%;
}
  
 Функция CSS   conic-gradient()   создает изображение, состоящее из градиента с цветовыми переходами, вращающимися вокруг центральной точки (а не исходящими от центра).Примеры конических градиентов включают круговые диаграммы и цветовые круги, но их также можно использовать для создания шахматных досок и других интересных эффектов.
 Синтаксис конического градиента подобен синтаксису радиального градиента, но точки цвета размещаются вокруг дуги градиента, окружности круга, а не на линии градиента, выходящей из центра градиента, а цвет -stops — это проценты или градусы: абсолютная длина недействительна.
 В радиальном градиенте цвета переходят от центра эллипса наружу во всех направлениях.При конических градиентах переход цветов происходит так, как если бы он вращался вокруг центра круга, начиная сверху и двигаясь по часовой стрелке. Подобно радиальным градиентам, вы можете расположить центр градиента. Подобно линейным градиентам, вы можете изменить угол градиента.
 Базовый конический градиент 
 Как и в случае с линейным и радиальным градиентом, все, что вам нужно для создания конического градиента, — это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, начало градиента направлено вверх:
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .простой конический {
  фон: конический градиент (красный, синий);
}
  
 Позиционирование конического центра 
 Как и в случае с радиальными градиентами, вы можете расположить центр конического градиента с помощью ключевых слов, процентов или абсолютных длин с помощью ключевого слова «at»
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  . conic-градиент {
  фон: конический градиент (0% 30%, красный 10%, желтый 30%, #1e90ff 50%);
}
  
 Изменение угла 
 По умолчанию заданные вами точки разного цвета располагаются на равном расстоянии друг от друга по кругу.Вы можете расположить начальный угол конического градиента, используя ключевое слово «от» в начале, за которым следует угол или длина, и вы можете указать разные позиции для цветовых точек, включив угол или длину после них.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .conic-градиент {
  фон: конический градиент (от 45 градусов, красный, оранжевый 50%, желтый 85%, зеленый);
}
  
 Функции  linear-gradient()  , radial-gradient()  и  conic-gradient()  не поддерживают автоматически повторяющиеся остановки цвета.Однако функции  Repeating-Linear-Gradient()  ,  Repeating-Radial-Gradient()  , и  Repeating-Conic-Gradient()  доступны для реализации этой функции.
 Размер повторяющейся линии или дуги градиента — это длина между первым значением цветовой точки и последним значением длины цветовой точки. Если первая цветовая точка имеет только цвет и не имеет длины, значение по умолчанию равно 0. Если последняя цветовая точка имеет только цвет и не имеет длины, значение по умолчанию равно 100%.Если ни один из них не объявлен, линия градиента равна 100%, что означает, что линейный и конический градиенты не будут повторяться, а радиальный градиент будет повторяться только в том случае, если радиус градиента меньше длины между центром градиента и самым дальним углом. Если объявлена первая цветовая точка и значение больше 0, градиент будет повторяться, поскольку размер линии или дуги представляет собой разницу между первой цветовой точкой и последней цветовой точкой менее 100 % или 360 градусов.
 Повторяющиеся линейные градиенты 
 В этом примере используется функция  Repeating-Linear-Gradient()  для создания градиента, который многократно повторяется по прямой линии. Цвета снова циклически повторяются по мере повторения градиента. В этом случае линия градиента имеет длину 10 пикселей.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .repeating-linear {
  фон: повторяющийся линейный градиент (-45 градусов, красный, красный 5 пикселей, синий 5 пикселей, синий 10 пикселей);
}
  
 Несколько повторяющихся линейных градиентов 
 Подобно обычным линейным и радиальным градиентам, вы можете включать несколько градиентов, один поверх другого.Это имеет смысл только в том случае, если градиенты частично прозрачны, позволяя последующим градиентам отображаться через прозрачные области, или если вы включаете разные размеры фона, необязательно с разными значениями свойства background-position, для каждого изображения градиента. Мы используем прозрачность.
 В этом случае линии градиента имеют длину 300 пикселей, 230 пикселей и 300 пикселей.
  <дел>
  
  раздел {
  ширина: 600 пикселей;
  высота: 400 пикселей;
}
  
  .многоповторяющийся линейный {
  задний план:
      повторяющийся линейный градиент (190 градусов, rgba (255, 0, 0, 0,5) 40 пикселей,
        rgba (255, 153, 0, 0,5) 80 пикселей, rgba (255, 255, 0, 0,5) 120 пикселей,
        rgba (0, 255, 0, 0,5) 160 пикселей, rgba (0, 0, 255, 0,5) 200 пикселей,
        rgba (75, 0, 130, 0,5) 240 пикселей, rgba (238, 130, 238, 0,5) 280 пикселей,
        RGBA (255, 0, 0, 0,5) 300 пикселей),
      повторяющийся линейный градиент (-190 градусов, rgba (255, 0, 0, 0,5) 30 пикселей,
        rgba (255, 153, 0, 0,5) 60 пикселей, rgba (255, 255, 0, 0,5) 90 пикселей,
        rgba(0, 255, 0, 0.5) 120 пикселей, rgba (0, 0, 255, 0,5) 150 пикселей,
        rgba (75, 0, 130, 0,5) 180 пикселей, rgba (238, 130, 238, 0,5) 210 пикселей,
        RGBA (255, 0, 0, 0,5) 230 пикселей),
      повторяющийся линейный градиент (23 градуса, красный 50 пикселей, оранжевый 100 пикселей,
        желтый 150 пикселей, зеленый 200 пикселей, синий 250 пикселей,
        индиго 300 пикселей, фиолетовый 350 пикселей, красный 370 пикселей);
}
  
 Градиент пледа 
 Для создания пледа мы добавили несколько перекрывающихся градиентов с прозрачностью. В первом объявлении фона мы указали каждую цветовую точку отдельно.Второе объявление свойства фона с использованием синтаксиса остановки цвета в нескольких позициях:
.  <дел>
  
  раздел {
  ширина: 200 пикселей;
  высота: 200 пикселей;
}
  
  .плед-градиент {
  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba(255, 127, 0, 0,25) 63px, rgba(255, 127, 0, 0.25) 69px,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba(255, 127, 0, 0,25) 63px, rgba(255, 127, 0, 0,25) 69px,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba(143, 77, 63, 0. 25) 5 пикселей, rgba (143, 77, 63, 0,25) 10 пикселей),
      повторяющийся линейный градиент (45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba(143, 77, 63, 0,25) 5px, rgba(143, 77, 63, 0,25) 10px);

  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный 0 50 пикселей,
        rgba(255, 127, 0, 0,25) 50px 56px,
        прозрачный 56px 63px,
        RGBA(255, 127, 0, 0,25) 63px 69px,
        прозрачный 69px 116px,
        rgba(255, 206, 0, 0,25) 116px 166px),
      повторяющийся линейный градиент (0 градусов, прозрачный 0 50 пикселей,
        rgba(255, 127, 0, 0.25) 50px 56px,
        прозрачный 56px 63px,
        RGBA(255, 127, 0, 0,25) 63px 69px,
        прозрачный 69px 116px,
        rgba(255, 206, 0, 0,25) 116px 166px),
      повторяющийся линейный градиент (-45 градусов, прозрачный 0 5 пикселей,
        rgba(143, 77, 63, 0,25) 5px 10px),
      повторяющийся линейный градиент (45 градусов, прозрачный 0 5 пикселей,
        rgba(143, 77, 63, 0,25) 5px 10px);
}
  
 Повторяющиеся радиальные градиенты 
 В этом примере используется  Repeating-Radial-Gradient()  для создания градиента, который многократно исходит из центральной точки. Цвета циклически повторяются снова и снова по мере повторения градиента.
  <дел>
  
  раздел {
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
  
  .повторяющийся радиальный {
  фон: повторяющийся радиальный градиент (черный, черный 5 пикселей, белый 5 пикселей, белый 10 пикселей);
}
  
 Несколько повторяющихся радиальных градиентов 
  
  
  раздел {
  ширина: 250 пикселей;
  высота: 150 пикселей;
}
  
  .многоцелевой {
  задний план:
      повторяющийся радиальный градиент (эллипс на 80% 50%, rgba (0,0,0,0,5),
        rgba(0,0,0,0,5) 15px, rgba(255,255,255,0,5) 15px,
        rgba(255,255,255,0.5) 30px) вверху слева без повтора,
      повторяющийся радиальный градиент (эллипс на 20% 50%, rgba (0,0,0,0,5),
        rgba(0,0,0,0,5) 10px, rgba(255,255,255,0,5) 10px,
        rgba(255,255,255,0.5) 20px) верхний левый желтый без повтора;
  размер фона: 200px 200px, 150px 150px;
}
  
 10 CSS-библиотек градиентов и веб-приложений для дизайнеров пользовательского интерфейса 
 Бесплатные онлайн-инструменты являются нормой для современных дизайнеров. Зачем изобретать велосипед, если можно сэкономить время с помощью бесплатного ресурса?
 Если поискать, то можно найти множество инструментов для выбора узоров и цветов. Но вам будет сложнее найти ресурсы, основанные на градиентах.
 Вот почему я составил этот список из 10 бесплатных инструментов градиента, библиотек кода и ресурсов дизайна для веб- и мобильных проектов. 
 Ваш набор инструментов для веб-дизайнера 
 Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна 
 Начиная с  всего за 16 долларов.50/месяц! 
 
 СКАЧАТЬ
 Веб-градиенты 
 На веб-сайте WebGradients вы найдете множество настраиваемых градиентов на выбор.
 Они бывают разных цветов и стилей, но все они предварительно собраны и готовы к работе. Думайте об этом как о библиотеке градиентов с  более чем 180 вариантами  в целом.
 Если вы посмотрите на верхнюю панель навигации, вы найдете ссылки для скачивания этих градиентов как в формате PSD, так и в файле Sketch.
 Или вы можете скопировать градиенты как код CSS3, а затем добавить их прямо на свой сайт. Здесь нет неправильных ответов — просто много градиентов.
 Кнопки градиента 
 Если вы веб-дизайнер, то знаете, насколько болезненным может быть подбор цветов. Это становится еще сложнее, когда вы пытаетесь сопоставить градиенты.
 Войдите в GradientButtons, бесплатную библиотеку с открытым исходным кодом, наполненную великолепным дизайном кнопок.
 Библиотека очень проста в использовании и содержит  множество  градиентов на выбор.
 Просмотрите домашнюю страницу, и вы найдете различные классы размеров, стилей шрифтов, цветов и форматов кнопок. Проект также находится на GitHub, если вы хотите глубже изучить код.
 интерфейс Градиенты 
 Посмотрите в библиотеке uiGradients некоторые интересные варианты градиентов CSS3.
 В верхней части навигации (слева) вы увидите кнопку с надписью «показать все градиенты». Выберите его, чтобы просмотреть  массивных списков  различных стилей градиента.Серьезно, есть много.
 Выберите любой из них, а затем скопируйте код для использования на своем сайте. Вы также можете загрузить градиент в виде файла .jpg прямо с их панели инструментов (расположенной в правом верхнем углу).
 Градиентный аниматор 
 Итак, градиентная анимация. Теперь это вещь. И инструмент Gradient Animator — идеальный способ воплотить это в жизнь. Все может работать прямо через CSS3 без необходимости JavaScript.
 На боковой панели нажмите «Добавить цвет» и выберите как минимум два из них для своего градиента.Измените скорость, чтобы бежать немного быстрее, измените направление, затем нажмите «Предварительный просмотр».
 Вы довольно быстро поймете преимущества этого инструмента.
 Редактор градиентов Colorzilla 
 Каждый веб-дизайнер уже должен знать о редакторе градиентов Colorzilla.
 Он существует уже много лет и является одним из первых веб-приложений, позволяющих разработчикам автоматически генерировать код градиента CSS3 с нуля.
 Действительно, этот инструмент нужно добавить в закладки.Он также поставляется с готовыми градиентами и почти как библиотека для дизайнеров.
 Градиенты CSS 
 Вот аккуратная библиотека, ориентированная на градиенты CSS3, которая доступна на GitHub.
 Вы получаете доступ ко всему исходному коду и множеству стилей градиента (линейный, радиальный и т. д.).
 Также есть образец демонстрационной страницы с большим количеством «необычных» типов градиентов. Они выглядят как шаблоны, которые вы можете создать исключительно с помощью кода CSS.
 С ума сойти, как далеко продвинулся Интернет с момента выпуска современных свойств CSS3.
 Градиент ColorSpace 
 ColorSpace имеет собственное маленькое градиентное веб-приложение, которое позволяет разработчикам создавать собственные коды из набора цветовых вариантов.
 У него более простой интерфейс, чем у Colorzilla (на мой взгляд), потому что элементы управления кажутся такими очевидными. Проблема в том, что инструмент ColorSpace позволяет выбрать только  два цвета за раз  .
 С помощью чего-то вроде Colorzilla вы можете добавить несколько цветов вместе для одного массивного градиента.
 Это не значит, что ColorSpace — плохой инструмент. Но лучше всего его использовать для простых градиентов.
 Бесконечные градиенты 
 С другой стороны, у нас есть бесконечные градиенты. И да, это именно то, на что это похоже.
 В верхней панели навигации вы можете добавлять цвета, блокировать определенные варианты и редактировать определенные функции вашего градиента. Инструмент работает с помощью мыши, когда вы перетаскиваете холст, чтобы редактировать стиль градиента. Как только вы все сделаете правильно, вы можете скопировать код градиента CSS3, и все готово.
 Я бы назвал это скорее забавным инструментом, чем практичным решением. Хотя, это может быть очень полезно для творческих дизайнеров.
 Также есть страница «О нас», если вы хотите узнать больше.
 Полифилл с коническим градиентом 
 Спецификации W3C содержат некоторые сведения о конических градиентах, но они не поддерживаются современными стандартами CSS3.
 Введите этот полифилл, разработанный для решения проблемы. Это удобный инструмент с открытым исходным кодом, созданный разработчиком Леа Вероу, который обеспечивает поддержку  conic-gradient()  через полифилл.
 Хотя это не самый часто используемый инструмент градиента из существующих, он решает реальную проблему для веб-дизайнеров.
 Крошечный градиент 
 TinyColor — это аккуратная JS-библиотека, которая обрабатывает и редактирует цвета в библиотеке кода. Разработчик Дэмиен Сорель взял эту библиотеку и создал на ее основе опцию TinyGradient.
 Это работает так же. Вы управляете градиентами  с помощью JavaScript , и они будут правильно работать через CSS во всех браузерах.Довольно аккуратно!
 Градиенты поддерживают цвета RGB или HSV.

Comments

Leave Comment

 CloseLeave a Comment
 Отменить ответ
 
 
  
 What is the sum of:  5 + 1 =