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



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


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


Итак, начнем с разметки. Для каждого вида кружева нам потребуется один элемент, всего их будет семь.


<div class="lace one"></div>
<div class="lace two"></div>
<div class="lace three"></div>
<div class="lace four"></div>
<div class="lace five"></div>
<div class="lace six"></div>
<div class="lace seven"></div>

Также пропишем общие стили для всех элементов с классом lace.


.lace {
	height: 70px;
	background: #222;
	margin-bottom: 15px;
}

Простейший орнамент выглядит как волнообразная линия.



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


.one  {
	background-image: radial-gradient(circle at 10px 0, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px);
	background-repeat: repeat-x;
	background-size: 20px 11px;
}

Сочетая разные цвета при создании градиента, можно достичь эффекта сборчатой ткани.



.two  {
	background-image: radial-gradient(circle at 15px 0, #360031 2px, #fba5ec 20px, rgba(255,255,255,0) 21px);
	background-repeat: repeat-x;
	background-position: 0 0;
	background-size: 30px 21px;
}

Здесь, как и в остальных примерах, ключевым является свойство background-repeat со значением repeat-x, дающее повторение элементов орнамента по горизонтали.


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



.three  {
	background-image:
		radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px),
		radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px),
		radial-gradient(circle at 15px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px),
		radial-gradient(circle at 5px 5px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px);
	background-repeat: repeat-x;
	background-position: 0 0, 15px 6px, 0 0, 25px 9px;
	background-size: 30px 21px, 30px 21px, 30px 21px, 30px 20px;
}

Настоящая кружевная тесьма часто содержит переплетенные под углом нити.



Для имитации такой сетчатой структуры кружева хорошо подойдет линейный градиент. Посмотрим на простом примере.



Наклонные линии, образующие ромбы, отрисованы с помощью двух линейных градиентов разных направлений — to right bottom и to left bottom. Для полноты картины я добавила полукруги по краю с помощью радиального градиента.


.four {
	background-image:
		linear-gradient(to right bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px),
		linear-gradient(to left bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px),
		radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 7px);
	background-repeat: repeat-x;
	background-size: 12px 20px, 12px 20px, 12px 11px;
	background-position: 0 0, 0 0, 0 20px;
}

Однако для того чтобы получить сетку, необходимо повторить линии не только по горизонтали, но и по вертикали. Поэтому в следующем примере зададим свойству background-repeat значение repeat вместо repeat-x.



.five {
	background-image:
		linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px),
		linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px);
	background-repeat: repeat;
	background-size: 12px 14px, 12px 14px, 12px 11px;
	background-position: 0 0, 0 0, 0 20px;
}

А теперь попробуем изобразить кружевную тесьму на основе нашей сетки.



В данном случае сетчатый узор будет удобно разместить в псевдоэлементе .six:before, тогда как для краевого декора кружева мы используем фон основного элемента div.six, созданный за счет комбинации нескольких радиальных градиентов. Фон отстоит от верхнего края элемента на высоту, равную высоте псевдоэлемента .six:before, благодаря свойству background-position.


.six {
	background-image:
		radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fff 6px, rgba(255,255,255,0) 7px),
		radial-gradient(circle at 12px 0, rgba(255,255,255,0) 11px, #fff 12px, rgba(255,255,255,0) 13px),
		radial-gradient(circle at 12px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px),
		radial-gradient(circle at 12px 12px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px),
		linear-gradient(to left, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px);
	background-repeat: repeat-x;
	background-position: 6px 35px, 6px 39px, 6px 42px, -6px 43px, 8px 45px;
	background-size: 12px 12px, 24px 13px, 24px 12px, 24px 24px, 24px 8px;
}
.six:before {
	content: "";
	display: block;
	height: 35px;
	background-image:
		linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px),
		linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px);
	background-repeat: repeat;
	background-size: 12px 14px, 12px 14px, 12px 11px;
	background-position: 0 0, 0 0, 0 20px;
}

И напоследок поэкспериментируем с толщиной линий, чтобы создать кружево с более реалистичной текстурой.



.seven {
	background-image:
		radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px),
		radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px);
	background-repeat: repeat-x;
	background-position: 0 29px, 0 33px;
	background-size: 12px 12px;
}
.seven:before {
	content: "";
	display: block;
	height: 31px;
	background-image:
		linear-gradient(to right bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px),
		linear-gradient(to left bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px);
	background-repeat: repeat;
	background-size: 6px 12px, 6px 12px, 12px 11px;
	background-position: 0 0, 0 0, 0 20px;
}

Этот пример очень похож на предыдущий. Основное отличие состоит в положении цветов градиента.


radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px)

Пока на этом все. Вот демо готовых орнаментов. Фантазируйте и рисуйте симпатичные узоры с удовольствием.

Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

    Пост, конечно, +1 получил )
    • 0
      Хороший вопрос. Я тоже часто думаю стоит ли рамочку сделать на css или картинкой или стоит ли окно полностью нарисовать и в разметки получить только картину на фоне и текст :-) Очень хорошая статья надо только подумать где можно применить в практике сия метод.
      • 0
        В общем случае вы правы, но svg еще много где глючит, так что данная техника имеет право на существование.
        • +1
          Cпасибо! Реализация на CSS в моем случае, в первую очередь, связана с желанием поближе подружиться с CSS и его возможностями. А в целом, думаю, графика, действительно уместнее в большинстве подобных ситуаций. Многое, на мой взгляд, зависит от трудозатрат верстальщика. Нарисовать фоновую волнистую линию градиентом — почему бы и нет. А вот последние мои примеры с привлечением псевдоэлементов и кучи градиентов получились довольно громоздкими. Не исключаю использование SVG фона вместо них на будущем сайте. Как-то оно компактнее.
          • 0
            Разве что нужно где-то (где?) на лету изменять/анимировать…
            • 0
              Никакого холивара, просто с помощью CSS подобное делать не нужно, CSS не для рисования.
            • +2
              К сожалению такие вещи почти неюзабельны в реальном мире, подобные комплексные градиенты очень тяжелы для браузера. Добавите к сайту всяких анимаций и прочей фигни и половина компов с некоторыми браузерами просто сдохнет (тут именно фишка в разных сочетаниях, встречал много демок которые у создателя «летали», а на моем 3хлетнем средненьком ноуте я лицезрел лагодром с 15 фпс). В плане прожорливости, готовая картинка с повторением это просто детский сад, на фоне подобного градиента.
              • 0

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

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

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

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

                А без цикличного HTML это можно сделать, только на CSS?
                • 0
                  Спасибо. Да, конечно, можно. Так оно и сделано в примерах. Один узор — один div.
                  • 0
                    … простите, а в одном диве как так сделать? Или по бордеру одного дива? Или по одному бордеру избранного дива?
                    • 0
                      Чтобы получить орнамент по одному бордеру избранного дива достаточно скопировать стили любого примера прямо из статьи, создать 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 — ко второму и т.д.
                      Можете попробовать добавить еще градиентов, усложнить рамку из демо на ваш вкус. Поделитесь, пожалуйста, если что-то симпатичное получится.
              • 0
                Круто, конечно, но мне кажется, что для подобного лучше использовать border-image
                • 0
                  Если вы имеете в виду использование border-image с градиентом, воспроизвести примеры таким образом будет проблематично без поддержки множественных значений border-image. А если речь идет о border-image и картинке, то да, хорошая мысль.
                • 0
                  Сразу вспомнилось как делал свой динамичный bg по мотивам css3 patterns gallery от Lea Verou. Тоже было интересно поэкспериментировать с css3.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.