CSS-паттерны

07/02/2014

Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.

Общий принцип такой: создается градиент, который нужно повторить. По умолчанию он займет всю доступную площадь, но если задать размер фону — получится картинка желаемого размера, которая замостит собой весь фон элемента. Если значения градиента задавать в процентах или em, потом можно будет легко управлять размером узора редактируя размер шрифта и/или background-size.

Например, можно сделать простые полоски:

background: linear-gradient(
  white 50%,
  transparent 50%
);
background-size: 2em 2em;
background-color: black;

See the Pen lcbAa by yoksel (@yoksel) on CodePen.

Белые полоски чередуются с прозрачностью, и могут быть положены на любой фон. Управляя границей между цветом и прозрачностью можно регулировать ширину полос.

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

See the Pen IeDAp by yoksel (@yoksel) on CodePen.

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

See the Pen Diagonal stripes by yoksel (@yoksel) on CodePen.

С помощью разноцветных полосок можно делать небольшие декоративные элементы:

See the Pen zfcjm by yoksel (@yoksel) on CodePen.

Если нужен полосатый фон посложнее, имеет смысл обратить внимание на принцип цикады:

The Cicada Principle and Why It Matters to Web Designers
Принцип цикады и почему он важен для веб-дизайнеров (перевод предыдущей статьи)
Принцип цикады на чистом CSS

Принцип заключается в использовании нескольких фонов разного размера. Это означает, что стыковаться они тоже будут в разных местах, таким образом на фоне невозможно будет найти повторяющиеся участки или места стыковки. По-моему, гениально придумано.

Фоны накладываются друг на друга от самого крупного (сверху) до самого мелкого (в самой глубине). В итоге стыки самого мелкого и повторяющегося будут перекрыты вышележащими слоями.

Я сделала 4 полосатых фона разного цвета и задала им разный размер:

background-size: 7em 7em, 5em 5em, 3em 3em, 1em 1em;

Это простые числа, то есть те, которые не делятся ни на что кроме себя.

Вот как выглядит результат (ссылка на полный размер):

See the Pen khprw by yoksel (@yoksel) on CodePen.

Похоже на волшебство : )

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

See the Pen jBobD by yoksel (@yoksel) on CodePen.

Или в клетку:

See the Pen zkImJ by yoksel (@yoksel) on CodePen.

С простыми линиями всё довольно понятно, но что если нужен паттерн из косых линий?

repeating-linear-gradient должен бы помочь, но на практике градиент ведет себя как попало (порастягивайте окно браузера).

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются большинством браузеров.

Попробуем сделать простыми полосками, повернутыми на 45°.

Примерный код:

background: linear-gradient(-45deg,
  $transparent 50%,
  darkkhaki 50%, darkkhaki 60%,
  $transparent 60%
);

Результат:

See the Pen uBdhC by yoksel (@yoksel) on CodePen.

В примере хорошо видно, что паттерн состоит из повторяющихся квадратиков, градиент идет из нижнего левого угла в верхний правый, но в противоположных углах ничего нет, и линия получается прерывистой.

Чтобы закрыть пробелы, добавим ещё один градиент:

background: linear-gradient(-45deg,
      $transparent 50%,
      darkkhaki 50%, darkkhaki 60%,
      $transparent 60%
      ),
    linear-gradient(-45deg,
      crimson 10%,
      $transparent 10%
      );

Я сделала уголок ярким, чтобы было видно куда он попал:

See the Pen Diagonal stripes by yoksel (@yoksel) on CodePen.

Красим уголок в нужный цвет и получаем аккуратные косые линии:

See the Pen Diagonal stripes by yoksel (@yoksel) on CodePen.

Правда, пришлось немного подрегулировать точки остановки цветов в первом градиенте (50% → 49.9%), но зато теперь стыков вообще не видно.

Если вместо угла указать направление ключевыми словами, например to left top, это позволит изменять угол градиента через изменение его размера, потому что в этом случае градиент будет всегда направлен из одного угла в другой независимо от background-size.

Примерный код:

background: linear-gradient(to left top,
      transparent 48.9%,
      skyblue 51%, skyblue 78%,
      transparent 80%
      ),
    linear-gradient(to left top,
      skyblue 28%,
      transparent 30%
      );
  background-size: 2em 6em;

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

See the Pen Diagonal stripes by yoksel (@yoksel) on CodePen.

В некоторых случаях края линий становятся зубчатыми, причем их отрисовка зависит от браузера: Chrome справляется лучше, в Firefox видны ступеньки. Чтобы сделать край плавным, можно сделать стык между цветами не четкий, а размытый, шириной 1-2%. Также следует помнить о проблеме с прозрачными цветами в Firefox — это решается использованием нужного оттенка с полной прозрачностью.

Экспериментируя с линиями можно получить другие интересные узоры:

See the Pen Diagonal stripes by yoksel (@yoksel) on CodePen.

See the Pen Diamonds by yoksel (@yoksel) on CodePen.

See the Pen Tablecloth by yoksel (@yoksel) on CodePen.

See the Pen Corners by yoksel (@yoksel) on CodePen.

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

See the Pen Corners by yoksel (@yoksel) on CodePen.

Чтобы граница градиента была ровной, без зубчиков, границу прозрачности нужно делать чуть дальше, чем точка остановки цвета. Вебкиты, как обычно, лучше справляются со сглаживанием.

Вот ещё пример:

See the Pen Circles and dottes by yoksel (@yoksel) on CodePen.

Принцип создания узоров тот же, что и для линейных градиентов. Причем сочетая линейные и радиальные градиенты можно получить из простых геометрических форм более сложные:

See the Pen Hearts by yoksel (@yoksel) on CodePen.

See the Pen Drops by yoksel (@yoksel) on CodePen.

Можно делать довольно сложные узоры, для этого лучше всего использовать возможности препроцессоров:

See the Pen Waves by yoksel (@yoksel) on CodePen.

See the Pen Circles by yoksel (@yoksel) on CodePen.

Минусы таких паттернов обычно в длине и сложности кода, а также в недостаточной поддержке старыми браузерами. Для них может потребоваться картинка. Плюсы — градиенты ничего не весят, их не надо запрашивать с сервера, и можно легко менять цвета и размер узора.

Больше паттернов можно увидеть во вдохновляющей галерее от Lea Verou: lea.verou.me/css3patterns/.

Урок по паттернам от Lea Verou: CSS3 Patterns, Explained

Метки:: градиенты,; эксперименты,; паттерны,; рисование на CSS