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

Всё что нам нужно, это создать два повторяющихся градиента, один из которых будет повернут на 90 градусов, а с помощью свойства background-size: определить необходимый нам размер клеток:
[code css]
.grid-gradient {
background:linear-gradient(#bbb, transparent 1px),
linear-gradient(90deg,#bbb, transparent 1px);
background-size: 10px 10px;
background-position: center center;
border: 1px solid mediumvioletred;
}
[/code]

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

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

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

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

фффффффффффффффффффф

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *