Радиальный градиент в CSS
Сегодня мы продолжим тему градиентов, и на этот раз рассмотрим радиальный градиент CSS. Что следует сказать о данном градиенте. Такая особенность также появилась в CSS3, и отличием от линейного градиента является то, что переход выполняется вокруг точки, а не по одной линии. Задается радиальный градиент также при помощи CSS свойства background.
<html>
<head>
<title>Радиальный градиент</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>
Тест
</div>
</body>
</html>
Все к тому же HTML коду применяем CSS стили:
div {
background: radial-gradient(#fad 0%, #ddd 20%, #99f 100%);
height: 200px;
width: 300px;
}
Для того чтобы было о чем говорить в дальнейшем посмотрите, пожалуйста, на получившийся результат градиента.
Как видно из изображения, градиент исходит из точки, которая находится по центру блока. Мы задали ключевое слово radial-gradient, и указали параметры необходимого для нас цвета, по аналогии с линейным градиентом. Но здесь мы не задавали первый параметр, и благодаря этому параметру, мы можем указывать начальное положение точки, от которой будет начинаться градиент. Для этого напишите следующее:
div {
background: radial-gradient(at 20px 70px #fad 0%, #ddd 20%, #99f 100%);
height: 200px;
width: 300px;
}
В этом случае точка переместилась на двадцать пикселей по горизонтали и на семьдесят по вертикали. Таким образом, мы можем самостоятельно задавать местоположение точки, и получать нужный нам радиальный градиент без использования изображений.
И напоследок приведу Вам последний CSS код, в котором я указал фиксированную ширину и высоту блока, и сделал для нее градиент. Вы спросите для чего этот пример. Ведь при помощи градиента можно задавать фон для вашей страницы, поэтому самый простой пример использования градиентного фона я решил вам продемонстрировать.
div {
background: radial-gradient(at 20px 50px #fad 0%, #99f 50%, #fa0 100%);
width: 750px;
height: 480px;
}
В результате мы получили довольно симпатичный блок с приятным цветом фона.
На этом я хочу завершить данный урок, надеюсь, он стал для Вас полезным и Вы найдете место для применения радиальных градиентов в CSS.
