Фон у вигляді діагональної сітки на CSS

44

Фон в виде диагональной сетки на CSS

В продовження теми створення фонових текстур на чистому CSS, пропоную кілька фрагментів коду, за допомогою яких, ви легко зможете виконати візуальний ефект у вигляді діагональної сітки і застосовувати його, як до цілої сторінки, так і до окремих блоків.

Як у випадку з шахівницею і фоном у вигляді зошитового клітинки, сітку з ромбовым плетінням, ми будемо малювати з допомогою повторюваного лінійного градієнта linear-gradient.
Все що нам потрібно, це створити два повторюваних градієнта, розгорнутих на 45 -45 градусів відповідно, з допомогою background-size визначити розмір клітин, і вибрати світлий або темний колір основного фону background.

1. Сітка для світлого фону

Якщо ви хочете бачити основний фон сторінки світлим, з нанесеною на нього сіткою по діагоналі, лінійний градієнт в .css необхідно додати безпосередньо селектору body:

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

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

Живий приклад:

Колір ліній сітки може бути будь-яким, так само як і розмір клітин. Змінюючи значення кольору у форматі rgba(0, 0, 0, 0.2), значення властивостей background-size: і background-color:, ви завжди зможете змінити текстуру, як завгодно.

2. Сітка на темному фоні

Створення темної текстури мало чим відрізняється від світлої, різниця в значеннях rgba-формату кольори лінійного градієнта і колір фону background-color, за замовчуванням заданий у межах темної палітри:

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

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

Живий приклад:

Сітка для окремих блоків

Для окремих блокових елементів сторінки, все теж саме, тільки необхідно додати виділений клас, у прикладі це .light-background для світлого тла .dark-background для темного відповідно:

/* Світлий фон */
.light-background{
background: linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
background-size: 1em 1em;
background-color: #fff;
}
/* Темний фон */
.dark-background {
background: linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(255, 255, 255, 0.1) 50%,rgba(0, 0, 0, 0) 52%),linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(255, 255, 255, 0.1) 50%,rgba(0, 0, 0, 0) 52%);
background-size: 1em 1em;
background-color: #303030;
}

/* Світлий фон */
.light-background{
background: linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
background-size: 1em 1em;
background-color: #fff;
}
/* Темний фон */
.dark-background {
background: linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(255, 255, 255, 0.1) 50%,rgba(0, 0, 0, 0) 52%),linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(255, 255, 255, 0.1) 50%,rgba(0, 0, 0, 0) 52%);
background-size: 1em 1em;
background-color: #303030;
}

Наприклад, ви вирішили виконати для div-контейнера фон у вигляді сітки у світлих або темних тонах, для цього буде достатньо прописати в теге

відповідний клас:

Живий приклад:

На цьому все! Залишається сказати кілька слів з приводу підтримки даного рішення браузерами. Все як завжди, сучасні браузери відмінно справляються IE сітку побачать користувачі не нижче 10-ї версії. Префікси функції лінійного градієнта для окремих браузерів в прикладі не використовував, якщо у когось виникнуть проблеми з відображенням, думаю додати самостійно буде не складно.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: