Фон у вигляді шахової дошки на чистому CSS3
Не так давно, я вже розповідав, як можна розлінованих фон в зошитових клітку за допомогою кількох рядків коду CSS, без використання зображень, текстур (патернів).
Сьогодні хочу продемонструвати найпростіший приклад заливки фону в більш велику клітку, щось на зразок шахової дошки. Може кому та й стане в нагоді в роботі, так як дизайнерські запити замовників часом просто непередбачувані)).
Як і у випадку з тетрадной клітинкою, будемо використовувати повторювані градієнти, що чергуються за кольором black і прозорості transparent. Принцип дуже простий, за основу беремо фон білого кольору background-color: white; і вже на нього накладаємо лінійні градієнти:
Розмір клітин і рівномірне їх розподіл по сторінці, регулюємо за допомогою background-size: і background-position: відповідно. Спробуйте наприклад, зменшити значення background-size: до 50px, а позиціонування залишити, як є, і ви отримаєте зовсім інший візерунок, до речі не менш складний))). Тож, експериментуючи з параметрами і розбавляючи іншими властивостями, можна досягти будь-яких результатів.
За підтримки браузерами: в Chrome-подібних все відображається як треба, Firefox і IE-шка видавали смужку з кута на кут клітин, що звичайно ж порушувало загальну картину, лікується зменшенням відсотка прозорості в градієнтах до 74%.
Буду всім вдячний, якщо підтримаєте проект - додавши блог в виключення AdBlock і поділіться посиланням на запис в своїх соц-мережах: