Разделительная линия в виде волны на css
Продолжаем творить трюки на чистом css. Сегодня я расскажу, как на средствами css сделать красивую разделительную линию в виде волны на сайте. Ее можно использовать, например, для визуального разделения постов на блоге, или отдельных блоков в сайдбаре.
Когда-то я уже рассказывал о стильной разделительной линии на css. Но там применялся тег-динозавр hr с парочкой хитрых правил в стилях, позволявших поиграться с тенью.
Сегодня же совсем иной расклад. Для отображения линии в виде волны придется добавить в правила гораздо больше хитростей и применять уже не просто css, а css3. Вэлкам!
Для начала обычный html код. Линии мы будем выводить пустыми блоками div со специальными наборами правил. Пустые блоки — это, конечно же, зло. Но иногда приходится с ним мириться.
<div class="wave">
<div class="line line1"></div>
<div class="line line2"></div>
</div>
<div class="wave">
<div class="smallLine smallLine1"></div>
<div class="smallLine smallLine2"></div>
</div>
<div class="wave">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
<div class="wave">
<div class="ellipse ellipse1"></div>
<div class="ellipse ellipse2"></div>
</div>
Здесь мы показали 4 вида линий. А вот так будет выглядеть набор стилей в css для них:
.wave {
overflow: hidden;
position: relative;
width: 630px;
height: 50px;
}
.line {
position: absolute;
width: 630px;
height: 26px;
}
.line1 {
background: linear-gradient(45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.line2 {
background: linear-gradient(-45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.line {
background-size: 50px 50px;
}
.smallLine {
position: absolute;
width: 630px;
height: 5px;
}
.smallLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine {
background-size: 10px 10px;
}
.circle {
position: absolute;
width: 630px;
height: 20px;
background: radial-gradient(16px, transparent, transparent 4px, black 4px, black 10px, transparent 11px);
background-size: 30px 40px;
}
.circle2 {
top: 20px;
left: 15px;
background-position: 0px -20px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 630px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
Здесь мы использовали такие фишки как linear-gradient и radial-gradient из арсенала css3.
Есть и другой вариант применения разделительной линии в виде волны (самая нижняя на иллюстрации в начале поста). Ее можно применять в конце какого-либо блока, как нижнее оформление. Код достаточно прост. Сначала html:
<div class="wave"></div>
В правилах css применим псевдоэлементы :before и :after. О них вы можете прочитать здесь. Вот как будет выглядеть код:
.wave{
width: 630px;
background: #333;
height: 30px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #19d1ff 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, #19d1ff 12px, transparent 13px);
}
Вот и все! Дерзайте!
