CSS3 градиент представляет собой переходы от одного цвета к другому. CSS3 поддерживает два типа градиентов: линейные градиенты, в которых переход цветов осуществляется от одной полосы цвета к другой, и радиальные градиенты, в которых переход идет радиально от центра концентрических или эллипсовидных кругов.
Для создания градиентов используется функция градиента — linear-gradient() или radial-gradient(), которая применяется к свойству background или background-color.
Если задавать градиент с помощью свойства background-color, то сначала нужно с помощью background задать резервное изображение для браузеров, не поддерживающих это свойство, а затем присвоить значение посредством градиентной функции. При этом браузеры, поддерживающие функцию градиента, не будут загружать резервное изображение.
Поддержка браузерами
IE: 10.0 Firefox: 16, 3.6 -moz- Chrome: 26.0, 10.0 -webkit- Safari: 6.1, 5.1 -webkit- Opera: 12.1, 11.1 -o- iOS Safari: 7.1 Opera Mini: — Android Browser: 4.4, 4.1 -webkit- Chrome for Android: 44
1. Линейный градиент
Линейный градиент создается с помощью функции linear-gradient(). Равномерное распределение цветов градиента создается следующим способом:
div { background: linear-gradient(to top left, white, lightblue); } div { background-image: linear-gradient(to top left, white, lightblue); /*если для блока также будет задан фон с помощью свойства background-color*/ }
Направление градиента можно задавать также с помощью угла наклона (deg), например:
div { background: linear-gradient(-45deg, white, lightblue); } или div { background: linear-gradient(60deg, white, lightblue); }
Для неравномерного распределения цветов нужно указать позицию начала каждого цвета через точки остановки градиента (color stops).
Точки остановки градиентов указываются в %, где 0% — начало градиента, 100% — окончание градиента, например:
div { background: linear-gradient(to top, #90d7e9 0%, #9eadcc 20%, #ba95be 80%, #7aa4ce 100%); }
Чтобы нарисовать ровные полосы, можно воспользоваться следующими конструкциями:
div { background: linear-gradient(#ff0000 66px, #ffffff 67px, #ffffff 133px, #38bac7 134px); } или div { background: linear-gradient(to right, #38bac7 40px, #ffffff 41px, #ffffff 80px, #324a56 81px, #324a56 120px,#ffffff 121px, #ffffff 160px, #38bac7 160px); } или div { background: linear-gradient(to left, #f8ab8d, #ae7863 25%, #c1b59b 25%, #746d5d 50%, #e1d663 50%, #87803b 75%, #d1ead4 75%, #7d8c7f 100%); }
2. Радиальный градиент
Радиальный градиент создается с помощью функции radial-gradient(). По умолчанию форма градиента — круг, центр градиента совпадает с центром блока.
Градиенту можно придать форму эллипса, изменяя пару значений, идущих после формы градиента, заданных в % или px, например background: radial-gradient(55% 65%, blue, green, yellow). Первое значение задает размер по оси Х, второе — по оси Y.
div { background: radial-gradient(#38bac7, #324a56); } div { background:radial-gradient(100px 50px, #38bac7, #324a56); } div { background: radial-gradient(55px 55px,#3c485f, #c6c0b3); }
div { border-radius: 50%; width: 200px; height: 200px; background: radial-gradient(#38bac7, #324a56); } div { background: radial-gradient(#38bac7 40px, #ffffff 41px, #ffffff 60px, #324a56 61px, #324a56 100px, #ffffff 101px); } div { background:radial-gradient(white 0%, white 10%, #0ba7e2 10%, #0ba7e2 50%, #ffaf2f 50%, #ffaf2f 100%); }
Также можно менять положение градиента с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
Значение | Описание |
---|---|
closest-side | Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle) или до ближних сторон по X и по У (для ellipse). |
farthest-side | Размер рассчитывается из расстояния до дальних сторон. |
closest-corner | Размер рассчитывается из расстояния до ближних углов. |
farthest-corner | Размер рассчитывается из расстояния до дальних углов. |
3. Повтор градиента
Повтор градиента задается с помощью двух функций: repeating-linear-gradient() и repeating-radial-gradient()
div { background: repeating-linear-gradient(#c1b59b, #c1b59b 10px, white 10px, white 20px); } div { background: repeating-linear-gradient(45deg, #c1b59b, #c1b59b 10px, white 10px, white 20px); } div { background: repeating-linear-gradient(#74c3d2, #74c3d2 10px,#a8d7c7 10px, #a8d7c7 20px, #ffffcd 20px, #ffffcd 30px); } div { background: repeating-linear-gradient(#a8d7c7 10%, #ffffcd 20%); } div { background: repeating-radial-gradient(#a8d7c7 10%, #ffffcd 20%); } div { background: repeating-radial-gradient(#74c3d2, #74c3d2 10px, #a8d7c7 10px, #a8d7c7 30px, #ffffcd 30px, #ffffcd 40px); }
4. Градиент для разных браузеров
Кроссбраузерная запись градиента будет иметь следующий вид:
div { background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, green, blue); /* Стандартная запись */ } /*для неравномерного распределения градиента*/ div { background: -webkit-linear-gradient(left, red, green, blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(left, red, green, blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, red, green, blue); /* Firefox 3.6 to 15 */ background: linear-gradient(to left, red, green, blue); /* Стандартная запись, добавляется предлог "to"*/ } /*для радиального градиента*/ div { background: -webkit-radial-gradient(60% 55%, farthest-side, blue, green, yellow);/* Safari 5.1 to 6.0*/ background: -o-radial-gradient(60% 55%, farthest-side, blue, green, yellow);/* Opera 11.6 to 12.0*/ background: -moz-radial-gradient(60% 55%, farthest-side, blue, green, yellow);/* For Firefox 3.6 to 15*/ background: radial-gradient(farthest-side at 60% 55%, blue, green, yellow); /* Стандартная запись, добавляется предлог "at"*/ }