Линейный градиент в CSS
Сегодня я расскажу Вам об одной замечательной возможности, благодаря которой значительно сокращается время разработки сайта. Эта возможность называется линейный градиент в CSS. Теперь у нас нет необходимости, как раньше, в фотошопе вырезать полоску изображения и растягивать ее по оси X или Y. На сегодняшний день это можно реализовать с помощью CSS свойства background и его ключевого слова linear-gradient. Сейчас мы с Вами рассмотрим пример такого градиента.
<html>
<head>
<title>Линейный градиент</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>
Тестируем градиент
</div>
</body>
</html>
Для реализации градиента, мы создали блок, и теперь применим CSS стили:
div {
background: linear-gradient(180deg, #f00 0%, #0f0 20%, #00f 100%);
height: 50px;
width: 300px;
}
Начинаем разбираться, каким образом мы реализовали линейный градиент. Первым делом мы задаем ключевое слово linear-gradient. Далее в скобках мы указываем параметры. Первый параметр обозначает угол, с которого будет начинаться переход. Угол в 180deg, означает, что градиент будет начинаться сверху и заканчиваться внизу. Отсчет ведется с нуля градусов и с нижней позиции, т.е., 0deg - градиент будет снизу вверх, 90deg - слева направо, 270deg - справа налево. Далее мы указываем цвет, с которого будет начинаться градиент, и через пробел, указываем начало градиента в процентах, в нашем случае ноль процентов это начало градиента. Потом второй цвет, в который будет постепенно переходить первый, и значение в процентах до какого момента идет градиент, и так до тех пор, пока не достигнем ста процентов. Желательно поэкспериментировать самим с данным свойством.
Как видите результат довольно ожидаемый, поэтому больше примеров приводить не буду, а еще раз настоятельно Вас попрошу самостоятельно потренироваться и разобраться до конца в изучаемом свойстве. После чего Вы легко сможете создавать различные линейные градиенты на CSS.
