grad в CSS


Содержание

CSS: Линейный градиент для фона

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

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

Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

CSS3 определяет два типа градиентов:

  • Линейный градиент (Linear Gradient) — плавный переход от цвета к цвету по прямой линии.
  • Радиальный градиент (Radial Gradient) — плавный переход от цвета к цвету из одной точки во все направления.

Линейный градиент

Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.

Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:

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

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

При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.

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

Использование градусов В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree — градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов. Использование ключевых слов В качестве первого аргумента могут также передаваться ключевые слова «to top», «to right», «to bottom» или «to left», они представляют собой углы линий градиентов «0deg» «90deg» «180deg» «270deg» соответственно.

Угол можно так же задать с помощью двух ключевых слов, например, to top right — линия градиента направлена в верхний правый угол.

Пример градиента заданного в разных направлениях:

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

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% — конечной.

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

CSS Gradients

Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS определяет два типа градиентов:

  • Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
  • Радиальные градиенты (определяемые их центром)

CSS линейные градиенты

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

Синтаксис

Линейный градиент-сверху вниз (по умолчанию)

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

Пример

Линейный градиент-слева направо

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

Пример

Линейный градиент-Диагональ

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

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

Пример

Использование углов

Если требуется больший контроль над направлением градиента, можно определить угол, а не предопределенные направления (снизу, сверху, вправо, влево, вниз вправо и т.д.).

Синтаксис

Угол указывается в виде угла между горизонтальной линией и линией градиента.

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

Пример

Использование нескольких цветовых остановок

В следующем примере показан линейный градиент (сверху вниз) с несколькими остановками цвета:

Пример

В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:

Пример

Использование прозрачности

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

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

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

Пример

Повторение линейного градиента

Функция повторения-линейного градиента () используется для повторения линейных градиентов:

Пример

Повторяющийся линейный градиент:

CSS радиальные градиенты

Радиальный градиент определяется его центром.

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

Синтаксис

По умолчанию форма имеет эллипс, размер — самый дальний угол, а положение — центр.

Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)

В следующем примере показан радиальный градиент с равномерно раскрытием цветовых остановок:

Пример

Радиальный градиент-по-разному пробелом останавливается цвет

В следующем примере показан радиальный градиент с разными интервалами цвета:

Пример

Задать форму

Параметр Shape определяет форму. Он может принимать значение окружности или эллипса. Значением по умолчанию является эллипс.

В следующем примере показан радиальный градиент с формой окружности:

Пример

Использование различных ключевых слов размера

Параметр size определяет размер градиента. Он может принимать четыре значения:

Пример

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

#grad1 <
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
>

#grad2 <
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
>

Повторение радиального градиента

Функция повторения-радиального градиента () используется для повторения радиальных градиентов:

Лучшие генераторы градиентов CSS для дизайнеров

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

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

CoolHue

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

Хотя у вас нет особого контроля над настройкой параметров, с помощью CoolHue вы сразу поймете, работает ли один из цветовых комбо для вас или нет, потому что все параметры находятся прямо на экране. Также одним щелчком мыши вы можете скопировать CSS. Вот и все. Серьезно! Кроме того каждый файл доступен в формате PNG для скачивания.

CSS Gradient

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

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

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

UI Gradients

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

Илон Маск рекомендует:  Справочник HTML в виде файлов

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

Не нравится то, что вы видите? Тогда вы можете добавлять данные градиента в файл gradients.json в проекте и отправлять запрос на перенос.

CSSmatic

CSSmatic — это простой генератор градиентов с кликабельными кнопками, которые помогут вам настроить выбор цвета, остановку и вращение. С помощью этого инструмента пользователи могут создавать линейные или радиальные градиенты.

Начните с одного из простых пресетов — тут вы найдете некоторые хорошие монохроматические варианты — и настраивайте его, пока вы не получите необходимый вам градиент. Затем скопируйте код, и вы готовы к работе.

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator очень похож на CSSmatic, и у этих инструментов даже почти одинаковые экранные функции, однако у него есть и другая функциональность.

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

ColorSpace

ColorSpace — это еще один полноэкранный градиентный инструмент с высоко визуальным веб-сайтом. Он довольно простой в использовании. Выберите ориентацию градиента (линейную или радиальную), добавьте два цвета с помощью кнопок и средства выбора цвета, затем нажмите кнопку «Создать».

Хотя этот инструмент все еще находится в стадии бета-версии, он работает хорошо, а код виден прямо на экране для копирования в проекты. Все, что вам нужно от визуализации градиента в CSS, находится прямо на экране. И если вам не нравятся ваши цветовые решения, их легко изменить и просто снова нажать «Создать».

CSS Gradient Generator

CSS Gradient Generator производит код, используя простой графический интерфейс пользователя, а сам CSS будет работать во всех браузерах, поддерживающих CSS3.

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

CSS3 Factory

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

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

CSS-Gradient

CSS-Gradient является генератором плюс учебником по градиентам. Инструмент включает в себя боксы для выбора двух вариантов цвета в Hex или RGB, направленных, линейных или радиальных. Так что этот инструмент лучше всего подходит, если вы имеете представление о том, какие цвета вы хотите использовать. Просто скопируйте код и примените его к своему дизайну.

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

GradientGenerator

GradientGenerator — отличный инструмент для создания небольшого градиентного вдохновения. Начните с одного из пресетов (есть много различных вариантов на выбор), а затем добаьте свои собственные настройки для уникального градиента.

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

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

Вывод

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

Затем все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать работу. Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится, и который будет прост в использовании. Мы надеемся, что один из вариантов в этом списке отлично будет работать вас.

Всем успешной работы!

Как задать градиент для border в CSS?

Приветствую вас, дорогие друзья!

Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.

Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.

Линейный градиент

Для примера рассмотрим такой блок:

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

Теперь нам нужно задать толщину рамки и её тип:

Для задания градиента допишем свойство border-image в css файле:

Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:

И последнее зададим CSS свойство:

Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:

Вот результат работы кода:

Особенности border gradient в CSS

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

2 Можно регулировать соотношение цветов в процентах задав число % рядом с цветом:

  • 3 Данное CSS на работает в паре со свойством border-radius, отвечающее за скругление углов.
  • Направление градиента border gradient

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

    При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

    В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
    Пример для border gradient слева направо:

    CSS функция linear-gradient()

    Определение и применение

    CSS функция linear-gradient() (линейный градиент) используется для заливки определенной области заданной последовательностью цветовых оттенков с плавными переходами между ними.

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

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

    Поддержка браузерами

    Функция Chrome Firefox Opera Safari IExplorer Edge
    linear-gradient() 26.0
    10.0
    -webkit-
    16.0
    3.6
    -moz-
    12.1
    11.1
    -o-
    6.1
    5.1
    -webkit-
    10.0 12.0

    CSS синтаксис:

    Создавая градиент, допускается использовать не только «Предопределенные цвета», но и любые «значения цвета, используемые в CSS» — шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A.

    Направление

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

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

    Ключевое слово Позиция градиента
    to left Градиент размещается справа налево.
    to right Градиент размещается слева направо.
    to top Градиент размещается снизу вверх.
    to bottom Градиент размещается сверху вниз. Это значение по умолчанию.
    to left top Градиент размещается от правого нижнего угла к левому верхнему.
    to right top Градиент размещается от левого нижнего угла к правому верхнему.
    to left bottom Градиент размещается от правого верхнего угла к левому нижнему.
    to right bottom Градиент размещается от левого верхнего угла к правому нижнему.

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

    Линейный градиент, заданный в градусах проходит через середину точки центра элемента и отображается (рендерится) вдоль этой линии. Ниже представлено изображение, на котором указано как располагается градиент под тем или иным углом на примере квадратного элемента:

    Расположение градиента, заданного в градусах в квадратном элементе.

    Значения 0deg , 90deg , 180deg и 270deg соответствуют значениям ранее рассмотренных ключевых слов независимо от того является элемент квадратным или имеет прямоугольную форму. В случае если элемент полностью квадратный, то следующие значения в градусах будут полностью соответствовать ключевым словам:

    Значение в градусах Соответствует ключевому слову Размещение градиента
    0 deg to top Снизу вверх.
    45deg to right top * Градиент размещается под углом 45 градусов к точке пересечения линии координат.
    90deg to right Слева направо.
    135 deg to right bottom * Градиент размещается от левого верхнего угла к правому нижнему.
    180deg to bottom Сверху вниз. Это значение по умолчанию.
    225deg to left bottom * Градиент размещается от правого верхнего угла к левому нижнему.
    270deg to left Справа налево.
    315deg to left top * Градиент размещается от правого нижнего угла к левому верхнему.

    * — верно, только для квадратного элемента. На изображении ниже отображена разница между значениями в 45 градусов и значениями to right top для прямоугольного элемента. Главное, что необходимо понять, что для квадратных элементов значения 45deg и to right top , 135 deg и to right bottom , 225deg и to left bottom , 315deg и to left top будут одинаковы, а для прямоугольных градиентов эти значения будут отличаться:

    Расположение градиента в прямоугольном элементе (сравнение 45deg и to right top).

    Точки остановки

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

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

    Допускается указывать значения точек остановки (color stops) в единицах измерения длины (например – px или em), так и в процентных значениях. Как правило, процентные значения являются более удобными и адаптивными в использовании.

    Версия CSS

    Пример использования

    Рассмотрим как указать позицию градиента с использованием ключевых слов:

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

    Результат нашего примера представлен на изображении:

    Позиция градиента (использование ключевых слов).

    Рассмотрим как указать позицию градиента с использованием градусов:

    В данном примере мы создали элемент высотой 100 пикселей (ширина автоматически растягивается на весь экран). Задали для него трехцветный градиент под углом 135 градусов . Кроме того применили вертикальное выравнивание, выравнивание текста по центру и установили высоту строки равную высоте элемента.

    Позиция градиента (использование градусов).

    Рассмотрим использование точек остановки градиента на следующем примере:

    В данном примере мы создали пять элементов высотой 50 пикселей (ширина автоматически растягивается на весь экран). Задали для них трехцветный градиент, располагающийся слева направо. Кроме того, применили вертикальное выравнивание, выравнивание текста по центру, установили высоту строки равную высоте элемента и указали внешний отступ с нижней стороны равный 0.7em . Для первых четырех блоков указаны значения точки остановки только для красного цвета (остальные цвета занимают равномерное расстояние). Для последнего блока мы указали три точки остановки:

    • Первая точка – для красного градиента ( 15% );
    • Вторая точка – для зеленого градиента ( 60% );
    • Третья точка – для синего градиента ( 70% ). Это значение не повлияет на отображение, так как после этого градиента нет других цветов, и он в любом случае растянется в ширину всего элемента.

    Результат нашего примера:

    Рис. 128 Пример использования точек остановки градиента.

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

    В следующем примере мы создадим флаг Швейцарии (один к одному), используя три градиента, которые мы укажем в одном объявлении:

    • Первый градиент задает сверху вниз три части градиенту: 30% красный цвет, с 30% до 70% прозрачный и оставшаяся часть красный цвет. Зеленым отображен прозрачный участок.
    • Второй градиент задает слева направо (под углом 90 градусов ) симметричное сочетание красный – прозрачный – прозрачный – белый – белый – прозрачный – прозрачный – красный. Как вы можете догадаться, повтор цвета необходим, чтобы убрать плавный переход между цветами (отсутствие размытия).
    • Третий градиент придает окончательный вид, флагу окрашивая не нужные в нашей композиции места.

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

    Результат нашего примера:

    Пример создания флага Швейцарии с использованием нескольких градиентов. CSS функции

    CSS градиенты. Примеры использования градиентов в HTML & CSS

    Пояснения к статье:

    1. — CSS свойство которое принимает несколько значений. Свойство < background : linear-gradient(to top white 20%, red 50%, black 30%)>задает градиент переходящий снизу вверх. Цвета будет располагаться по площади следующим образом: 20% — белый, 50% — красный, 30% — черный.
    2. radial-gradient > — CSS свойство, которое служит для создания радиального градиента. Принимает несколько значений. Запись background: radial-gradient(circle at 65% 15%, aqua, darkblue) создаст фигуру сине-голубого шара.
    3. @keyFrame — ключевое слово, которое используется для стилизации некоторых элементов, чаще всего для анимации.
    4. animation > — свойство, которое отвечает за анимацию. Её значения определяют длительность(в секундах), функции и количество повторений.

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

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

    Синтаксис

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

    Линейный градиент

    Для начала мы рассмотрим самый простой — создание линейного градиента. Он создается с помощью свойства linear-gradient.

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

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

    Способов создания направления несколько, для этого используются точные и не точные значения. Из не точных значений выделяют to top, to bottom, to right и to left, которые задают направления вверх, вниз, вправо и влево соответственно.

    Для указания другого направления записывается значение градусов угла наклона, которое измеряется в deg. 1 deg равен 1 градусу.

    Для создания перехода цвета по диагонали можно использовать и ключевые слова, например сочетание to top left. Он задает линию переходящую влево, в верхний край экрана.

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

    Запись < background : linear-gradient(to top, #fff 20%, #ccc, #000)>будет означать, что белый цвет будет занимать первые 20% области.

    Радиальные градиенты

    Задается с помощью команды radial-gradient. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.

    • Первое значение, которое принимает команда radial-gradient — форма. Её можно указывать простыми словами — circle, ellipse и другие. По умолчанию стоит 2 значение.
    • Второе значение, в отличие от линейного градиента, задает положение центра. Для этого задаются такие же ключевые слова, с небольшим отличием: приставка to меняется на at.
    • С помощью точных значений можно задавать ширину и высоту градиента. Первое значение определяет ширину, а второе высоту. Для изменения ширины подходят такие размеры: %, rem и em.

    Пример использования градиента. HTML & CSS

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

    Градиент css генератор

    Отображение градиента css

    Готовый код градиента css

    Параметры градиент css генератора оналайн

    1. Левый цвет градиента. Подбираем у блока в левой части цвет любых оттенков с помощью сочетания красного, зеленого и синего цвета.
    2. Правый цвет градиента. Выбираем оттенок цвета справа.
    3. Уровень между градиентами. Расстояние от левой части блока где начнется градиент.
    4. Размытие градиента. Смешивание двух цветов от уровня между цветами.
    5. Угол границы градиента. Направление линии для равномерного изменения цвета от 0 до 365 градусов.

    Все свойства градиент css

    Градиент css накладывается на элементы в lending page такие как

    • Градиент кнопки для украшения лендинга.
    • Задний css градиент фона секции.
    • Градиент картинки css с прозрачностью.
    • Css градиент текста большого заголовка.

    Создадим простой элемент в теге див с классом grad. Чтобы наложить градиент на класс grad зададим контур с шириной и высотой в файле стилей css. После этого можно добавить свойство градиента, который получился в генераторе градиента css. Gradient задается в свойстве background, затем пишем префикс webkit linear gradient для корректного отображения в разных интернет браузерах. Во вторых пишем какого вида будет градиент, выбираем из трех.

    1. Линейный градиент css. Состоит из двух или больше цветов. Цвет изменяется от одного к другому равномерно по линии, с заданием угла.
    2. Радиальный градиент. Цвет от одного к другому распределяется равномерно в форме круга, внутри элемента.
    3. Повторяющийся градиент со свойством repeating. Подходит к линейному и радиальному.

    градиент css примеры

    Разберем на примерах все виды градиентов.

    1). Пример linear-gradient() линейный градиент

    У linear gradient угол наклона задается параметром deg или ключами

    1. to right угол в 90deg.
    2. to left угол будет 270deg.
    3. to top угол равен 0deg.
    4. to bottom угол границы 180deg.

    2). Пример radial-gradient() радиальный градиент

    С помощью ключа at задаем точку начала радиального градиента.

    Задаем размеры элипса в процентах

    1. Первое значение ширина.
    2. Второе высота элипса.

    Используем ключ farthest-corner для выставления размера градиента до дальнего угла.

    Чтобы градиент стал круглым пишем ключ circle, по умолчанию он в виде ellipse.

    Про CSS

    Анимируем CSS-градиенты

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

    Если быть точным, положение и размер градиента анимируются успешно (как и любого другого фона):

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

    В FF цвета в примере не будут меняться вообще, в Хроме — будут, но резко, без плавного перехода.

    UPD: В Webkit с помощью Sass можно сделать имитацию плавной смены цветов, но код получается неприличных размеров. Пример: codepen.io/yoksel/pen/gBDFj. На момент правки демо не работает в Firefox (27.0.1), анимация просто игнорируется.

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

    Фоновый цвет в данном случае является частью градиента.

    Тень задается с параметром inset (внутреняя тень), с большим радиусом размытия (в примере 100px ), чтобы сымитировать градиент, и с большими отрицательными отступами ( -120px ) — чтобы от обычной внутренней тени была видна только нижняя часть. Почитать подробнее про тени можно тут.

    Сложные градиенты делаются несколькими тенями:

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

    Способ придумался когда мне захотелось сделать демо CSS-анимации, в котором надо было менять цвет неба в зависимости от времени суток:

    Тени отлично справились. Я думаю, что способ может быть полезен в некоторых случах и вполне имеет право на сущестование.

    Как сделать градиенты | CSS

    Градиент в CSS — это постепенный переход одного цвета в другой между двумя точками.

    Линейный градиент linear-gradient

    линейный градиент распространяется (чаще сверху вниз) по линии

    состоит из двух и более оттенков

    Радиальный градиент radial-gradient

    радиальный градиент распространяется по окружности

    состоит из двух и более оттенков

    Как объединить градиенты CSS

    Пример

    23 комментария:

    Андрей Opera 11.10:
    background-image:-o-linear-gradient(top,#000,#FFF); NMitra Спасибо большое, Андрей! Добавила замечание в статью. Анонимный у вас с версткой беда, код на текст наезжает ff 17.0.1 NMitra Спасибо! Обязательно исправлю. Это получилось после того, как поменяла дизайн. Не хватает пока времени. Анонимный ахахахах на твоей иконке как будто человек со своим членом балуется NMitra Такой ассоциации ещё не было. :) Это же фига Анонимный Спасибо, очень помогли! NMitra Пока не осилила статью )) Чуть-чуть осталось Анонимный Спасибо за полезную статью! :) алексей кленов Помогите пожалуйста с градиентом самого текста, а не фона NMitra Только для Хрома http://css-tricks.com/snippets/css/gradient-text/
    Вот пример с тенями http://jsfiddle.net/2GgqR/5/ Oleg Aqausonick Круто. Что ещё можно сказать..) Я даже попытался всё это объединить на одной своей странице. ) http://tambov-computer.ru/information-for-first-web-developers/207-how-to-make-gradient-in-background-css
    ИМХО немного растянуто но всёже круто! :) Спаисбо. Анонимный С градиентом удобно работать в онлайн генераторе.
    http://www.germansoft.ru/lesson/online/css-generation.php Вот тут например. Есть и образцы работ.Прикольно NMitra Вы не правы. Градиенты нужно понять, там не такая уж сложная разметка. А потом можно делать такие вот штуки http://shpargalkablog.ru/2013/02/home-css.html или такие http://shpargalkablog.ru/2011/07/ugol-css.html Анонимный В IE не работает( посоветуйте что можно сделать, пожалуйста) спасибо за полезную статью, очень пригодилась) NMitra Какая версия IE у вас? Вариант — помимо градиента использовать однотонный цвет.

    background-color: red;
    background-image: linear-gradient(#ff0000, #ffff00);

    Есть ещё @supports. С помощью него можно показать как отображать элемент на устройствах, не поддерживающих градиент. NMitra Забыла сказать, раньше вместо linear-gradient использовали изображение jpeg. phpguru Познавательно спасибо! NMitra Сама как начинаю мучить градиенты, бегу к этой статье :) Scarlet Я использую http://gradientgenerator.com Он простой, но содержит все необходимые настройки. NMitra Спасибо за инструмент Анонимный После: «Синтаксис радиального градиента» — «начинаются чудеса», что в мозиле, что в IE. NMitra Спасибо за участие!

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

    Про CSS

    SVG-градиенты

    В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы linearGradient и radialGradient — линейный и радиальный градиенты соответственно.

    CSS-градиенты объявляются прямо в CSS-коде, и код самого градиента потом нельзя переиспользовать. SVG-градиенты устроены иначе: перед использованием градиент должен быть описан с помощью соответствующего тега, и после этого его можно переиспользовать сколько угодно раз. И даже больше: градиенты могут наследовать свойства друг друга (об этом будет рассказано ниже).

    Код самого простого градиента выглядит вот так:

    Обязательный атрибут любого градиента — id .

    Градиент не отображается на странице, пока не будет применён к элементу. Так же, как и обычная заливка или обводка, градиент задаётся с помощью fill или stroke — атрибутом элемента или через CSS.

    Применим градиент к фигуре:

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

    See the Pen NAZgqo by yoksel (@yoksel) on CodePen.

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

    Для управлениям цветами градиента служит элемент stop . Атрибуты:

    • offset — положение цвета
    • stop-color — цвет
    • stop-opacity — прозрачность цвета

    Положение цвета задаётся в процентах или числом от 0 до 1 (50% и .5 будут работать одинаково). Цвет и положение цвета указывать обязательно.

    Интересно, что в отличие от CSS-градиентов, цвета SVG-градиентов можно анимировать (в данном случае, с помощью CSS):

    Линейный и радиальный градиенты имеют несколько общих свойств, но различаются способами, которыми задаются размер и направление градиента. Рассмотрим их поподробнее.

    Линейный градиент

    Задаётся с помощью тэга linearGradient .

    Вектор градиента задаётся с помощью атрибутов x1 , y1 , x2 и y2 .

    x1 и y1 задают координаты начала вектора, x2 и y2 — координаты конца (похоже на рисование линии с помощью тега line ).

    Если координаты не заданы, рисуется горизонтальный градиент слева направо.

    Кнопки вверху демо переключают свойство gradientUnits , отвечающее за систему координат, подробнее о нём будет рассказано ниже.

    Радиальный градиент

    Задаётся с помощью тега radialGradient .

    Параметры градиента задаются с помощью тех же атрибутов, что определяют свойства круга (элемента circle ): центр фигуры задаётся атрибутами cx и cy , а радиус — атрибутом r :

    Если какой-то из этих атрибутов не задан, ему присвоится значение по умолчанию, равное 50% .

    Помимо этого, у радиального градиента есть пара специфических свойств: fx и fy . Они позволяют сдвинуть только центр градиента, не затрагивая расположение конечных цветов:

    Если эти атрибуты не заданы, их значения по умолчанию будут равны cx и cy соответственно.

    Общие свойства градиентов

    gradientUnits

    Это очень важное свойство, оно задаёт систему координат для атрибутов, отвечающих за направление и размеры градиента ( x1 , y1 , x2 и y2 для линейных градиентов и cx , cy , r , fx и fy для радиальных).

    objectBoundingBox — координаты рассчитываются относительно объекта, к которому применяется градиент. Значение по умолчанию. userSpaceOnUse — координаты рассчитываются относительно системы координат всего SVG-элемента.

    Помимо того, что при переключении gradientUnits градиент может менять своё положение из-за смены системы координат, это свойство также может существенно влиять на отрисовку градиента для фигур с разными шириной и высотой (например, вытянутый прямоугольник или эллипс).

    При значении userSpaceOnUse цвета линейного градиента всегда будут перпендикулярны основному вектору, а радиальный градиент будет иметь форму круга. Но если градиент задан вытянутой фигуре, а значение gradientUnits равно objectBoundingBox , градиент пытается уместиться в фигуру целиком и подвергается искажениям. Особенно это заметно на радиальных градиентах:

    У линейных градиентов в этом случае меняется угол расположения цветов градиента относительно его вектора:

    Так что даже если системы координат фигуры и SVG-элемента совпадают, из-за разных значений gradientUnits градиент может выглядеть по-разному.

    gradientTransform

    Атрибут позволяет задать трансформациии градиента:

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

    Для градиентов, как и для всех прочих элементов, по умолчанию трансформации производятся относительно верхнего левого угла документа. Если требуется переопределить центр трансформации, нужно задать transform-origin . Явно в атрибуте его можно задать только для rotate (например, rotate(180, 100, 100) , два последних числа — это оно), для других трансформаций transform-origin будет работать только если он вместе с трансформацией задан в CSS. Но gradientTransform нельзя задать через CSS, следовательно transform-origin так тоже задать не получится. В этом случае можно использовать центрирование через translate (за подсказку спасибо @AmeliasBrain):

    В случае с радиальным градиентом вместо scale будет удобнее управлять радиусом градиента.

    spreadMethod

    Этот атритбут управляет поведением градиента, если градиент меньше, чем область отрисовки.

    pad — свободное пространство заполняется крайними цветами. Значение по умолчанию. reflect — градиент отражается. repeat — градиент повторяется.

    spreadMethod не работает в Safari. Если надо чтобы везде работало, линейные повторяющиеся и отражённые градиенты можно имитировать с помощью паттернов, а повторение радиальных всё-таки придётся прописывать руками.

    Этот атрибут позволяет градиентам заимствовать друг у друга цвета и свойства. Если в градиенте, содержащем атрибут xlink:href , не заданы цвета, они унаследуются из градиента по ссылке. Также из заданного градиента унаследуются все свойства, которые не переопределены в текущем градиенте. При этом радиальные градиенты могут наследовать цвета и свойства линейного, и наоборот.

    Вот пример использования:

    Код в действии, радиальный градиент справа унаследовал цвета линейного градиента слева:

    В этом демо к градиенту слева применяется трансформация, и она также наследуется градиентом справа.

    Подводные камни

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

    К сожалению, все самые удобные и интересные способы не очень хорошо поддерживаются браузерами. Так, в CSS запись вида fill: url(#grad); подразумевает, что градиент с таким ID нужно искать в текущем документе. В Хроме, Опере и Сафари всё так и происходит, однако Firefox начинает искать градиент относительно расположения файла со стилями, и ожидаемо ничего не находит. Можно привести ссылку в CSS в соответствие с адресом страницы, но это не поможет, если страниц больше одной.

    Запись вроде fill: url(svg-with-gradients.svg#gradient); указывает, что градиент нужно брать из внешнего файла, и это было бы суперудобно, но, к сожалению, работает только в Firefox.

    Таким образом, самый надёжный способ — это задавать градиент используя атрибуты элемента.

    Примеры использования

    SVG-градиенты сами по себе дают интересные возможности оформления, но ещё интереснее то, как они работают в сочетании с масками. Например, используя маски и градиенты можно сделать вот такие мыльные пузыри:

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

    Или переливающийся текст:

    Анимацию цветов можно сделать с помощью CSS, трансформации можно добавить только с помощью JavaScript (я это делаю с помощью библиотеки GSAP).

    Илон Маск рекомендует:  Что такое код mb_strlen
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL