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

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовался из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

Линейный градиент
Для Webkit-браузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

Код: Выделить всё

background: -webkit-linear-gradient(left top, left bottom, #ccc, #000);
Изображение
Примечание: В старых версиях Webkit-браузеров использовался немного другой синтаксис, первым параметром там указывался тип градиента.

Для Firefox 3.6+:

Код: Выделить всё

background: -moz-linear-gradient(top,  #ccc,  #000);
Изображение
Для Opera

Этот код будет работать в Опере начиная с версии 11.10.

Код: Выделить всё

background: -o-linear-gradient(top,  #ccc,  #000); /* Opera 11.10+ */
Для Internet Explorer

Градиент для IE 10+

Код: Выделить всё

background: -ms-linear-gradient(top,  #ccc,  #000); /* IE10+ */
Этот фильтр будет работать в старых версиях IE:

Код: Выделить всё

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Изображение

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

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

Код: Выделить всё

background: #999; /* for non-css3 browsers */ 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* для IE6-9 */
background: -webkit-linear-gradient(top, bottom, #ccc, #000); /* для webkit-браузеров */
background: -moz-linear-gradient(top,  #ccc,  #000); /* для firefox 3.6+ */ 
background: -o-linear-gradient(top,  #ccc,  #000); /* для Opera 11.10+ */
background: -ms-linear-gradient(top,  #ccc,  #000); /* для IE10+ */
Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечислены возможные значения point:
  • top
  • right
  • bottom
  • left
  • top left
  • top right
  • bottom left
  • bottom right
  • 0deg
  • 11deg
  • 67deg
  • 182deg
  • -45deg
  • -90deg
Использование стоп-цвета

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

Код: Выделить всё

background-image: linear-gradient(top, yellow 10px, red 80px);
background-image: linear-gradient(top right, orange, green 30%, yellow 70%);
background-image: linear-gradient(60deg, red, white, blue 50%);

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

Код: Выделить всё

background: radial-gradient(

позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
);
Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов - ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.
  • closest-side - Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
  • closest-corner - Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
  • farthest-side - Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
  • farthest-corner - Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
  • contain - тоже что и closest-side.
  • cover - тоже что и farthest-corner.

Код: Выделить всё

background: radial-gradient(circle farthest-side,#000,#FFF,#000);
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.