Градиент CSS · Тетрадка в линию

Градиент CSS - Тетрадка в линейку

Линейный градиент на свойствах CSS напоминающий своим видом тетрадку в линию, можно настроить параметры цвета и размеры линий, сделано описание и демо редактор для изменений.

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

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

body {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border: none;
background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 50px, rgb(7,102,165) 50px, rgb(7,102,165) 50px, rgba(0,0,0,0) 50px), -webkit-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 50px, rgb(7,102,165) 50px, rgb(7,102,165) 50px, rgba(0,0,0,0) 50px), -moz-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background: linear-gradient(90deg, rgba(0,0,0,0) 50px, rgb(7,102,165) 50px, rgb(7,102,165) 51px, rgba(0,0,0,0) 51px), linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background-position: auto auto;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: 100% 1.5em;
 background-size: 100% 1.5em;
}

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

<style>
.block-gradient{
 width:100%;
 height:333px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border: none;
background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 50px, rgb(7,102,165) 50px, rgb(7,102,165) 50px, rgba(0,0,0,0) 50px), -webkit-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 50px, rgb(7,102,165) 50px, rgb(7,102,165) 50px, rgba(0,0,0,0) 50px), -moz-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background: linear-gradient(90deg, rgba(0,0,0,0) 50px, rgb(7,102,165) 50px, rgb(7,102,165) 51px, rgba(0,0,0,0) 51px), linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background-position: auto auto;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: 100% 1.5em;
 background-size: 100% 1.5em;
}
</style>
<div class="block-gradient"></div>

Установка градиента без вертикальной полосы

body {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border: none;
 background: -webkit-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background: -moz-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background: linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
 background-position: auto auto;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: 100% 1.5em;
 background-size: 100% 1.5em;
}

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

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

Ширина расположения вертикальной полосы с левой стороны изменяется значением 50px, ширина вертикальной и горизонтальной полосы изменяется значением 0.1em, расстояние между горизонтальными полосами изменяется значением 1.5em.

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

Редактор кода градиента

Рейтинг: 5.0/5 из 2
Добавлено Автор Ник Источник Просмотров Комментариев Теги
17-01-2015 Михаил Меренков aTmpl © 1931 0 css, linear-gradient, градиент