Совет Приукрасим разделительную линию

[Wildcdu]

Как обычно кратенько
[CSS]hr {
padding-bottom: 1px;
background-color: #9b9b9b;
border-bottom:1px solid #F4F4F4;
}[/CSS]
Размеры и цвет можете изменить по своему желанию и вставить в конец файла style.css
Это разбавит Ваше оформление и придаст индивидуальность.

 

[Wildcdu]

Отдельно можем сделать так
Для супер оформления!
Это в CSS добавим
[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 {
/* Offset to make squigglies line up */
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;
}[/CSS]
ну а так можем вставлять один из нужных вариантов.

У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.

Можно сделать с применением псевдо элементов
[CSS].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);
}[/CSS]
Вставляем так.
<div class="wave"></div>

Можно чуток подправить и одна из линий (на Ваш вкус) может вставляться автоматом например в конце статьи...
Дерзайте все в Ваших руках!

 

[Wildcdu]

Как применить картинки в качестве разделительной линии.

1. Использовать тэг hr. К нему прописываем в стилях css следующий набор правил:

[CSS]hr{
background:url(line.gif) repeat-x top left;
border: 0;
height:10px; /* высота нашей картинки-линии */
}[/CSS]

Чтобы картинка не повторялась, а была в единственном экземпляре и располагалась по центру

background:url(line.gif) no-repeat top center;

2. Использовать картинку в качестве фона для блока, в котором она будет изображать разделительную линию.

background:url(line.gif) no-repeat bottom center;

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


Пару примеров для CSS вариантов
[CSS]hr {
border: 0;
height: 30px;
border-style: solid;
border-color: #8c8c8c;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #8c8c8c;
border-width: 0 0 1px 0;
border-radius: 20px;
}[/CSS]

[CSS]hr {
padding: 0;
border: none;
border-top: medium double #8c8c8c;
color: #8c8c8c;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: #fff;
}[/CSS]