Свежие CSS-паттерны
Неожиданно увлеклась темой CSS-паттернов и сделала несколько новых. Меня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения.
Надо сказать, что без SCSS эти паттерны были бы практически невозможны, так что Codepen с препроцессорами открыл для меня новые горизонты.
При создании паттернов ни одной картинки не пострадало.
Волны. Рюшки тоже сделаны градиентом!
Сложный паттерн из кучи деталек. По-моему, не пригоден для реальной жизни:
Удивительно, но с помощью градиентов можно делать завитки. Я уже пробовала их делать другими способами, получалось так себе, а тут полноценные красивые спирали. Не верю своим глазам : )
Цветная бумага:
Почтовая марка, края которой сделаны теми же градиентами. По сути — обратный вариант рюшек. Удивительно просто и изящно.
Пробовала делать с border-image
, но с градиентами ничего полезного не вышло.
Картинки+border-image
должны сработать, я не пробовала, потому что моей целью были градиенты.
Плюс градиентов в данном случае состоит в том, что можно без проблем менять цвет и размер фигурной рамки, хотя для этого потребуется исходник в Sass.
По-моему, здорово получилось:
Градиенты невероятны, рекомендую познакомиться с ними поближе, если ещё не.