CSS-градиенты


Оглавление (нажмите, чтобы открыть):

CSS-градиент

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

Градиент может быть задан в background, background-image, border-image, content и list-style-image.

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

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

Пример

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

Пример

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

Пример

Ключевые слова to top right не аналогичны углу 45deg:

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

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

Пример

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

Пример

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

Пример

Если каждый последующий цвет начинать с конца предыдущего цвета, и применить свойство background-size, то получится полосатый фон.

Пример

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

Пример

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

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

Пример

Цветов в радиальном градиенте, как и в линейном, может быть несколько.

Пример

Форма градиента определяется ключевыми словами circle или ellipse (по умолчанию).

Пример

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

Пример

Положение центра радиального градиента можно указать в пикселях, процентах и с помощью ключевых слов: left top, top, right top, left, center (по умолчанию), right, left bottom, bottom, right bottom. Впереди ставится ключевое слово at.

Пример


Размер градиента можно указать в пикселях, процентах (только для ellipse) и с помощью ключевых слов. Если указано одно значение, то это радиус круглого градиента. Если указано два значения, то первое задает ширину градиента, а второе – высоту.

Пример
Ключевые слова, задающие размер радиального градиента:
closest-side Градиент распространяется до ближней стороны элемента.
farthest-side Градиент распространяется до дальней стороны элемента.
closest-corner Градиент распространяется до ближнего угла элемента.
farthest-corner Градиент распространяется до дальнего угла элемента.
Пример closest-s >
Пример closest-corner и farthest-corner

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

Пример

Используя свойство background-size, узор радиального градиента можно размножить.

Пример

Градиент в виде концентрических кругов создается с помощью функции повтора радиального градиента repeating-radial-gradient().

Пример

Используя различные градиенты и их сочетания, можно получить интересные эффекты. Например:

Поддержка CSS-градиентов современными браузерами достаточно хорошая.

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

Линейный градиент CSS — это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .

Синтаксис CSS linear-gradient

  • позиция — указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
    • to top — переход снизу вверх (0deg)
    • to left — переход справа налево (270deg)
    • to bottom — переход сверху вниз (180deg)
    • to right — переход слева направо (90deg)
    • to top left — переход правого нижнего угла к левому верхнему
    • to top right — переход от левого нижнего угла к правому верхнему
    • to bottom left — переход от правого верхнего угла к левому нижнему
    • to bottom right — переход от левого верхнего угла к правому нижнему

    Помимо точных значений можно указать угол наклона в deg

  • цвет1 — начальный цвет
  • цвет2 — конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).

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

Как сделать нелинейное изменение градиента

Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например

Для браузеров нужно задавать это свойство с вендорными префиксами: -moz-,-webkit-, -ms-, -o

Просто, свежо, красиво: CSS-градиенты

В этой статье я расскажу, как создать градиент с помощью CSS gradient . Градиенты могут быть применены к любому элементу с помощью свойства background или background-color .

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

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

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


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

linear gradient CSS плавно переводит один цвет в другой по прямой линии. Синтаксис следующий:

Замените цвет 1 и цвет 2 обозначениями цветов по своему выбору: распознаваемое имя цвета или шестнадцатеричный код. А затем разделите два цвета запятой.

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

Различные варианты

Описанный выше случай, в котором мы объявляем в коде два цвета, представляет собой минимальный объем кода, который нужен для создания CSS background gradient .

Направления градиента

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

Есть несколько способов, с помощью которых это можно сделать. Три приведенных выше градиента были созданы с помощью следующего кода:

Горизонтальные CSS gradient создаются путем указания направления ( слева или справа ) перед объявлением цветов. Таким же способом можно указать top или bottom .

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

  • для Safari ( -webkit-linear-gradient ) укажите угол, в котором начинается цвет 1 , например: top left ;
  • для Opera и Firefox ( -o-linear-gradient и -moz-linear-gradient ) укажите угол, в котором заканчивается цвет 2 , например: bottom right ;
  • для всех остальных браузеров ( то, что мы обозначили как «Стандартный синтаксис» ) укажите угол, в котором заканчивается цвет 2 , со словом « to «, например: to bottom right .

Определенные углы также можно задать, указав величину угла с единицами измерения « deg » ( без пробела ), например: 60deg . Ноль градусов дает вертикальный градиент, начинающийся снизу, а градусы вращают его по часовой стрелке на 360 градусов.

Несколько переходов цветов

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

Также можно указать, где вы хотите разместить переходы цветов, добавив после цвета значение в процентах или пикселях через пробел. Например, я создал градиент, в котором красный цвет начинает переходить в желтый на 30% ширины, а затем желтый переходит в зеленый на 70% ширины:

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

