Мереживні орнаменти на 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 bottom right
та
to left bottom
. Для повноти картини я додала напівкола по краю з допомогою радіального градієнта.
.four {
background-image:
linear-gradient(right to 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(right to 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(right to 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(right to 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)

Поки на цьому все. Ось демо готових орнаментів. Фантазуйте і малюйте симпатичні візерунки з задоволенням.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.