Фон в клітинку на чистому CSS

84

Фон в клеточку на чистом CSS

Напевно всі ви, зустрічали сайти, де основний фон, або ж фони окремих блоків з вмістом, виконані у вигляді клітин. Найчастіше для оформлення фону в клітинку використовують зображення різних фонових текстур (патернів). Мало хто знає, що при створенні клітинок, як в шкільному зошиті, можна обійтися без додаткових зображень, виключно засобами CSS.
Пропоную на розгляд найпростіший спосіб реалізації фонової заливки в клітинку на чистому CSS.

Все що нам потрібно, це створити два повторюваних градієнта, один з яких буде повернений на 90 градусів, а з допомогою властивості background-size: визначити необхідний розмір клітин:

body {
background: linear-gradient( #bbb, transparent 1px), linear-gradient( 90deg, #bbb, transparent 1px);
 background-size: 15px 15px;
background-position: center center;
}

body {
background: linear-gradient( #bbb, transparent 1px), linear-gradient( 90deg, #bbb, transparent 1px);
background-size: 15px 15px;
background-position: center center;
}

Відповідно колір ліній клітинок може бути будь-яким, так само як і їх товщина. Ну, а з допомогою background-size, в подальшому, можна буде легко змінювати розмір клітин, в залежності від ваших уподобань.

От і все! Тепер ви легко зможете відтворити фонові текстури у вигляді клітинок, без підключення зображень, при цьому клітини завжди будуть виглядати витончено при зміні розмірів вікна браузера.

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

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