Линейный градиент CSS · Вертикальные полосы

Градиент ветикальные полосы

Линейный градиент в виде 10 вертикальных полос с эффектом затемнения, используется linear-gradient - CSS, может быть задействован любой цвет.

Установка градиента CSS

Установка градиента для всей страницы

body {
background:
linear-gradient(90deg,transparent 10%,rgba(0,0,0,0.1) 10%),
linear-gradient(90deg,transparent 20%,rgba(0,0,0,0.1) 20%),
linear-gradient(90deg,transparent 30%,rgba(0,0,0,0.1) 30%),
linear-gradient(90deg,transparent 40%,rgba(0,0,0,0.1) 40%),
linear-gradient(90deg,transparent 50%,rgba(0,0,0,0.1) 50%),
linear-gradient(90deg,transparent 60%,rgba(0,0,0,0.1) 60%),
linear-gradient(90deg,transparent 70%,rgba(0,0,0,0.1) 70%),
linear-gradient(90deg,transparent 80%,rgba(0,0,0,0.1) 80%),
linear-gradient(90deg,transparent 90%,rgba(0,0,0,0.1) 90%),
linear-gradient(90deg,transparent 100%,rgba(0,0,0,0.1) 100%)
grey
}

Установка градиента для блока


<style>
.block-gradient{
width:100%;
height:320px;
background:
linear-gradient(90deg,transparent 10%,rgba(0,0,0,0.1) 10%),
linear-gradient(90deg,transparent 20%,rgba(0,0,0,0.1) 20%),
linear-gradient(90deg,transparent 30%,rgba(0,0,0,0.1) 30%),
linear-gradient(90deg,transparent 40%,rgba(0,0,0,0.1) 40%),
linear-gradient(90deg,transparent 50%,rgba(0,0,0,0.1) 50%),
linear-gradient(90deg,transparent 60%,rgba(0,0,0,0.1) 60%),
linear-gradient(90deg,transparent 70%,rgba(0,0,0,0.1) 70%),
linear-gradient(90deg,transparent 80%,rgba(0,0,0,0.1) 80%),
linear-gradient(90deg,transparent 90%,rgba(0,0,0,0.1) 90%),
linear-gradient(90deg,transparent 100%,rgba(0,0,0,0.1) 100%)
grey
}
</style>
<div class="block-gradient"></div>

Параметры градиента

Тип градиента
linear-gradient - Линейный градиент
Используемые свойства
background - Свойство применения
Используемые цвета
transparent - прозрачный
rgba(0,0,0,0.1)
grey - измените на любой

Испытание градиента


Рейтинг: 5.0/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
20-12-2014 Михаил Меренков aTmpl © 728 0 linear-gradient, градиент