CSS-градиент


Содержание

Создание градиентов. Линейный градиент

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

Градиенты для CSS бывают линейными (linear-gradient) и радиальными (radial-gradient). И если вы знакомы с Photoshop, то наверняка знаете, что это наиболее часто используемые градиенты.

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

Итак, сначала о линейном градиенте.

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

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

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

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

Можно задавать и отрицательное значение, тогда градиент «перевернется», т.е. будет направлен в противоположную сторону.

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

Если вы просто перечисляете цвета через запятую, то количество пространства распределяется между ними поровну. Но вы можете указать в какой точке должен начинаться и заканчиваться цвет. По умолчанию начальная точка задается как 0%, а конечная — как 100%. Поэтому, если вы не планируете ее никуда смещать, можно эти данные не указывать. Записываются значения цвета и значения места расположения через пробел:

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

В чем еще прелесть назначения позиций для градиента? Да в том, что с помощью указаний одних и тех же позиций для разных маркеров можно градиент превратить в . флаг, например, или сделать макет с 2-х или 3-х-колоночной версткой с колонками разного цвета.

Посмотреть результат всех предыдущих экспериментов можно здесь:

Кроссбраузерный линейный градиент

Теперь о многообразии вариантов градиента: для старых браузеров, не поддерживающих градиенты в принципе, нужно указать цвет фона, соответствующий одному из оттенков градиента: background: #b4e391;

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

Изображение в этом случае должно быть размером, например, 30×1920 px, чтобы охватывать большинство современных экранов. Градиент направлен слева направо.

Для Mozilla Firefox версий 3.6-15, Chrome версий 10-25, Safari версий 5.1 — 6 и 7+, Opera версии 11.5 и старше нужно указывать и ввендорные префиксы (-moz-, -webkit-, -o-), и убирать ключевое слово to.

А для IE до версии 10 существует специальный фильтр.

Результат будет выглядеть так:

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

Чтобы не думать о кроссбраузерности, можно воспользоваться отличным редактором-генератором градиента, представляемым сайтом colorzilla.com. Очень наглядно, как в Photoshop, можно выбирать градиенты из набора существующих, изменять цвета и расположения маркеров, менять направление и вид градиента (линейный, радиальный), выбирать формат цвета, задавать прозрачность. И в конце нужно просто скопировать готовый код. Масса удовольствия, причем абсолютно бесплатно.

Кроме того, можно установить расширение от Colorzilla для браузеров Chrome и/или Firefox, и пользоваться еще пипеткой, например, или палитрой цветов, или анализировать цветовую палитру любого сайта. Для этого всего навсего нужно нажать на значок пипетки в правом верхнем углу браузера. Там есть опция CSS Gradient Generator — так вот это прямая ссылка на описанный выше генератор градиента.

CSS Matic Gradients

Еще один отличный сервис для создания градиента — это CSS Matic Gradients. Он предоставляет примерно те же возможности, что и Colorzilla Gradient Generator, но немного иначе. Мне очень нравится ползунок Hue (оттенок), с помощью которого можно легко изменить цвета выбранного градиента, не правя при этом оттенок каждого маркера.

На скриншоте ниже видно, что цвет маркера красный, ползунок Hue сдвинут в левую сторону, в результате получился сине-фиолетовый градиент. Ползунок Lightness позволит сделать градиент темнее/светлее.

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

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

UI Gradients

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

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

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

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

CSS3 Maker

Еще один сервис, на котором вы можете настроить градиент — CSS3 Maker. Он содержит генератор не только градиента, но и других CSS3-свойств. Что касается градиента, то сайт определяет, какой браузер вы используете для серфинга по Интернету и выдает вам код с соответствующим вендорным префиксом (в моем случае -moz-linear-gradient для Mozilla Firefox). Не очень удобно в плане унификации кода. Зато можно поиграться с настройками. И посмотреть заодно, как работают другие свойства.

Blend — Create and customize beautiful CSS3 gradients.

В заголовке сервиса Blend написано «Создавайте и изменяйте красивые CSS3 градиенты». И так оно и есть.

Вы задаете нужные вам цвета, нажимаете на кнопку «Let’s Blend» — и, вуаля, градиент готов.

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

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

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

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

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

Давайте рассмотрим все по порядку.

Градиенты — это изображения фона

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

Значение параметра background указывает на то, что вы хотите сделать, когда объявляете то или другое действие:

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

Возможно, одним из самых распространенных и полезных типов градиента является linear-gradient() . « Ось » перехода градиента может располагаться слева-направо, сверху-вниз или под любым другим углом на ваше усмотрение.

Если вы не объявляете отдельно угол, по умолчанию преобразования будут происходить сверху-вниз:

