-ms-radial-gradient в CSS


Содержание

Как сделать градиенты | 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 Спасибо за участие!

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

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

CSS не ограничивается линейными градиентами. В вашем распоряжении есть и радиальный градиент, который устанавливается соответствующей функцией radial-gradient() .

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

Позиционирование

Начальная точка вектора радиального градиента находится в центре эллиптической формы (который в свою очередь по умолчанию размещается в центре стилизуемого элемента), откуда градиент расходится кругами. Центр можно смещать, пользуясь теми же значениями, которые принимает background-position . Перед указанием позиции следует использовать приставку at :

Форма и радиус

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

  • ellipse — градиент эллиптической формы (значение по умолчанию);
  • circle — градиент круглой формы.

Значение радиуса может быть указано в любых доступных единицах CSS. Если указать одно значение, то оно будет принято за радиус круга. Два значения интерпретируются как радиус эллипса по оси X и радиус по оси Y. По умолчанию радиальным градиентом полностью заполняется фон элемента.

Размер

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

closest-side — создается градиент, который расходится только до ближайшей стороны элемента:

closest-corner — градиент расходится только до ближайшего угла элемента:

farthest-side — противоположно closest-side, градиент расходится до самой дальней стороны элемента:

farthest-corner — противоположно closest-corner, градиент расходится до самого дальнего угла элемента:

Опорные точки

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

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

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

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

Очередной блог фрилансера

коротко и полезно о веб-разработке

Изучаем CSS-градиенты за час

Вы отказываетесь использовать CSS-градиенты в своих проектах просто потому что не понимаете их, или же вас не устраивает текущая поддержка браузерами? Друзья мои, пришла пора избавиться от изображений, шириной в 1 пиксель. Если вам интересно узнать о том как использовать CSS-градиенты, эта статья для вас. Мы разберем основы синтаксиса, а затем перейдем к сложным эффектам с большим количеством советов и примеров. Изучение CSS-градиентов очень важно, поскольку их поддержка браузерами улучшается день ото дня, а мобильные браузеры изначально хорошо поддерживают CSS3.

Итак, давайте начнем.

Основной синтаксис

Первое о чем вам следует знать – это поддержка браузерами CSS-градиентов. К сожалению, на данный момент придется использовать вендорные префиксы и пользовательский фильтр для IE. Итого, мы имеем пять возможных префиксов, каждый из которых содержит свои характерные особенности, а также множественные различия между версиями браузеров: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), и IE (Trident), содержащий два различных способа выполнения градиентов.

Для начала мы рассмотрим “стандартные” правила браузеров (не принимая во внимание старые правила from() to() ), а ближе к концу будет глава, посвященная IE-совместимости, поскольку его фильтры не оказывают влияния на основной код.

Основной синтаксис CSS-градиентов, выглядит следующим образом:

Приведенный код даст следующий результат:

Рассмотрим подробнее каждый из параметров:

  • Background: градиент указывается в качестве фона элемента через свойство background, точно так же, как картинка или сплошной цвет.
  • vendor –: указываем “-o” для оперы, “-moz” для Firefox, “-webkit” для safari и chrome, “-khtml” для Konqueror и “-ms” для IE.
  • type: здесь задается тип градиента, может содержать одно из двух значений “linear” или “radial”.
  • start / position: это X/Y-координаты, которые либо задают браузеру направление градиента (в этом случае top – означает сверху вниз, а left – слева направо), либо указывают точные координаты начала градиента (например заданные координаты 600px 300px, инвертируют приведенный выше пример, поскольку точка начала градиента будет расположена в правом нижнем углу блока).
  • shape: при использовании радиального градиента можно указать “circle” для круглого градиента, или оставить свойство пустым, в этом случае градиент останется в форме эллипса.
  • size: определяет размер градиента. Давайте рассмотрим его подробнее.

Свойство size может принимать одно из шести значений: closest-side, closest-corner, farthest-side, farthest-corner, contain и cover. Рассмотрим каждое из этих свойств на примере простого радиального градиента.

Closest-side

Края градиента подогнаны к ближайшей стороне контейнера.

Сlosest-corner

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

Farthest-side

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

Farthest-corner

Края градиента подогнаны к дальнему углу контейнера, опять же градиент частично скрыт границами. Разница со значением farthest-side почти незаметна, но все же есть.

Contain

Градиент целиком размещается внутри контейнера, является аналогом свойства closest-side.

Cover

Градиент полностью покрывает область контейнера, аналог свойства farthest-corner.

Оставшиеся свойства градиента:

  • Color1: это первый цвет, цвет стартовой позиции, которую вы указали выше.
  • Colors 2, 3, 4…: вы можете указать любое количество цветов по желанию, и они равномерно будут распределены в фоне элемента, если только вы не задали свойство position
  • Positon (для цветов): если вам не нравится равномерное распределение цветов, вы можете задать свои правила для их позиционирования.

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

На картинке вы можете видеть результат распределения черного и белого цвета, в соотношении 25% / 75%, диагональная линия является наглядным примером того, как браузер рассчитывает эти значения:

Множественные градиенты

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

Синтаксис очень простой, все что нужно сделать – разделить множественные объявления градиентов, запятыми. Обратите внимание, z-index для градиентов работает в обратном порядке, поэтому самый первый градиент будет сверху.

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

Например, следующий код

дает вот такой результат:

Эффекты градиентов

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

Мягкий световой эффект

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

Для создания тени используется следующий css, включающий правильное позиционирование элементов:

Получится вот такой результат:

Фоновые CSS-паттерны

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

Вот пример того, как можно использовать простой фоновый паттерн, который легко можно интегрировать в свой сайт:

Получаем вот такой фон:

Свойство background-size контролирует высоту и ширину полосок, можно поэкспериментировать с разными значениями, и посмотреть какой получится результат.

CSS-рисование

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

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

О совместимости

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

Internet Explorer, начиная с версии 5.5 и до версии 9, поддерживает градиенты через фильтр. Синтаксис следующий:

Возможные свойства фильтра (sProperties):

  • Enabled – свойство отвечает за отображение градиента, может принимать одно из двух значений: true или false.
  • StartColor – цвет начальной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до 4294967295 (непрозрачный белый)
  • StartColorStr – цвет начальной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
  • EndColor — цвет конечной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до 4294967295 (непрозрачный белый)
  • EndColorStr — цвет конечной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
  • GradientType – можно указать тип градиента, горизонтальный (значение 1) или вертикальный (значение 0). По умолчанию используется вертикальный градиент.
Илон Маск рекомендует:  Что такое код setallpalette

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

Обратите внимание на указанные цвета, впереди идет значение альфа-канала FF, поскольку нам требуется два непрозрачных цвета, а затем следует само значение цвета.

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

Здесь первый цвет оставляем непрозрачным, а у второго вместо значения FF, указываем 32, то есть 50 в десятичной системе счисления. Таким образом, мы уменьшаем прозрачность второго цвета на 50%, ну и конечно тип градиента – единица.

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

А вы используете CSS-градиенты в своих проектах, или считаете что для них еще не пришло время?

Перевод статьи Mastering CSS Gradients in Under an Hour, автор Rochester Oliveira

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

CSS: Радиальный градиент для фона

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

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

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

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

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

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

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

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если вы указываете только одно ключевое слово, второе будет «center».
x% y% Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%.
x-pos y-pos Первое значение это горизонтальная позиция, второе — вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения.

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

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

Ключевые слова Описание
closest-side Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса).
closest-corner Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента.
farthest-side Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса).
farthest-corner Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса.

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

Css radial gradient, new syntax

I had a perfectly val >


I had no problem with it, till I found that all these prefixes are not needed for a gradient.. Removing them actually removes the gradients in corresponding browsers. It looked like the problem is that there is another (newer) syntax for css gradient.

