Кружевные орнаменты на CSS

[@Vorchun]

Красиво, но можно я подниму холиварный вопрос: почему CSS, а не графика (например, SVG)? Разве CSS для рисования? Можно на нем? Да. Но не корректней ли графику делать графикой? Вашем мнение?

Пост, конечно, +1 получил )

[@D_E_S]

Хороший вопрос. Я тоже часто думаю стоит ли рамочку сделать на css или картинкой или стоит ли окно полностью нарисовать и в разметки получить только картину на фоне и текст :-) Очень хорошая статья надо только подумать где можно применить в практике сия метод.

[@aegnis]

Cпасибо! Реализация на CSS в моем случае, в первую очередь, связана с желанием поближе подружиться с CSS и его возможностями. А в целом, думаю, графика, действительно уместнее в большинстве подобных ситуаций. Многое, на мой взгляд, зависит от трудозатрат верстальщика. Нарисовать фоновую волнистую линию градиентом — почему бы и нет. А вот последние мои примеры с привлечением псевдоэлементов и кучи градиентов получились довольно громоздкими. Не исключаю использование SVG фона вместо них на будущем сайте. Как-то оно компактнее.

[@savostin]

Разве что нужно где-то (где?) на лету изменять/анимировать…

[@lifestyle]

Никакого холивара, просто с помощью CSS подобное делать не нужно, CSS не для рисования.

[@Ronnie_Gardocki]

К сожалению такие вещи почти неюзабельны в реальном мире, подобные комплексные градиенты очень тяжелы для браузера. Добавите к сайту всяких анимаций и прочей фигни и половина компов с некоторыми браузерами просто сдохнет (тут именно фишка в разных сочетаниях, встречал много демок которые у создателя «летали», а на моем 3хлетнем средненьком ноуте я лицезрел лагодром с 15 фпс). В плане прожорливости, готовая картинка с повторением это просто детский сад, на фоне подобного градиента.

[@Serator]

А что не так с генерируемой картинкой? Браузер ее отрисовал и все, далее просто копирует как тот же растр, по сути все то же самое.

[@Ronnie_Gardocki]

Я видел множество примеров где простой (в плане внешнего вида) градиент чуть ли не убивал браузер, из-за слишком большой сложности в плане отрисовки. Естественно речь идет о случаях когда параллельно шла тяжелая анимация. С картинкой там бы все было легко и просто.

[@Serator]

Интереса ради не могли бы привести пример? Меня всегда интересовали вопросы производительности и изучить в этом плане градиенты было бы увлекательным занятием для меня.

[@Ronnie_Gardocki]

Если бы был пример на руках, я бы его привел в первом комментарии. Просто помню что видел много разнообразных градиентов от Ana Tudor на codepen, и многие из них дико тормозили с анимациями на моем компе, в то время как у нее и некоторых других юзеров все было идеально. Сейчас пытался найти но не получилось, уж слишком много у нее демок.

[@customtema]

Браво! Красота!

А без цикличного HTML это можно сделать, только на CSS?

[@aegnis]

Спасибо. Да, конечно, можно. Так оно и сделано в примерах. Один узор — один div.

[@customtema]

… простите, а в одном диве как так сделать? Или по бордеру одного дива? Или по одному бордеру избранного дива?

[@aegnis]

Чтобы получить орнамент по одному бордеру избранного дива достаточно скопировать стили любого примера прямо из статьи, создать div и добавить ему соответствующий класс. Для того чтобы увидеть узор, задайте блоку темный цвет фона и некоторую высоту (в примерах это 70px), или просто разместите в нем нужный контент.
Также, если правильно поняла, вы хотите «нарисовать» узор по всему периметру блока, и блок должен быть только один. Это можно сделать, воспользовавшись множественными значениями свойств background-repeat, background-size и background-position. Вот, сделала демо, где используются четыре градиента.

	
radial-gradient(circle at 10px 0, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 11px 10px, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 10px 11px, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 0 10px, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px);

Вид и положение каждого из градиентов определены соответствующими значениями указаных свойств. То есть в строке background-position: top left, top right, bottom left, top left; значение top left относится к первому градиенту, top right — ко второму и т.д.
Можете попробовать добавить еще градиентов, усложнить рамку из демо на ваш вкус. Поделитесь, пожалуйста, если что-то симпатичное получится.

[@customtema]

Спасибо!

[@SPAHI4]

Круто, конечно, но мне кажется, что для подобного лучше использовать border-image

[@aegnis]

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

[@cane]

Сразу вспомнилось как делал свой динамичный bg по мотивам css3 patterns gallery от Lea Verou. Тоже было интересно поэкспериментировать с css3.