Свежие CSS-паттерны

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

Надо сказать, что без SCSS эти паттерны были бы практически невозможны, так что Codepen с препроцессорами открыл для меня новые горизонты.

При создании паттернов ни одной картинки не пострадало.

Волны. Рюшки тоже сделаны градиентом!

See the Pen Thinking of Sea by yoksel (@yoksel) on CodePen.

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

See the Pen Css Pattern by yoksel (@yoksel) on CodePen.

Удивительно, но с помощью градиентов можно делать завитки. Я уже пробовала их делать другими способами, получалось так себе, а тут полноценные красивые спирали. Не верю своим глазам : )

See the Pen Frosty Spirals by yoksel (@yoksel) on CodePen.

Цветная бумага:

See the Pen Colored paper by yoksel (@yoksel) on CodePen.

Почтовая марка, края которой сделаны теми же градиентами. По сути — обратный вариант рюшек. Удивительно просто и изящно. Пробовала делать с border-image, но с градиентами ничего полезного не вышло. Картинки+border-image должны сработать, я не пробовала, потому что моей целью были градиенты. Плюс градиентов в данном случае состоит в том, что можно без проблем менять цвет и размер фигурной рамки, хотя для этого потребуется исходник в Sass. По-моему, здорово получилось:

See the Pen Postage stamp by yoksel (@yoksel) on CodePen.

Градиенты невероятны, рекомендую познакомиться с ними поближе, если ещё не.