The problem is that if change my background to:

background: radial-gradient(circle at 50% 50% , #00f 0%, #fff 100%); the result looks different:

Which looks like it is removing my first background on .square . How can this be changed?

2 Answers 2

Your mistake was specifying #fff as the color stop. That creates a solid white color stop, rather than a transparent one. There are no other cross-browser issues with the old and new radial gradient syntaxes that I am aware of.

Note that changing it to rgba(255, 255, 255, 0) can have a different result than changing it to rgba(0, 0, 255, 0) in some browsers like Firefox. This may be due to how Firefox interpolates transparent color stops depending on their RGB values. Use rgba(0, 0, 255, 0) (transparent blue) in order to get consistent results across all browsers:

(You can also change #00f to rgba(0, 0, 255, 1) for consistency if you like, but it’s not absolutely necessary.)

ofcourse result looks different because you use this background: radial-gradient(circle at 50% 50% , #00f 0%, #fff 100%);

use use two colors #00F and #FFF. due to #FFF color the result looks different so use #f0d9b5 instead of #FFF then result looks same as u need

CSS Radial Gradient

Easily manage projects with monday.com

When we talk about gradients, it’s worth beginning with the fact that gradients are an image replacement in CSS. That’s a fancy way of saying that creating a gradient in CSS provides the browser with instructions for painting an image on the screen rather than you providing the browser with the source URL of a file you created in an image editing application, like Photoshop or Sketch. It’s a native CSS way for doing the same thing in code and, as such, gradients are included in the CSS Image Values and Replaced Content specification.

A radial gradient differs from a linear gradient in that it starts at a single point and emanates outward. Gradients are often used to simulate a light source, which we know isn’t always straight. That makes them useful to make the transitions between colors seem even more natural.

The default is for the first color to start in the center center position of the element and then fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction.

The source of a radial gradient moves from the center outward.

Syntax

The radial-gradient() notation is used on either the background or background-image property in CSS. This makes total sense when we recall that gradients are basically the CSS to create images that we would otherwise make in image editing software and place on a background property anyway.

Official Syntax

Here is how the official spec outlines the syntax for a radial gradient:

It might be a little helpful to translate that into basic English:

Hey, element! Paint a radial gradient in some shape at some size that is located in these positions. Oh, and make sure it starts with this color and stops at this color.

Values

The radial-gradient notation accepts the following values noted above:

  • shape : Determines the shape of the gradient follows when transitioning outward, from one color to the next. Since we’re talking about radial gradients, the shapes are limited to being circular in nature. We can omit this value and the notation will measure the element’s side lengths to determine whether one value better matches the situation. For example, an element that is a perfect square would be a great match for circle whereas anything rectangular is ripe for ellipse .
    • circle
    • ellipse
  • size : Influences the ending shape of the gradient by taking the shape value and instructing where the gradient should end based on the center of the shape. This can be expressed by name or an exact measure of length.
    • closest-side : The gradient will end at side closest to the center of the shape. If two sides match this criteria, then it will be evenly distributed.
    • farthest-side (default): The opposite of closest-side , where the gradient will end at the side furthest from the shape’s center.
    • closest-corner : The gradient will end at the corner that matches as the closest to the shape’s center.
    • farthest-corner The opposite of closest-corner , where the gradient ends at the corner that is located furthest from the shape’s center.
    • : We can specify a numeric value that serves as the circle’s radius. This has to be stated in positive pixels or relative units. Sorry, no negative units or percentages allowed because a negative circle would be vacuum and percentages can be relative to any number of surrounding values.
    • or percentage : A second numeric value can be provided to declare the explicit size of an ellipse, but not a circle. Again, negative values are a no-no, but percentages are fair game since the size is relative to the gradient box rather than the element.
  • position : This works very much the same way that it does on background-position . That means top , right , left , and center all work here, as well as combinations where two named values (e.g. top center ) are provided. We can also specify an exact position using a numeric value, including percentage, all of which are relative to the element’s bounding box. Default is center center .
  • color-stop : These are color values that define the gradient. Any color value is accepted here, including hex, named, RGB and HSL.

Usage

Here’s how that looks at perhaps its most basic. Note that we are not declaring the shape> , size , position or color-stop values, which all default to values placing the gradient at the very center of the element and transition evenly between the declared color values.

Илон Маск рекомендует:  Что такое дедлайн, значение слова, его определение

See the Pen blcqw by Chris Coyier (@chriscoyier) on CodePen.

You can see how that gradient assumes the shape is ellipse . That’s because the element itself is not a perfect square. In that case, it would have assumed a circle instead. Pretty smart! Here’s what would happen if we had explicitly declared circle as the shape value:

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. Now we can explicitly declare the position value to ensure that the fade ends by the «closest-side» of the shape instead, like this:

See the Pen EFyvp by Chris Coyier (@chriscoyier) on CodePen.

The possible values there are: closest-corner , closest-side , farthest-corner , farthest-side . You can think of it like: «I want this radial gradient to fade from the center point to the __________ , and everywhere else fills in to accommodate that.»

A radial gradient doesn’t have to start at the default center either, you can specify a certain point by using «at ______ » as part of the first parameter, like:

I’ll make it more obvious here by making the example a square and adjusting a color-stop :

See the Pen iuaDL by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

Browser support for radial-gradient() is largely the same as linear-gradient() . The exception is a very old version of Opera. Right when they started supporting gradients they only accounted for linear and not radial.

But similar to linear-gradient() , if your browser support needs to go super deep, then you might consider using Autoprefixer or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

CSS градиенты. Примеры использования градиентов в HTML & CSS

Пояснения к статье:

  1. — CSS свойство которое принимает несколько значений. Свойство < background : linear-gradient(to top white 20%, red 50%, black 30%)>задает градиент переходящий снизу вверх. Цвета будет располагаться по площади следующим образом: 20% — белый, 50% — красный, 30% — черный.
  2. radial-gradient > — CSS свойство, которое служит для создания радиального градиента. Принимает несколько значений. Запись background: radial-gradient(circle at 65% 15%, aqua, darkblue) создаст фигуру сине-голубого шара.
  3. @keyFrame — ключевое слово, которое используется для стилизации некоторых элементов, чаще всего для анимации.
  4. animation > — свойство, которое отвечает за анимацию. Её значения определяют длительность(в секундах), функции и количество повторений.

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

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

Синтаксис

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

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

Для начала мы рассмотрим самый простой — создание линейного градиента. Он создается с помощью свойства linear-gradient.

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

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

Способов создания направления несколько, для этого используются точные и не точные значения. Из не точных значений выделяют to top, to bottom, to right и to left, которые задают направления вверх, вниз, вправо и влево соответственно.

Для указания другого направления записывается значение градусов угла наклона, которое измеряется в deg. 1 deg равен 1 градусу.

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

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

Запись < background : linear-gradient(to top, #fff 20%, #ccc, #000)>будет означать, что белый цвет будет занимать первые 20% области.

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

Задается с помощью команды radial-gradient. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.

  • Первое значение, которое принимает команда radial-gradient — форма. Её можно указывать простыми словами — circle, ellipse и другие. По умолчанию стоит 2 значение.
  • Второе значение, в отличие от линейного градиента, задает положение центра. Для этого задаются такие же ключевые слова, с небольшим отличием: приставка to меняется на at.
  • С помощью точных значений можно задавать ширину и высоту градиента. Первое значение определяет ширину, а второе высоту. Для изменения ширины подходят такие размеры: %, rem и em.

Пример использования градиента. HTML & CSS

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

Градиенты CSS

Дата публикации: 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, как отделенное запятыми значение фигуры, вроде этого:

Илон Маск рекомендует:  SVG Map. Интерактивная карта

Здесь возможны значения: 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. Примеры использования

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

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

Взгляд на 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 и SQL