Линия-градиент. Свойство background-image для линии


Содержание

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

Взгляд на 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. Спасибо!

Линейный градиент 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

Линейный градиент , как делаются чёткий градиент по схеме?

Вопрос с mail.ru но меня заинтересовало именно реализация !

Каким образом можно реализовать такой градиент :

я пытался так но получается размытый градиент:

Как это реализовать правильно согласно схеме ?

3 ответа 3

Чтобы краница была чёткой, надо одну и ту же позицию указать дважды подряд:

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

А чтобы эта штука повторялась, надо использовать repeating-linear-gradient :

В вашем случае вы тянете градиент под углом 45 градусов, до 20% красный, от 20% до 30% желто красный(вот тут как раз перелив) от 30% желтый. А вам надо например: под углом 45 градусов, красный до 25%, желтый от 25%, желтый до 50%, красный от 50%, красный до 75%, желтый от 75%, понимаете?) вот так:

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

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

    Дата публикации: 2014-04-28

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

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

    Градиенты – это фоновое изображение

    Тогда как объявления сплошного цвета использует свойство background-color в CSS, градиенты применяют background-image. Оно очень удобно по нескольким причинам, которые мы объясним позже. Условно обозначаемое свойство background поймет, что вы имеете в виду, если заявить из них что-то одно.

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

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

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

    Возможно, самый привычный и нужный вид градиента — linear-gradient(). Ось координат может идти слева направо, сверху вниз или под любым выбранным вами углом. Если не заявлять угол, то будет подразумеваться сверху вниз:

    Разделенные запятыми цвета отображают обычно применяемый вами цвет: Hex, именованные цвета, rgba, hsla и т.д. Чтобы сделать градиент слева направо, передайте дополнительный параметр в начале функции linear-gradient(), начинающейся со слова to, означающем направление, например to right:

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

    Если бы блок был квадратным, то угол такого градиента стал бы 45°, но это не так. Если нужно гарантировать 45°, можно это заявить:

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

    Также можно заявить, где должен начинаться любой из отдельных цветов. Это называется «цветовыми остановами». Скажем, если вам нужно, чтобы желтый занимал больше всего места, а красный – совсем немного в самом начале, можно сделать color-stop желтого цвета довольно рано:

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

    Браузерная поддержка/Префиксы

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

    Старый: исходный способ, применимый исключительно к WebKit, с такими штуками, как from() и color-stop()

    Подростковый: старая система углов, например, left

    Молодой: свежеиспеченная система углов, например, to right

    А также префиксы. Давайте составим список:


    Chrome

    1-9: Старый, с префиксом

    10-25: Подростковый, с префиксом

    26: Молодой, без префикса

    Safari

    3-: Поддержка отсутствует

    4-5.0: Старый, с префиксом

    6.1: Молодой, без префикса

    Firefox

    3.5-: Поддержка отсутствует

    3.6-15: Подростковый, с префиксом

    16: Молодой, без префикса

    Opera

    11.0-: Поддержка отсутствует

    11.1-11.5: Подростковый, с префиксом, только линейный

    11.6-12: Подростковый, с префиксом, добавлен радиальный

    12.1: Подростковый, без префикса

    15: Молодой, без префикса

    IE

    8-: Поддержка отсутствует

    9: Только фильтры

    10+: Молодой, без префикса (также поддерживается Подростковый с префиксом)

    Android

    2.0-: Поддержка отсутствует

    2.1-3.0: Подростковый, с префиксом

    4.0-4.3: Молодой, с префиксом

    4.4+: Молодой, без префикса

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

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

    iOS

    3-: Поддержка отсутствует

    3.2-4.3: Подростковый, с префиксом

    5.0-6.1: Молодой, с префиксом

    7.0: Молодой, без префикса

    Здесь имеется небольшое наложение. Например, когда браузер поддерживает «молодой» синтаксис, он, возможно, также поддерживает более старые синтаксисы, включающие префикс. Лучше всего поступать так: если поддерживается «молодой», то его и применяйте. Так что, если вам нужна абсолютная глубочайшая браузерная поддержка, линейный градиент будет выглядеть примерно так:

    Тут ужасно много кода. Писать его вручную – это возможные ошибки и большое количество труда. Справиться с ним помогает Autoprefixer, позволяющий отрезать фрагменты кода, когда вы решите, какие браузеры будете поддерживать. Примесь-миксин Compass умеет делать URI данных SVG для IE 9, если вам это важно.

    Фильтры IE

    Internet Explorer (IE) 6-9, хотя и не поддерживает синтаксис градиентов CSS, предлагает программный метод создания фоновых градиентов

    Вот некоторые рассуждения на тему, применять их или нет:

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

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

    Даже хотя фильтры работают только со значениями hex, все равно можно получить alpha-прозрачность, поставив префикс к значению hex с количеством прозрачности от 00 (0%) до FF (100%). Пример:

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

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

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

    Видно, как этот градиент создает фигуру-эллипс, так как элемент не квадратный. Это градиент по умолчанию (с ellipse в качестве первого параметра), но если мы скажем, что хотим окружность, то можем ее сделать:

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

    Здесь возможны значения: closest-corner, closest-side, farthest-corner, farthest-side. О них можно думать так: «Мне нужно, чтобы этот радиальный градиент затухал от центральной точки до __________, приспосабливался и заполнял все вокруг».

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

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

    Браузерная поддержка

    В основном такая же, как у linear-gradient(), за исключением того, что, когда начиналась поддержка градиентов, в очень старой версии Opera были только линейные, а не радиальные. Как и линейный, radial-gradient() претерпел некоторые изменения синтаксиса. И опять здесь: «Старый», «Подростковый» и «Молодой».

    Старый: с префиксом -webkit-, штуки вроде from() и color-stop()

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

    Молодой: многословный первый параметр, типа circle closest-corner at top right

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

    Повторные градиенты

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

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

    Пользуясь repeating-linear-gradient(), не приходится прибегать к подобным хитростям. Размер градиента определяется последним цветовым стопом. Если он происходит на 20px, то размер градиента (который затем повторяется) – это квадрат 20px на 20px.

    Взгляд на 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. Спасибо!

    линейный градиент на фоновом изображении

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

    Вот простой пример, не стесняйтесь спрашивать, не ясно ли что-то:

    Вам нужно добавить to right линию градиента

    Вы можете узнать об этом здесь

    = [left | right] || [top | bottom]

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

    Посмотрите другие вопросы по метке css или Задайте вопрос

    Линейный градиент (linear-gradient) с помощью CSS.

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

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

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

    Значение для свойства background, которое отвечает за создание линейного градиента linear-gradient.

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

    Вот таблица совместимости:

    Полноценная его поддержка появилась только в Internet Explorer 10 версии.

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

    Сейчас общее правило для создания линейного градиента:

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

    1) Ключевым словом (добавляется ключевое слово to + название сторон(ы))

    2) Конкретным значением в градусах

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

    to top или 0deg Снизу вверх.

    to bottom 180deg Сверху вниз.

    to left 270deg Справа налево.

    to right 90deg Слева направо.

    Код примера:


    Внешний вид:

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

    to top left От правого нижнего угла к левому верхнему.

    to top right От левого нижнего угла к правому верхнему.

    to bottom left От правого верхнего угла к левому нижнему.

    to bottom right От левого верхнего угла к правому нижнему.

    Код примера:

    Внешний вид:

    Теперь давайте вернемся к вопросу совместимости в старых браузерах. Как быть в этом случае?

    Предлагаю вашему вниманию конструкцию, которую использую сам.

    Общая формула следующая:

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

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

    Красивый фон градиент. Взгляд на CSS3 градиент (линейный и радиальный градиенты)

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

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

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

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

    div <
    background-image : -webkit-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
    background-image : -moz-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
    background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
    background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;

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

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

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

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

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

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

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

    div <
    background : radial-gradient (circle , #F9E497 , #FFAE00 ) ;
    >

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

    Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (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%.

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

    div <
    background-image : radial-gradient (70% 20% , circle , #F9E497 , #FFAE00 ) ;
    >

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

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

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

    div <
    background-image : radial-gradient (230px 50px , ellipse closest-side, white , blue ) ;
    >

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

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

    div <
    background-image : radial-gradient (230px 50px , ellipse farthest-side, white , blue ) ;
    >

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

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

    div <
    background-image : linear-gradient(top , rgba (255 , 90 , 0 , 0.2 ) , rgba (255 , 174 , 0 , 0.2 ) ) ;
    >

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

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

    div <
    background-image : linear-gradient(top , red , orange , yellow , green , blue , indigo , violet ) ;
    >

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

    div <
    background-image : repeating-radial-gradient (red , blue 20px , red 40px ) ;
    >

    0% , #FFAE00 100% ) ; /* для Firefox */
    background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* для IE 10+ */
    background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* для Opera */
    background-image : linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* стандартный синтаксис */
    >

    div <
    filter : prog >>

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

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

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на

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

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

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

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

    Background-image: linear-gradient(to left, violet, red); Фоновый градиент на блоке

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

    Background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);

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

    Background-image: linear-gradient(-110deg, #ee82ee, #ff0000);

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

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


    Background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);

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

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

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

    Background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);

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

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

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

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

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

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

    Background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);

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

    Поддержка Internet Explorer

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

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

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

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

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

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

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

    linear-gradient

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    radial-gradient

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

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

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

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

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

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

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

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

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

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

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

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

    Пример 1. Градиент

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

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