Градиент CSS · Сетка

Градиент CSS - Сетка

Линейный градиент CSS создающий рисунок в виде сетки с ромбовым плетением, используется минимальный код для получения визуального эффекта.

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

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

body {
background:linear-gradient(45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 52%),linear-gradient(-45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 52%);
background-size: 1em 1em;
background-color: #000;
}

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

<style>
.block-gradient{
width:100%;
height:320px;
background:linear-gradient(45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 52%),linear-gradient(-45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 52%);
background-size: 1em 1em;
background-color: #000;
}
</style>
<div class="block-gradient"></div>

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

Тип градиента
linear-gradient - Линейный градиент
Используемые свойства
background - Свойство применения
background-color - Свойство цвета
background-size - Свойство масштабирования
width - Ширина использования - (для блока)
height - Высота использования - (для блока)
Используемые цвета
rgba(255,255,255,0)
rgba(255,255,255,.05)

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

Редактор для изменения кода градиента

Рейтинг: 5.0/5 из 1
Добавлено Автор Ник Источник Просмотров Комментариев Теги
19-02-2015 Михаил Меренков aTmpl © 1871 0 линейный градиент, градиент сетка