Градиент CSS · Тёмный 3D рельеф

Градиент CSS - Тёмный 3D рельеф

Рельефный градиент тёмных тонов выполненный при использовании свойств CSS, обладает 3D эффектом изменения вида при разных положениях угла точки обозрения.

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

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

body {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 background: -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19,19,19);
 background: linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19,19,19);
 background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: 20px 20px;
 background-size: 20px 20px;
}

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

<style>
.block-gradient{
 width:100%;
 height:320px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 background: -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19,19,19);
 background: linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19,19,19);
 background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: 20px 20px;
 background-size: 20px 20px;
}
</style>
<div class="block-gradient"></div>

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

Тип градиента
linear-gradient - Линейный градиент
Используемые свойства
box-sizing - Свойство переключения
background - Свойство применения
background-position - Свойство положения
background-origin - Свойство расположения
background-clip - Свойство определения
background-size - Свойство масштабирования
width - Ширина использования - (для блока)
height - Высота использования - (для блока)
Используемые цвета
rgb(21,21,21)
rgba(0,0,0,0)
rgb(34,34,34)
rgb(27,27,27)
rgb(29,29,29)
rgb(26,26,26)
rgb(36,36,36)
rgb(19,19,19)

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

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

Рейтинг: 5.0/5 из 2
Добавлено Автор Ник Источник Просмотров Комментариев Теги
08-02-2015 Михаил Меренков aTmpl © 1958 0 gradient 3d, рельефный градиент