Главная » Сниппеты » Фон в виде шахматной доски на чистом CSS3

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

Фон в виде шахматной доски на чистом 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;
}

 

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

По поддержке браузерами: в Chrome-подобных всё отображается как надо, Firefox и IE-шка выдавали полоску с угла на угол клеток, что конечно же нарушало общую картину, лечится уменьшением процента прозрачности в градиентах до 74%.

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

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

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

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

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

Отправляя к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