Чешуя на градиентах

21 апреля 2014

В этом посте я расскажу как делать повторяющийся чешуйчатый фон на CSS-градиентах. Будем использовать градиенты в сочетании со свойством background-size.

Подготовим контейнер

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

Создадим фрагмент фона

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

radial-gradient(circle at 50% 100%, white 71%, transparent 71%, transparent)

Но это еще не полноценная чешуя, нужно добавить два чешуйки другого цвета. Для этого добавим два градиента выше первого:

radial-gradient(circle at 100% 150%, silver 40%, transparent 40%, transparent)

radial-gradient(circle at 0 150%, silver 40%, transparent 40%, transparent)

И ниже первого:

radial-gradient(circle at 100% 50%, silver 49%, transparent 50%, transparent)

radial-gradient(circle at 0 50%, silver 49%, transparent 50%, transparent)

Размножим фон

После этого зададим размер 50px 25px фрагменту чешуи и размножим его на весь контейнер. Вот, что получилось:

Готовый код можете посмотреть в CSS-редакторе у класса .example.