Посмотреть пример на Codepen

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

Чтобы сделать переход слева-направо, вы задаете дополнительный параметр в начале функции linear-gradient() , начиная код параметра со слова « to », а затем указывая направление.

Например, « to right »:

Посмотреть пример на Codepen

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

Посмотреть пример на Codepen

Если область перехода имеет квадратную форму, то угол градиента составит 45 градусов, однако если форма не квадратная, то такого угла не будет.

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

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

Посмотреть пример на Codepen

Вы можете также объявить, откуда вы хотите, чтобы начинался какой-либо определенный цвет. Это называется « color-stop ».

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

В таком случае вы можете разместить color-stop желтого цвета несколько раньше:

Посмотреть пример на Codepen

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

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

Посмотреть пример на Codepen

Поддержка браузерами / Префиксы

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

Например, поддержка браузерами. Здесь синтаксис и префиксы уже сложнее. Существует три разных набора правил синтаксиса, которые поддерживают браузеры.

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

  • Старый : оригинальный, только с WebKit , в нем используется синтаксис наподобие from() и color-stop() ;
  • Tweener : старая система углов, например, « left »;
  • Новый : Новая система углов, например, « to right ».

То же касается и префиксов.

Давайте попробуем их перечислить:

Chrome 1-9: Старый, с префиксами.
10-25: Tweener, с префиксами.
26: Новый, без префиксов.
Safari 3-: Не поддерживаются.
4-5.0: Старый, с префиксами.
5.1-6.0: Tweener, с префиксами.
6.1: Новый, без префиксов.
Firefox 3.5-: Не поддерживаются.
3.6-15: Tweener, с префиксами.
16: Новый, без префиксов.
Opera 11.0-: Не поддерживаются.
11.1-11.5: Tweener, с префиксами, только линейные.
11.6-12: Tweener, с префиксами, добавлены радиальные.
12.1: Tweener, без префиксов.
15: Новый, без префиксов.
IE 8-: Не поддерживаются.
9: Только фильтры.
10+: Новый, без префиксов (также поддерживается префикс Tweener w/).
Android 2.0-: Не поддерживаются.
2.1-3.0: Tweener, с префиксами.
4.0-4.3: Новый, с префиксами.
4.4+: Новый, без префиксов.
iOS 3-: Не поддерживаются.
3.2-4.3: Tweener, с префиксами.
5.0-6.1: Новый, с префиксами.
7.0: Новый, без префиксов.

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

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

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

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

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

Примеси Compass помогут перевести SVG -данные в URI под IE 9 , если это для вас существенно.


Фильтры IE

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

Существует несколько критериев относительно того, применять вам фильтры или нет:

  1. Считается, что filter негативно влияют на производительность;
  2. background-image накладывается поверх фильтров, так что если вы хотите использовать его как запасной вариант, применение фильтров противопоказано. Однако если сплошной цвет является резервным вариантом ( background-color ), использование фильтров приемлемо.

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

RGBA ( 92,47,90,1 ) == # FF5C2F5A
RGBA ( 92,47,90,0 ) == # 005C2F5A

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

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

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

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

Переход осуществляется равномерно независимо от направления:

Посмотреть пример на Codepen

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

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

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

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

Для этого в первом параметре мы через пробел задаем « closest-side »:

Посмотреть пример на Codepen

Также могут задаваться значения: closest-corner (ближайший угол), closest-side (ближайший край), farthest-corner (самый дальний угол), farthest-side (самый дальний край).

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

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

Здесь я сделал это более наглядно, подготовив пример с квадратом и настроив точки color-stop :

Посмотреть пример на Codepen

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

Аналогично синтаксис radial-gradient() претерпел несколько изменений. Здесь также существует три набора: « Старый », « Tweener » и « Новый »:

Их отличительными чертами являются:

  • Старый : с префиксами использует -webkit- , синтаксис типа from() и color-stop() ;
  • Tweener : Первый параметр в нем определяет центр градиента. Это полностью сломает структуру в новых браузерах, поддерживающих синтаксис без префикса, поэтому проверяйте, чтобы все префиксы синтаксиса Tweener были расставлены;
  • Новый : первый параметр имеет синтаксис типа « circle closest-corner at top right «.

Опять же, я всегда обрабатываю код с помощью Autoprefixer . Вы пишете код в соответствии с новейшим синтаксисом, он делает резервные варианты.

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

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

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

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

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

С помощью repeating-linear-gradient() , вам не нужно прибегать к таким хитростям.

Размер градиента определяется окончательным color stop . Если размер color stop 20 пикселей, то размером градиента (который затем повторяется) будет квадрат 20 на 20 пикселей:

