Фон у вигляді шахової дошки на чистому CSS3

34

Фон в виде шахматной доски на чистом CSS3

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

Як і у випадку з зошитового клітинкою, будемо використовувати повторювані градієнти, що чергуються за кольором black і прозорості transparent. Принцип дуже простий, за основу беремо фон білого кольору background-color: white; і вже на нього накладаємо лінійні градієнти:

body {
background-color: white;
background-image: linear-gradient( 45deg,black 25%, transparent 25%, transparent 74%, black 75%, black),
linear-gradient( 45deg,black 25%, transparent 25%, transparent 74%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
}

body {
background-color: white;
background-image: linear-gradient( 45deg,black 25%, transparent 25%, transparent 74%, black 75%, black),
linear-gradient( 45deg,black 25%, transparent 25%, transparent 74%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
}

Розмір клітин та рівномірний їх розподіл за сторінці, регулюємо за допомогою background-size: і background-position: відповідно. Спробуйте наприклад, зменшити значення background-size: 50px, а позиціонування залишити, як є, і ви отримаєте зовсім інший візерунок, до речі не менш мудрий))). Так що експериментуючи з параметрами і розбавляючи іншими властивостями, можна досягти будь-яких результатів.

За підтримки браузерами: Chrome-подібних всі відображається як треба, Firefox і IE-шка видавали смужку з кута на кут клітин, що звичайно ж порушувало загальну картину, лікується зменшенням відсотка прозорості в градієнтах до 74%.

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

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