Доброго времени суток дорогие друзья и приступим. С появлением возможности реализации градиентов в CSS3 мы можем в значительной мере сократить использование картинок для фона. Здесь мы можем реализовать два вида градиентов линейный и радиальный. Рассмотрим подробнее:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Градиенты в css</title>
</head>
<body>
<style>
div{
height:200px;
}
.linear{
background-image:linear-gradient(red,blue);
}
</style>
<div class="linear"></div>
</body>
</html>Что мы здесь видим? У нас есть некий блок div высотой 200px, которому мы в качестве фонового изображения задали линейный градиент. Как видите значением свойства background-image(фоновое изображение) является функция linear-gradient, аргументами которой являются два цвета красный и синий, расположенных сверху вниз.
В перечислении цветов в градиенте мы не ограничены:
background-image:linear-gradient(red,orange,yellow,green,blue,pink);в этом примере мы с помощью градиента реализовали подобие радуги.
Мы можем также менять направление и угол градиента:
background-image:linear-gradient(to right
,red,orange,yellow,green,blue,pink);слева на направо.
background-image:linear-gradient(to left
,red,orange,yellow,green,blue,pink);справо налево
background-image:linear-gradient(to top,red,orange,yellow,green,blue,pink);снизу вверх
background-image:linear-gradient(45deg,red,orange,yellow,green,blue,pink);под углом 45 градусов.
Более того мы также можем указывать позицию с которой заканчивается или начинается переход к новому цвету:
background-image:linear-gradient(red,blue 50%);здесь у нас переход к синему цвету заканчивается на 50% высоты блока. Сам переход мы также можем сократить:
background-image:linear-gradient(red 40%,blue 50%);здесь мы указали у красного цвета, что его переход начинается на отметке в 40%. В результате чего переход составляет 10% чистая математика(50% - 40%).
И как вы наверное уже догадались если мы укажем:
background-image:linear-gradient(red 50%,blue 50%);то у нас получится эффект глянца, жесткого резкого переходя от одного цвета к другому.
background-image:linear-gradient(white 33%,blue 33% ,blue 66%,red 66%);флаг Российской Федерации с помощью градиента CSS.
С линейными градиентами мы более или менее разобрались, да кстати цвет мы можем указывать в любом удобном для нас формате(black, #000, rgb(0,0,0), rgba(0,0,0,1)).
Теперь рассмотрим радиальные градиенты. Чтобы вам все сразу стало понятно, изобразим наш флаг с помощью радиального градиента:
background-image:radial-gradient(white 33%,blue 33% ,blue 66%,red 66%);как видите эффект довольно необычный. Для того чтобы изобразить радиальный градиент мы воспользовались функцией radial-gradient(). В радиальном градиенты мы уже не можем задавать угол и направление, в плане всего остального они идентичны с линейным градиентом. Если у нас блок которому задается радиальный градиент представляет собой прямоугольник с разной шириной и высотой, то сам градиент представляет собой овальные области.
Поэтому если мы хотим область представлять в виде круга, то нам необходимо указать дополнительный параметр circle:
background-image:radial-gradient(circle, white 33%,blue 33% ,blue 66%,red 66%);Помимо всего выше перечисленного мы можем менять позицию радиального градиента:
background-image:radial-gradient(circle farthest-side at 95% 25%,yellow ,blue 5% );здесь мы указали дополнительный параметр farthest-side at и перечислили в процентах позицию по x и y. ,обратите внимание что между параметрами circle и farthest-side at нет запятой.
И напоследок давайте рассмотрим повторяющиеся градиенты.
Для того чтобы наш градиент дублировался мы можем записать так:
background-image:repeating-radial-gradient(circle farthest-side at 95% 25%,yellow ,blue 5% );здесь как видите произошло дублирование нашего радиального градиента в результате чего у нас получился эффект волны.
Тоже самое мы можем делать и с линейным градиентом:
background-image:repeating-linear-gradient(45deg,red ,red 10px,blue 10px,red 20px);заметьте для того чтобы у нас градиенты стали дублировались мы воспользовались функциями repeating-radial-gradient - дублирование радиального градиента и repeating-linear-gradient - дублирование линейного градиента.
А на этом дорогие друзья данная статья подошла к концу. Надеюсь что она была для вас интересная и познавательная.
Желаю вам успехов и удачи!
