Html градиентная заливка. Linear-gradient(): линейный градиент в фоне

Телевизоры

Последнее обновление: 21.04.2016

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

Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image .

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

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

Background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением left . Цвета градиента: черный (black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.

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

Webkit- /* Для Google Chrome, Safari, Microsoft Edge, Opera выше 15 версии */ -moz- /* Для Mozilla Firefox */ -o- /* Для Opera старше 15 версии (Opera 12) */

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

Стилизация таблиц в CSS3

Линейный черно-белый градиент

Для установки начала градиента можно использовать следующие значения: left (слева направо), right (справа налево), top (сверху вниз) или bottom (снизу вверх). Например, вертикальный градиент будет выглядеть следующим образом:

Background-image: linear-gradient(bottom,black,white);

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

Background-image: linear-gradient(top left,black,white);

Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента:

Background-image: linear-gradient(30deg,black,white);

После величины углы указывается слово deg .

К примеру, 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он начинается в нижнем левом углу и перемещается под углом 45° в верхний правый угол.

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

Background-image: linear-gradient(top, red, #ccc, blue);

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

Background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

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

С помощью repeating-linear-gradient можно создавать повторяющиеся линейные градиенты. Например:

Background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

В данном случае градиент начинается с левого края элемента с полоски серого цвета (#ccc) шириной 20 пикселей, далее до 30 пикселей идет переход к красному цвету, а затем до 40 пикселей выполняется обратный переход к светло-синему цвету (rgba(0, 0, 126, .5)). После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

Красный

Зеленый

Синий

Красный

Зеленый

Синий

Готовый код градиента 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 или ключами

Gradient1 {
background: linear-gradient(45deg, Aquamarine, GreenYellow);
}

Gradient2 {
background: linear-gradient(to top left, Fuchsia, MidnightBlue);
}

Gradient3 {
background: linear-gradient(to top, SaddleBrown 20%, OrangeRed 50%, Goldenrod 80%);
}

Gradient4 {
background: linear-gradient(to right, LightBlue 20%, LightGreen 20%, Thistle 80%, Wheat 80%);
}

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

Gradient5 {
background: radial-gradient(LightCoral , PapayaWhip);
}

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

Gradient6 {
background: radial-gradient(at top, Turquoise, Azure);
}

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

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

Gradient7 {
background: radial-gradient(40% 50%, MediumPurple, SeaShell);
}

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

Gradient8 {
background: radial-gradient(circle farthest-corner at 100px 50px, Yellow, DimGray);
}

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

Gradient9 {
background: radial-gradient(circle at 70% 10%, LightCyan, Magenta);
}

3). repeating-linear-gradient или repeating-radial-gradient повторяющийся градиент css

Gradient10 {
background: repeating-radial-gradient(circle, MediumSpringGreen, MediumSpringGreen 15px, Pink 15px, Pink 30px);
}

Gradient11 {
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 20px, #465298 10px, #465298 20px);
}

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

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

Создаём CSS-градиенты без картинок

Предположим, что мы хотим сделать градиентный переход в фоне от серого к черному. Для этого корпорация W3 предложила в CSS3 использовать специальную директиву linear-gradient.

Итак, по версии W3 для того, чтобы сделать градиентный фон достаточно написать в селекторе блока:

Background: linear-gradient(start, color1 position1, color2 position2,...,colorN positionN);

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

Очевидно, что цветов и контрольных точек в градиенте может быть много. Параметр start указывает в каком направлении должен распространяться градиент - это может быть или top для вертикально-направленного градиента или left для горизонтально-направленного.

Не все браузеры поддерживают такую фишку, поэтому пока существует ряд ухищрений. Для совсем старых браузеров нужно либо указывать какой-то средний цвет фона (градиента не будет вовсе, но фон не будет белым), или указывать картинку с градиентом (правда, если цель использования linear-gradient на CSS - это сокращение количества загружаемых картинок, то это бесполензно, потому, что во всех браузерах картинка все-равно подгрузится, хоть и будет потом заменена на linear-gradient).
Для IE-подобных браузеров можно использовать градиенты, основанные на фильтрах, а для браузеров на webkit (Safari, Chrome) и gecko (Mozilla), как всегда существует альтернатива: -webkit-gradient и -moz-linear-gradient, которые принимают похожие параметры. Как это всё должно работать смотрите в следующем код-блоке:

Background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); background: -moz-linear-gradient(top, #ccc, #000);

После рендеринга это выглядит вот так.

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

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

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

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

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

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

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

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

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

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

Div { background-image: linear-gradient(black, white); width: 200px; height: 200px; } Попробовать »

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

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

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

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

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

Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to left, black, red); } #two { background-image: linear-gradient(to top left, black, red); } #three { background-image: linear-gradient(65deg, black, yellow); } Попробовать »

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

Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to right, red, blue, yellow); } #two { background-image: linear-gradient(to top left, blue, white, blue); } Попробовать »

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

Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to top right, blue, white 70%, blue); } #two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);} #three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); } Попробовать »

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

Div { margin: 10px; width: 300px; height: 100px; background-color: green; } #one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); } #two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); }

Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах .

В CSS существует два типа градиентов:

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

Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.

linear-gradient

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

  • определить желаемые цвета ;
  • где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
  • в каком направлении должен идти градиент.

Давайте начнём с простого градиента из двух цветов:

Div { background-image: linear-gradient(red, blue); }

Простой вертикальный фоновый градиент.

По умолчанию:

  • направление вертикальное , сверху вниз;
  • первый цвет в начале (вверху);
  • второй цвет в конце (внизу).

Изменение направления

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

  • определить назначение градиента , с помощью таких ключевых слов, как to left top ;
  • определить конкретный угол в градусах, вроде 45deg .

Это направление должно быть установлено перед цветом:

Div { background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; }

Диагональный градиент от левого верхнего угла в правый нижний угол.

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

  • 0deg - снизу вверх;
  • 20deg - немного по диагонали, идущей по часовой стрелке;
  • 90deg - подобно 15 часам, слева направо;
  • 180deg - это значение по умолчанию, сверху вниз.

Div { background-image: linear-gradient(20deg, green, blue); width: 150px; }

Диагональный градиент с углом 20 градусов.

Добавление большего количества цветов

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

  • два цвета : 0% и 100%
  • три цвета : 0%, 50% и 100%
  • четыре цвета : 0%, 33%, 67% и 100%

Div { background-image: linear-gradient(orange, grey, yellow); width: 150px; }

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

Определение конкретных точек цвета

Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета , используя либо проценты (%), либо пиксели (px):

Div { background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px; }

Тоже уродливый градиент, но тут важна идея.

В данных параметрах:

  • у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
  • цвет grey ближе к верху, на 10% вместо 50%;
  • цвет yellow занимает половину градиента, от 50% и до конца 100%.

radial-gradient

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

  • форму : круг или эллипс;
  • начальную точку : которая будет центром круга или эллипса;
  • конечную точку : где будет край круга или эллипса.

Div { background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; }

Это очень похоже на солнце, не так ли?

По умолчанию:

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

Начальная позиция

Начальная позиция работает как background-position . Вы можете установить её через ключевое слово at .

Div { background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; }

Мрачный день.

Конечная позиция

По умолчанию форма завершается в самом дальнем углу . Вы можете выбрать:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

Div { background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; } div:hover { background-image: radial-gradient(farthest-side at 20px 20px, green, blue); }

Наведите указатель мыши на эту зелёную звезду в небе, чтобы увидеть как она расширяется.

Фиксированный размер

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

Div { background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; }

Небольшой фиолетовый диск в море розового цвета.

Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.

© Copyright 2024, pcwe.ru - Портал о персональных компьютерах.