Градиент CSS · Паркет 3D

Градиент CSS паркет

Красивый градиент для фона страниц и элементов в виде 3D паркета, в качестве рисунка применяется свойство CSS - background со значением linear-gradient.

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

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

body {
background:linear-gradient(135deg, #f59d2c 25%, transparent 25%) -50px 0,linear-gradient(225deg, #fba231 25%, transparent 25%) -50px 0,linear-gradient(315deg, #f59d2c 25%, transparent 25%),linear-gradient(45deg, #fba231 25%, transparent 25%);
background-size:100px 100px;
background-color:#fba73b;
width:100%;
height:100%;
}

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


<style>
.block-gradient{
width:100%;
height:320px;
background:transparent;
background:linear-gradient(135deg, #f59d2c 25%, transparent 25%) -50px 0,linear-gradient(225deg, #fba231 25%, transparent 25%) -50px 0,linear-gradient(315deg, #f59d2c 25%, transparent 25%),linear-gradient(45deg, #fba231 25%, transparent 25%);
background-size:100px 100px;
background-color:#fba73b;
}
</style>
<div class="block-gradient"></div>

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

Тип градиента
linear-gradient - Линейный градиент
Используемые свойства
background - Свойство применения
background-size - Свойство масштабирования
background-color - Свойство цвета фона
width - Ширина использования
height - Высота использования
Используемые цвета
#f59d2c
#fba231
#fba73b

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


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



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