repeating-linear-gradient() в CSS


Содержание

CSS repeating-linear-gradient() Function

The CSS repeating-linear-gradient() function allows you to create a linear gradient that repeats over and over again infinitely in both directions.

CSS gradients allow you to apply multiple background colors to an element that blend from one color to the next.

Repeating linear gradients are linear gradients where the color stops are repeated infinitely in both directions.

Here’s an example:

To create a repeating linear gradient, use the repeating-linear-gradient() function as a value to any property that accepts images (for example, background-image , background , or border-image properties). CSS gradients use these properties to build an image of the specified gradient.

Repeating linear gradients work the same way that (non-repeating) linear gradients work, except that with repeating linear gradients, the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.

Setting the Angle of a Repeating Linear Gradient

Repeating linear gradients are the same as non-repeating linear gradients when it comes to setting the angle.

You can set the angle of the gradient line so that the gradient runs along that angle. You can specify this angle in degrees (e.g. 45deg , 90deg , 180deg ) or with one of the keywords for specifying the angle (such as to top , to bottom , to top left , etc).

The previous example uses the default direction of to bottom , which results in the gradient repeating vertically.

Here’s an example of using the to top right keyword:

Keywords can specify a side of the box (e.g. to top ) or a corner (e.g. top top right . See Possible Values below for a full list of available keywords.

Creating Smooth Transitions

The previous examples use sharp transitions between the last color of a gradient and the first color of the next one.

You can change this to use smooth transitions between these colors if required. This will create more of a «blurred» effect between the colors. All you need to do is make the start color the same as the end color.

The following example is exactly the same as the previous one, except in this one I’ve added orange to the start of the color stops.

Creating Stripes

You can use the «sharp transition» technique to create patterns that wouldn’t normally be associated with gradients.

For example, you can use repeating linear gradients to create stripes. Like this:

Check out these CSS patterns if you’re interested in this concept.

Official Syntax

The repeating-linear-gradient() function uses the same syntax as the linear-gradient() function, which is as follows:

And here’s the syntax for color stops:

Possible Values

As indicated in the official syntax, the repeating-linear-gradient() function accepts the following values:

Specifies an angle for the direction of the gradient. For example, 45deg .

-moz-repeating-linear-gradient

The CSS -moz-repeating-linear-gradient Mozilla extension property works similarly to the standard linear gradients as described by -moz-linear-gradient , but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop’s position and the first one’s position.

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background . You specify a gradient value instead of an image URL.

CSS repeating-linear-gradient() Function

Example

A repeating linear gradient:

More «Try it Yourself» examples below.

Definition and Usage

The repeating-linear-gradient() function is used to repeat linear gradients.

Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Function
repeating-linear-gradient() 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-

CSS Syntax

Value Description
angle Defines an angle of direction for the gradient. From 0deg to 360deg. Default is 180deg.
side-or-corner Defines the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
color-stop1, color-stop2. Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

More Examples

Example

Different repeating linear gradients:

#grad1 <
background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
>

#grad2 <
background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
>

#grad3 <
background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
>

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Подборка любимых градиентов

by Andrej — Category Обзоры on 24/08/2020

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

  • Что такое градиент?
  • Форма записи градиентов в css
  • Написание цвета градиентов
  • Градиенты с изображениями
  • Градиент для текста
  • Сайты-генераторы градиентов

Сегодня мало кто не знает, что такое градиент, но для галочки, давайте вспомним.

Что такое градиент?

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi , значение которой меняется от одной точки пространства
к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении

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

Исходя из этого, давайте посмотрим на пример.

Способ записи градиентов в css

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

Какой способ записи использовать — решать вам.

Возвращаемся к примеру. В нем мы указали три значения свойств background :

  • 1. Каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
  • 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ] , где угол измеряется в deg, то есть — градус, или вторым способом
    — указанием позиции от и до. Например, to top , to right , to bottom left и т.д.
  • Значение цвета #****** , которым будет начинаться и заканчиваться градиент.

Написание цвета градиентов

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

  • Hex Color Code — #000000 или сокращением #000;
  • RGB Color Code — rgb(0, 0, 0);
  • Color Name — black;
  • HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

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

Градиенты с изображениями

Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background.

Давайте посмотрим на пример.

В нем мы создали градиентный фон (код 1) и добавили изображение, с наложенным на него градиентом (код 2).

Градиент для текста

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

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode

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

  • background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
  • mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
  • isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.

Давайте немного поговорим о первом. Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный
синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели— паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

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

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

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:

Результат превосходит все ожидания,

Эффект ночного видения

Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения. Возьмем обычное изображение и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient

И вот результат:

Градиент для border через border-image

Давайте создадим пустой div и сделаем ему градиентную рамку.

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

В итоге наш блок будет выглядеть вот так:

Сайты-генераторы градиентов

Здесь небольшая подборка сайтов, позволяющих генерировать градиенты, делать из них canvas, png и svg форматы и копировать для установки в проекты.

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

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Возможно Вас также заинтересует…

Уважаемые дизайнеры, программисты и разработчики! У меня лежат два инвайта на Dribbble. К сожалению, сейчас…

В разработке интернет-проектов, как и в промышленности активно используется термин ЧПУ. Однако здесь он не…

Привет, дорогие читатели! Эта статья может пригодиться веб-мастерам, использующим в работе JSFiddle. В ней я…

Изготовление сайта — это еще не гарант привлечения посетителей. И даже если привлечь их получится,…

Как сделать полоски при использовании repeating-linear-gradient тоньше?

Всем добрый день. Прощу помогите разобраться с repeating-linear-gradient. Делаю фон футера полосатым, но никак не могу настроить толщину полосок. Вот пример, что у меня получилось, но в самом макете высота футера не задается.

Хотелось бы, чтобы получились тонкие полоски на небольшом расстоянии, 20-30px.
Спасибо заранее за помощь)

  • Вопрос задан более трёх лет назад
  • 1375 просмотров

Технически можно было бы сделать так

Однако, в webkit будет совсем не то, что ожидалось.
Судя по всему, это — баг движка (очередной — на заметку тем, кто по инерции говорит о багнутости Firefox).
Исправляется указанием размера картинки. Остаётся только учесть, что вы указываете размер не исходной, а уже трансформированной картинки. Так, при повороте на 45° размер картинки должен быть в √2 больше, чем исходный размер.

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

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

Как задать градиент для 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-градиентов

    Дата публикации: 2020-08-09

    От автора: под «изображениями CSS» я имею в виду изображения, созданные с использованием только HTML-элементов и CSS. Они выглядят так, как если бы они были SVG, нарисованные в Adobe Illustrator, но они были сделаны прямо в браузере. Некоторые из тех методов, которые я видел, используются возиться с пограничными радиусами, тенями блоков, а иногда и с clip-path. Вы можете найти множество замечательных примеров, если вы будете искать ежедневные изображения css на CodePen.

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

    Метод

    Понимание синтаксиса сокращенного background а также того, как работают градиенты CSS — это практически все, что вам нужно, чтобы нарисовать что-либо в одном элементе. В качестве обзора приведены следующие аргументы:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Они могут встречаться в любом порядке, за исключением того, что между position и size должно быть /. Мы должны сохранить эти два аргумента в этом порядке, иначе мы получим неожиданные результаты. Не все они должны быть включены, и для этой цели мы не будем использовать аргументы color, repeat, attachment, origin или clip. Это оставляет нам image, size и position. Однако, поскольку фоны повторяются по умолчанию, мы должны установить background-repeat: no-repeat; прямо под всем background (если некоторые фоны должны быть повторены, мы можем использовать repeating-linear-gradient() и repeating-radial-gradient()). В этом случае скелет CSS будет следующим:

    Мы даже можем использовать несколько наборов фоновых аргументов! Поэтому мы можем складывать и разделять их запятыми следующим образом:

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

    Рисование

    Мы будем использовать Sass (SCSS) для рисования этих изображений, чтобы мы могли использовать переменные для цветовой палитры. Это сделает код короче, легче читается и изменяет затемненные или более легкие варианты цветов. Вместо этого мы могли бы использовать переменные в обычном CSS и забыть Sass, но из-за отсутствия поддержки Internet Explorer, давайте придерживаться Sass. Чтобы объяснить, как это работает, мы будем экспериментировать с фигурами, используя как линейные, так и радиальные градиенты.

    Настройка цветовой палитры

    Наша палитра будет состоять из цветов RGB или HSL. Я объясню позже, почему сохранить цвета в любом из этих форматов. В этом примере мы будем использовать RGB.

    Что мне нравится делать, чтобы код был коротким и легким для чтения, используйте как минимум одну букву для представления каждого цвета (например, $r для красного). Если вы используете более темные или более светлые оттенки одного цвета, я добавляю d перед базовой буквой или буквами для темного или l для света. Я бы использовал $dr для темно-красного и $lr для светло-красного. Если есть потребность в более чем двух других оттенках, я добавляю число в конце, чтобы указать уровень тени. Например, $dr1 для темно-красного, $dr2 для более темного красного и $lr1 для светло-красного, $lr2 $lr1 для светло-красного. Такая палитра будет выглядеть так (с темными сначала, нормальными и последними)

    Настройка масштаба и холста

    Мы будем использовать em единицы для размеров изображения, чтобы изображение можно было легко изменить пропорционально. Так как 1em равно размеру шрифта элемента, каждая единица изображения будет соответствующим образом скорректирована, если изменится. Давайте установим размер шрифта 10px и установим ширину и высоту 24em. Единицы 10px легче всего думать, потому что если вы мысленно выполните математику, вы сразу получите 240 × 240 пикселей. Затем, чтобы увидеть, где находятся края холста, мы будем использовать серию 1px grey.

    Однако помните об использовании меньших размеров шрифта; у браузеров минимальная настройка размера шрифта (по причинам доступности). Если вы установите размер шрифта 4px, а минимальный — 6px, он будет принудительно установлен на 6px.

    Кроме того, вы можете включить отзывчивость, просто используя единицы calc() и viewport. Возможно, мы сможем использовать что-то вроде calc(10px + 2vmin) если calc(10px + 2vmin) , но давайте придерживаться 10px.

    Рисование фигур

    Здесь начинается интересная часть. Чтобы нарисовать квадрат размером 8 × 8 мкм в центре, мы используем linear-gradient() с двумя одноцветными остановками.

    Чтобы превратить его в нечто более похожее на трапецию, установите угол 60 градусов. В то же время добавим $T для transparent нашей палитры, а затем разместим обе стопы для $r и $T на 63% (прямо перед тем, как нижний правый угол обрезается).

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

    Чтобы исправить это, мы слегка корректируем одну из стопов (на 1% или примерно так), чтобы край был достаточно гладким. Итак, давайте изменим $r на 63% до 62%.

    Это будет проблемой с круглыми краями, а также при работе с радиальными градиентами, которые мы увидим позже. Если вы просматриваете это в браузере, отличном от Safari, все выглядит великолепно даже при переходе на непрозрачный цвет (скажем, оранжевый). Проблема перехода на transparent в Safari заключается в том, что вы заметите немного черной подкладки на наклонной стороне.

    Это связано с тем, что transparent ключевое слово в Safari всегда является черной прозрачностью, и в результате мы видим черный. Я действительно хочу, чтобы Apple исправила это, но они никогда не будут. В настоящее время добавим новую переменную $redT для прозрачности красного цвета под $r. Отбросьте $T мы использовали для transparent поскольку мы больше не будем его использовать.

    Затем заменим transparent на $redT. Это позаботится о нашей проблеме Safari!

    Если вам интересно, почему мы не использовали шестнадцатеричные цвета, Internet Explorer и Edge не поддерживают нотации #rgba и #rrggbbaa (ага, hex имеет альфа-канал с конца 2020 года, если вы никогда не знали), и мы хотим, чтобы это работало как кросс-браузер, насколько это возможно. Мы также хотим оставаться в соответствии с нашим выбором цветового формата.

    Теперь давайте переместим форму вертикально на 20% и нарисуем оранжевый круг тех же размеров. Кроме того, добавьте еще одну переменную для своей прозрачной версии. Для гладкого края вставьте 1%-ный зазор между твердым и прозрачным апельсинами.

    Чтобы поддерживать согласованность с нашим размером, вторая остановка цвета должна составлять 50% вместо 100%.

    Позиционирующие фигуры

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

    Красный квадрат заканчивается полностью на холсте (очерчен), а правая сторона оранжевого квадрата касается другой стороны. Использование фиксированных единиц — это как размещение абсолютно позиционированных элементов или рисования фигур в холсте HTML5. В этом смысле верно, что точка происхождения находится в левом верхнем углу. При использовании процентов и заданного размера фона, div получает «поддельное заполнение» половины размера фона. В то же время точка происхождения фона центрирована (не путать с background-origin, что касается углов блока).

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

    Если мы перепишем фон, чтобы положение и размер были после градиента и использовались на 100% 100% at center, они будут расположены как линейные градиенты. Красная выходит наружу, а оранжевая — к правому краю. «Поддельное заполнение» происходит еще раз оранжевым цветом.

    Нет единого правильного способа позиционирования фигур, но для размещения его как абсолютно или фиксированного позиционного элемента HTML используйте фиксированные единицы. Если вам нужен быстрый способ разместить фигуру (используя параметры position / size) в мертвой position / size оптимальным вариантом будет 50%, так как начало координат будет его центром. Используйте 100%, если он должен касаться самой правой стороны.

    Калибровочные фигуры

    Размер в CSS-фонах работает так, как мы ожидали, но на него все еще влияет тип устройства, используемого для фиксированных позиций или процентов. Если мы снова возьмем наши квадраты и изменим их ширину на 10em, красный будет расширяться вправо, а оранжевый будет расширяться в сторону.

    Если мы использовали em единицы для y-позиции, форма будет расти вниз или сжиматься вверх после изменения высоты. Если мы будем использовать процент, то он будет расширяться как по вертикали. Некоторое время назад мы рассмотрели два способа рисования кругов с радиальными градиентами. Первый способ — указать ширину и высоту между ( и at и затем положением после этого:

    Второй способ — использовать 100% 100% в центре, а затем дать положение и размер:

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

    Первый способ занимает весь div, так как не было реального фонового положения или размера.

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

    Предположим, что мы заменили $rT на $o. Вы увидите, что оранжевый будет покрывать то, что было белым или фигур под ним (если мы добавили какие-либо) для первого пути. Используя второй способ, вы легко заметите рамку, открытую оранжевым.

    Кроме того, цель 100% 100% вместо использования circle или ellipse — позволить кругу занимать всю ограничительную рамку. Это даже дает нам полный контроль над его размерами. Таким образом, он останется таким же, если вы измените 50% 50% позицию на что-то еще. Если используется одно из двух ключевых слов, край круга останавливается только около 71% пути при центрировании и становится более искаженным, если его положение отрегулировано. Например, вот что происходит, когда мы меняем положение x на 0 для circle и ellipse:

    В конечном итоге вы можете пересмотреть синтаксис как radial-gradient(width height at xy) или radial-gradient(100% 100% at x-in-bounding-box y-in-bounding-box) xy / width height. Если вы рисуете только круг или овал, вы можете упростить код с первого взгляда. Если вы рисуете часть круга или часть кольца, тогда вступает в игру второй способ. В примерах, которые мы создадим дальше, будет много применений.

    Примеры

    Готовы сейчас нарисовать что-то реальное? Мы будем проходить три примера шаг за шагом. Первые два будут статическими — одно с большим количеством полукругов, а другое — с закругленными прямоугольниками. Последний пример будет меньше, но сфокусирован на анимации.

    Статическое изображение

    Этот зонтик будет нашим первым статическим изображением:

    Мы будем использовать палитру с красным ($r и $rT), белым ($w и $wT), оранжевым ($o и $oT) и темно-оранжевым ($do и $doT).

    Линейный и радиальный градиент на CSS, как сделать градиент на сайте

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

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

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

    Для создания линейного градиента существует значение linear-gradient, для радиального radial-gradient. Кроме того, существуют две функции для повтора градиента repeating-linear-gradient и repeating-radial-gradient. Отдельного свойства для добавления градиента не предусмотрено, он считается фоновым изображением, поэтому добавляется через свойства:

    • background,
    • background-image,
    • border-image,
    • list-style-image.

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

    Для указания позиции вначале пишется to, а затем добавляются ключевые слова top, bottom, left, right и их сочетания, порядок слов не важен. Также, вместо ключевого слова можно задавать угол наклона градиентной линии, показывающий направление градиента. Сначала пишется положительное или отрицательное значение угла, после чего к нему добавляется deg, пример — 30deg.

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

    Что касается радиальных градиентов, то они похожи на линейные градиенты. Чем отличаются линейный и радиальный градиент? Тем, что в радиальных один цвет переходит в другой словно круги по воде вокруг точки, а не вдоль прямой линии. Есть две формы радиального градиента: circle (круг) и ellipse (эллипс). Они различаются внешним видом, по умолчанию используется форма эллипс. Также с формой градиента можно задать и его размер, зависящий от применяемых ключевых слов — размер указывается через пробел после формы градиента.

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

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

    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

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

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

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

    Linear-gradient

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

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

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

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

    Ключевыми словами: to top = 0deg ; to right = 90deg ; to bottom = 180deg — значение по умолчанию; to left = 270deg .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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