Всем привет. Сегодня поговорим о том, как создавать градиенты на CSS3 .
Всем привет. Сегодня поговорим о том, как создавать градиенты на CSS3.
Для начала создадим блок, на примере которого будем рассматривать примеры.
<div class="container"></div>
CSS .container {
width: 400px;
height: 300px;
float: left;
margin: 40px;
background: #999;
border-radius: 5px;
box-shadow: 0 8px 15px rgba(0,0,0,.6);
}
Итак, у нас есть блок. Теперь будем рассматривать градиенты. Задаются они в background.
.container {
background: linear-gradient(#333, #bbbb);
}
Это минимальный набор параметров. Первый цвет сверху постепенно сменяется нижним цветом. Однако, первым параметром можно передать смещение в градусах.
background: linear-gradient(45deg, #333, #bbb);
Значение может быть и отрицательным. Также, значение смещения можно задавать и словами.
background: linear-gradient(right top, #333, #bbb);
Т.е. градиент будет начинаться с правого верхнего угла в данном случае.
Еще задать значение можно в процентах
background: linear-gradient(40% 10%, #333, #bbb);
Мы можем задавать color-stoppers. Задаются они после цвета. Тогда градиент будет более резким.
background: linear-gradient(60% 10%, #333 30%, #bbb 50%);
Итак, с линейными градиентами разобрались, можно перейти к радиальным, т.е. круговым. Все, что было сказано для линейных градиентов, справедливо и для радиальных. Единственное отличие, что они задаются по окружности.
background: radial-gradient(center, #333 70%, #bbb 100%);
В конце стоит сказать, что градиентов может быть несколько. Для этого достаточно просто перечислить их через запятую.
Итак, на этом все. Сегодня разобрались, как задавать градиенты в CSS3. Спасибо за внимание и до скорого!
