Про CSS

Клеточки на CSS

Когда возникает необходимость сделать клеточки как в школьной тетради не используя при этом изображения, первым делом в голову приходят градиенты.

Для этого создадим два повторяющихся градиента, один из которых повернут на 90 градусов:

DIV {
  background:
    repeating-linear-gradient(
      transparent,transparent 20px, yellowgreen 22px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,transparent 20px, yellowgreen 22px
    );
}

Смотрим что получается: к сожалению, линии отрисовываются как попало, а при изменении размера окна могут совсем пропадать.

Лучше всех с отображением пока справляется Safari, но и в нем ширина линий "плавает".

Плюс способа: не зависит от размеров контейнера. Минус: некорректное отображение.

Другой способ, который пришел мне в голову — использовать box-shadow.

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

.grid-shadow:before,
.grid-shadow:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
}

.grid-shadow:before {
  right: 0;
  border-top: 1px solid steelblue;
  box-shadow:
    0 20px 0 steelblue,
    0 40px 0 steelblue,
    0 60px 0 steelblue,
    0 80px 0 steelblue,
    0 100px 0 steelblue,
    0 120px 0 steelblue,
    0 140px 0 steelblue,
    0 160px 0 steelblue,
    0 180px 0 steelblue,
    0 200px 0 steelblue,
    0 220px 0 steelblue;
}
.grid-shadow:after {
  bottom: 0;
  border-left: 1px solid steelblue;
  box-shadow:
    20px 0 0 steelblue,
    40px 0 0 steelblue,
    60px 0 0 steelblue,
    80px 0 0 steelblue,
    100px 0 0 steelblue,
    120px 0 0 steelblue,
    140px 0 0 steelblue,
    160px 0 0 steelblue,
    180px 0 0 steelblue,
    200px 0 0 steelblue,
    220px 0 0 steelblue,
    240px 0 0 steelblue,
    260px 0 0 steelblue,
    280px 0 0 steelblue,
    300px 0 0 steelblue,
    320px 0 0 steelblue,
    340px 0 0 steelblue,
    360px 0 0 steelblue,
    380px 0 0 steelblue,
    400px 0 0 steelblue,
    420px 0 0 steelblue,
    440px 0 0 steelblue,
    460px 0 0 steelblue,
    480px 0 0 steelblue;
}

Никакой красоты и многократные повторения. Однако результат во всех браузерах выглядит аккуратно:

Плюс способа: железобетонность, не зависит от изменения размеров окна браузера. Минусы:

  • избыточный код;
  • многократные повторения цвета (неудобно для перекрашивания);
  • зависимость от размеров блока. Можно сделать сетку с запасом по размерам (что ещё больше раздует код) либо использовать только для элементов с фиксированными размерами.

Upd: Свойство background-size легко и изящно решает задачу:

.grid-gradient {
  background:
    linear-gradient(
    mediumvioletred, transparent 1px
    ),
    linear-gradient(
    90deg,
    mediumvioletred, transparent 1px
    );
  background-size: 10px 10px;
  background-position: center center;
  border: 2px solid mediumvioletred;
}

При этом с помощью background-size можно легко менять размер клеток.

Ссылки по теме:
CSS-градиенты: линейные градиенты
Box shadow
Метки:
эксперименты, 
градиенты, 
тени
Наверх