Также можно указать точки перехода с использованием пикселей вместо процентов ( например: #c94A4a 100px ). Но не используйте и пиксели, и проценты в одной строке кода.

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

Другим видом градиента является radial gradient CSS , который начинается в центре и переходит в другой цвет по краям элемента:

Радиальный градиент задается значением radial-gradient , а не linear-gradient . Первый цвет начинается в центре и переходит в другой цвет по краям. Можно использовать несколько цветов и указать, где должен происходить переход. Установить направление градиента сложно, поскольку он распространяется во всех направлениях.

Если задать радиальный CSS gradient внутри фигуры, которая не является кругом, градиент будет корректироваться так, чтобы внешний цвет заканчивался по краям фигуры равномерно:

Данная публикация представляет собой перевод статьи « Easy, Breezy, Beautiful: CSS Gradients » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.

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

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

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

Фоновый градиент на блоке

Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:

Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:

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


Несколько опорных точек

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

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

Длина переходов

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

В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .

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

Вендорные префиксы

Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:

  • -webkit- — префикс для Chrome, Safari, Android;
  • -moz- — префикс для Firefox;
  • -o- — префикс для Opera.

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

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

Поддержка Internet Explorer

К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.

Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .

Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.

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

    CSS gradients let you display smooth transitions between two or more specified colors.

    CSS defines two types of gradients:

    • Linear Gradients (goes down/up/left/right/diagonally)
    • Radial Gradients (defined by their center)

    CSS Linear Gradients

    To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

    Syntax

    Linear Gradient — Top to Bottom (this is default)

    The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

    Example

    Linear Gradient — Left to Right

    The following example shows a linear gradient that starts from the left. It starts red, transitioning to yellow:

    Example

    Linear Gradient — Diagonal

    You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

    The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow:

    Example

    Using Angles

    If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

    Syntax


    The angle is specified as an angle between a horizontal line and the gradient line.

    The following example shows how to use angles on linear gradients:

    Example

    Using Multiple Color Stops

    The following example shows a linear gradient (from top to bottom) with multiple color stops:

    Example

    The following example shows how to create a linear gradient (from left to right) with the color of the rainbow and some text:

    Example

    Using Transparency

    CSS gradients also support transparency, which can be used to create fading effects.

    To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

    The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

    Example

    Repeating a linear-gradient

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

    Example

    A repeating linear gradient:

    CSS Radial Gradients

    A radial gradient is defined by its center.

    To create a radial gradient you must also define at least two color stops.

    Syntax

    By default, shape is ellipse, size is farthest-corner, and position is center.

    Radial Gradient — Evenly Spaced Color Stops (this is default)

    The following example shows a radial gradient with evenly spaced color stops:

    Example

    Radial Gradient — Differently Spaced Color Stops

    The following example shows a radial gradient with differently spaced color stops:

    Example

    Set Shape

    The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

    The following example shows a radial gradient with the shape of a circle:

    Example

    Use of Different Size Keywords


    The size parameter defines the size of the gradient. It can take four values:

    Example

    A radial gradient with different size keywords:

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

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

    Repeating a radial-gradient

    The repeating-radial-gradient() function is used to repeat radial gradients:

    Example

    A repeating radial gradient:

    Test Yourself with Exercises!

    CSS Gradient Properties

    The following table lists the CSS gradient properties:

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

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

    Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

    • Для этого не существует простого и очевидного CSS API.
    • Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.

    Выглядеть это будет как-то так:

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

    Вот пример Стивена Шоу, закрепляющий border-radius :

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

    Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .

    Читают сейчас

    Похожие публикации

    • 5 марта 2013 в 17:01

    Полезные техники HTML, CSS и JavaScript

    HTML и CSS безумие [перевод]

    [Перевод] CSS Filters

    Вакансии

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Комментарии 12


    Исправили 🙂 Но вот если серьёзно — у меня на телефоне есть 2 приложения «часы», 2 приложения «сообщения», 2 магазина приложений, 2 браузера и ещё много чего по 2. Причём самсунговские ещё и не удаляются на стандартной прошивке.

    Я думаю рано или поздно мобильные телефоны придут к чему то наподобие диалога установки браузеров в windows — включаешь новый телефон и оно тебя спрашивает что конкретно ставить

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

    И Chrome, во избежание дублирования приложений, с самсунгофона, насколько это позволяет утверждать мой личный опыт, штатно выпиливается — при этом вместо него автоматически устанавливается Android System WebView, но это нужный компонент, который, как я понял, используется разными приложениями, которым может потребоваться отображать веб-контент.

    Вопрос, а что, чистый css без синтаксиса «sass» и «less» уже больше не котируется? По такой логике вы могли бы его еще сжать и обфусцировать.

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

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

    Взгляд на CSS3 градиент (линейный и радиальный градиенты)

    Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

    Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.


    В общем случае синтаксис градиента (линейного) выглядит так:

    Итак, давайте обо всем по порядку.

    Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

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

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

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

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

    Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

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

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

    Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента ( circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

    Если не указывать форму, то по-умолчанию будет установлен эллипс.

    Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами ( top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

    • По центру вверху — top — 50% 0%;
    • В левом верхнем углу — left top — 0% 0%;
    • В правом верхнем углу — right top — 100% 0%;
    • По центру — center — 50% 50%;
    • Слева по центру — left center — 0% 50%;
    • Справа по центру — right center — 100% 50%;
    • По центру снизу — bottom — 50% 100%;
    • В левом нижнем углу — left bottom — 0% 100%;
    • В правом нижнем углу — right bottom — 100% 100%.

    Вот пример с процентами:

    Первое значение по оси Х второе по У.

    Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

    Значение Описание
    closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ). Примеры чуть ниже.
    farthest-side Размер также рассчитывается из расстояния, но уже до дальних сторон.
    closest-corner Теперь в качестве ориентира используются ближние углы.
    farthest-corner Рассчитывается из расстояния до дальних углов.

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

    Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

    А теперь до дальних сторон:

    Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

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

    Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

    В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

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

    Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

    Кроссбраузерность

    К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих ( -webkit- , -moz- , -ms- и -o- ). Поэтому синтаксически правильным является вот такое описание градиента:

    Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

    Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

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

    Где 33 сразу после решетки это процент насыщенности цвета.

    Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

    Мастер Йода рекомендует:  Интересные проекты игры в графике активности GitHub

    Добавить комментарий