Фон в клеточку на чистом 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;
}

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

 
Вот и всё! Теперь вы легко сможете воссоздать фоновые текстуры в виде клеточек, без подключения изображений, при этом клетки всегда будут изящно смотреться при изменении размеров окна браузера.

Вам надоело тратить время на работу с англоязычными шаблонами? В таком случае, вам точно придется по душе та информация, о который мы собираемся с вами поделиться. На маркетплейсе TemplateMonster теперь можно ознакомиться с новейшей коллекцией HTML шаблонов на русском языке. Тексты для каждого из шаблонов были прописаны вручную. А сам процесс создания сайта не вызовет никаких трудностей. С помощью простого визуального редактора, можно наблюдать за всеми изменениями в дизайне.

С Уважением, Андрей .

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