Посмотреть пример на Codepen

То же самое касается радиальных градиентов:

Посмотреть пример на Codepen

Некорректная резервная загрузка

Как мы уже упоминали, некоторые очень старые браузеры вовсе не поддерживают CSS-синтаксис градиентов. Если вам нужен запасной вариант, который бы работал, как замена градиентам, здесь можно применить изображение ( .jpg/ .png ).

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

Тогда они будут отсылать HTTP-запрос к изображению, даже если мог быть использован CSS-градиент.

Так происходит с Firefox 3.5.8 ( скриншот ), а также с Google Chrome ниже 5 версии и Safari 5.0.1 :

Отказ загрузки Safari 5.0.1

Правда на сегодняшний день это уже не является серьезной проблемой. Единственные браузеры, в которых наблюдались такие трудности, это Google Chrome и Safari . В Chrome это исправлено в версии 6, в Safari — в версии 5,1, которые вышли три года назад.

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

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

Градиент CSS3. Примеры использования

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

Хотите узнать как легко и быстро создать красивый градиент CSS3 на вашем сайте? Причём данный градиент можно будет настраивать под любой дизайн.
Давайте я покажу вам несколько примеров и увидите что это действительно просто.

Как создаётся линейный градиент CSS3

Линейный градиент это когда цвета представлены в виде прямой линии плавно и равномерно переходят один в другой.
Для создания линейного градиента при помощи CSS3 давайте создадим блок с классом «gradient-block»

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

Далее для данного блока я задам ещё один класс и уже для него буду задавать разные градиенты. Вы можете задавать градиент для класса основного блока, так как большой роли это не играет.
В итоге код блока будет выглядеть так:

Для задания простого линейного градиента нам понадобится свойство CSS3

При этом на первом месте вы задаёте цвет, который будет находиться вверху, а на втором – цвет, который будет находиться внизу.
Цвета можно задавать как при помощи названий зарезервированных цветов, например:

Так и при помощи шестнадцатиричного кода, например:

То есть CSS код для задания градиента будет выглядеть так:

Вместо (#A4D8F7, #1C4D95) вы можете вписать свои цвета.
Также вы можете задавать три и более цветов для градиента.

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

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

Интересно получается, не правда ли? Однако и это ещё не всё!
В градиенте CSS3 вы можете задавать не только цвета перехода, но и их направление.
Например:

Направление можно задать при помощи параметров :

  • Top – цвета идут сверху вниз
  • Left – слева на право
  • Right – справа на лево
  • Bottom – снизу вверх

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

Кроме направления для градиента CSS3 можно задать угол наклона.
Выглядеть это будет примерно так:

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

Здесь задан угол наклона 30 градусов. Вместо 30deg вы можете поставить своё значение.

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

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

Для задания радиального градиента используется следующее CSS свойство:

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

Код CSS3 для данного градиента будет выглядеть так:

Как видите даный CSS градиент растянуло в форме эллипса. Для того чтобы он был круглым нужно дописать ему параметр circle.
Тогда он примет следующий вид

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


Также для задания радиального градиента в CSS3 есть ещё ряд параметров:

    farthest-corner — при указании данного параметра градиент будет формироваться так что в боке будет отображаться его самый дальний угол.

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

В CSS коде это выглядит так:

closest-corner – отображает близжайший угол градиента

farthest-corner — отображает самый дальний угол градиента

Поэкспериментировав с разными свойствами и цветами можно получить очень интересные градиенты. Здесь всё зависит от вашей фантазии :)

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

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

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

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() — повторяющийся линейный градиент.

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

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

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

CoolHue

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

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

CSS Gradient

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

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

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


UI Gradients

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

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

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

CSSmatic

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

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

Ultimate CSS Gradient Generator

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

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

ColorSpace

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

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

CSS Gradient Generator

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

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

CSS3 Factory

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

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

CSS-Gradient

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

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

GradientGenerator

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

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

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

Вывод

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

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

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

СSS3 Градиент

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

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

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

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

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

Синтаксис

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

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

Пример

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

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

Пример

Линейный градиент — по диагонали

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

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

Пример

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

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


Синтаксис

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

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

Пример

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

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

Пример

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

Пример

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

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

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

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

Пример

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

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

Пример

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

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

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

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

Синтаксис

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

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

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

Пример

Радиальный градиент — различные цветовые остановки

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

Пример

Установить фигуру

Параметр shape определяет фигуру. Может принимать значение circle или ellipse . Значение по умолчанию — ellipse .

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

Пример

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

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

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

Пример

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

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

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

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

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

Взгляд на 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 — это постепенный переход одного цвета в другой между двумя точками.

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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