Radial Gradient

Июнь 30, 2013 ||  css , gradient ||  комментарии

Как-то не часто сталкивался с необходимостью делать радиальный градиент средствами css.

Но вот столкнулся, и решил почитать.

Синтаксис:

.gradient{
    background-image: radial-gradient ([ [ <shape> || <size> ] [ at <position> ] ? ,| at <position> , ] ? <color-stop> [ , <color-stop> ] +)
}
  • shape – возможные значения: circle, ellipse. Значение по умолчанию – эллипс.
  • size – возможные значения: farthest-corner, farthest-side, closest-side, closest-corner. Не поверите, написал не копируя. Дальний угол, дальняя сторона, ближайшая сторона, ближайший угол. Можно указать напрямую размеры. Значение по умолчанию – farthest-corner
  • postion – положение цента градиента. Указывается также как указывается положение фоновой картинки – center, left top, bottom right и тд. Можно указывать координатами. Значение по умолчанию – center
  • color-stop – цвета градиента, необходимо указать минимум два. Цвета можно указывать без положения, тогда положение цвета определяется равномерным распределением, например #FFF, #FF0, #000 означает #FFF 0%, #FF0 50%, #000 100%

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

.gradient{
    background-image: radial-gradient(yellow, blue);
}
.gradient{
    background-image: radial-gradient(75px at 80px 100px, yellow, blue);
}
.gradient{
    background-image: radial-gradient(circle at 50px 50px ,yellow, blue);
}

Примеры с синтаксисом:

пример

Работает в:

P.S

миксин для стилуса

comments powered by Disqus