Главная » Сниппеты » Фон в клеточку на чистом CSS

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

Фон в клеточку на чистом 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, в последующем, можно будет легко изменять размер клеток, в зависимости от ваших предпочтений.
 

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

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Как мне нравится Ваш ресурс!!! Вче четко и понятно. Фон в школьную клеточку давно искал. Спасибо!

    Ответить
    • driver:

      Вам спасибо, правильная бегущая строка у вас на сайте.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru