» » Стили css для горизонтальных линий

Стили css для горизонтальных линий

Как красиво отделить в статье одну часть текста от другой? 
Для этого используют элемент hr. 
Тег hr задает разделительную горизонтальную линию. 
Линиями hr со стилями на css можно сделать очень красивые разделители. Можно сделать линии с тенями, с добавлением картинок, анимированные, с hover эффектами, градиентные, с зубчиками, разной толщины и так далее. 
Где ещё можно использовать тег <hr>? 
К примеру, вместо подчёркивания заголовка.Правда, подчёркивание будет с новой строки, но может кому-то это понравится. Можно каждую строку в списке отделить этой линией.
Подробнее о тег <hr> в сегодняшней статье.

Линии CSS

Линия слева

<hr width=100 align="left">

Линия с права


 <hr width=100 align="right"> 

Линия справа и слева цветные

Линия справа и слева цветные
<hr color="#0e5198"width=100 align="right">
<hr color="#6664b2"width=100 align="left">

Вертикальная линия

вертикальная
<hr noshade align="center" width="3" size="50">  

Вертикальная линия слева

<hr noshade align="left" width="1" size="60">

Вертикальная линия справа

<hr noshade align="right" width="1" size="60">

Простая линия

Простая линия
<hr class="hr-line" />
<style>
.hr-line {
margin: 20px 0;
padding: 0;
height: 0;
border: none;
border-top: 1px solid #333;
}
</style>

Двойная линия

Двойная линия
<hr class="hr-double">
<style>
.hr-double {
margin: 20px 0;
padding: 0;
height: 1px;
border: none;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
</style>

Многострочная линия

Многострочная линия
<hr class="hr-multiline">
<style>
.hr-multiline {
margin: 20px 0;
padding: 0;
height: 20px;
border: none;
color: #333;
background-image: linear-gradient(currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%);
background-size: 100% 3px;
}
</style>

Градиентная чёрная

Градиентная чёрная
<hr class="style-one">
<style>hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}</style>

Тонкая линия

Тонкая линия
<div class="style-five">
</div>
<hr class="style-five" />
<style>div.style-five {
height: 75px;
background: #fff url(image/cartoon.png) no-repeat scroll left;
background-size: 80px 75px;
margin-left: -40px;
}
hr.style-five
{
width: 95%;
margin-top: -40px;
border: 0;
border-bottom: 1px dashed black;
background: #70A8FF;
}</style>

Линия скобка

Линия скобка
<hr class="style-three" />
<style>
hr.style-three {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style-three:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}</style>

Пунктирная двойная линия рамкой

Пунктирная двойная рамкой
<hr class="style-seven" />
<style>hr.style-seven {
height:8px;
border: 2px dashed #999;
}</style>

Градиент 2

Градиент 2
<hr class="style-volna" />
<style>
hr.style-volna {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}</style>

Тень

Тень
<hr class="style-volna2" />
<style>
hr.style-volna2 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
</style>

Размытие

Размытие
<hr class="style-volna3" />
<style>
hr.style-volna3 {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style-five:after {
    content: "\00a0";
}</style>

Двухцветная линия

Двухцветная линия
<hr class="hr-two-color">
<style>
.hr-two-color {
margin: 20px 0;
padding: 0;
height: 0;
border: none;
border-top: 2px solid #ddd;
border-bottom: 2px solid #000;
}
</style>

Наклонная линия

Наклонная линия
<hr class="hr-inclined-left">
<style>
.hr-inclined-left {
margin: 25px 0 40px 0;
padding: 0;
height: 0;
border: none;
border-top: 1px solid #333;
transform:rotate(2deg);
} </style>

Наклонная линия 2

Наклонная линия 2
<hr class="hr-inclined-right">
<style>
.hr-inclined-right {
margin: 25px 0 40px 0;
padding: 0;
height: 0;
border: none;
border-top: 1px solid #333;
transform:rotate(-2deg);
} </style>

Трёхцветная линия

Трёхцветная линия
<hr class="hr-three-color">
<style>
.hr-three-color {
margin: 20px 0;
padding: 0;
height: 2px;
border: none;
border-top: 2px solid #ddd;
border-bottom: 2px solid #000;
background: mediumpurple;
}
</style>

Градиент

Градиент
<hr class="hr-horizontal-gradient">
<style>
.hr-horizontal-gradient {
margin: 20px 0;
padding: 0;
height: 6px;
border: none;
background: linear-gradient(45deg, #333, #ddd);
}
</style>

Вертикальные линии

Вертикальные линии
<hr class="hr-vertical-lines">
<style>
.hr-vertical-lines {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
color: orange;
background-image: linear-gradient(90deg, orange, orange 33.33%, transparent 33.33%, transparent 100%);
background-size: 3px 100%;
}
</style>

Вертикальный градиент

Вертикальный градиент
<hr class="hr-vertical-gradient">
<style>
.hr-vertical-gradient {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
background: linear-gradient(180deg, orange, blue);
}
</style>

Пунктир градиентный

Пунктир градиентный
<hr class="hr-dashed-gradient">
<style>
.hr-dashed-gradient {
margin: 20px 0;
padding: 0;
height: 2px;
border: none;
background: linear-gradient(to right, transparent 50%, #fff 50%),
linear-gradient(to right, blue, red);
background-size: 16px 2px, 100% 2px;
}
</style>

Линия с тенью

тень
<hr class="hr-shelf">
<style>
.hr-shelf {
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid #1f1209;
box-shadow: 0 20px 20px -20px #333;
width: 95%;
}
</style>

Линия с тенью 2

<hr class="hr-shadow">
<style>
.hr-shadow {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
border-top: 1px solid #333;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
</style>

Голубая линия 

<hr class="style-eight" />
<style>hr.style-eight {
height: 10px;
border: 1;
box-shadow: inset 0 9px 9px -3px rgba(11, 99, 184, 0.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}</style>

Зигзаг

Зигзаг
<hr class="hr" />
<style>
hr{
  border: none;
  height: 10px;
  background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;
  background-color: #fff;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 10px;
}
</style>
Можно менять в кодах цвет — выделила красным. Если есть желание, то можно и размеры
линии — выделила синим.
Что ещё можно менять в стилях:
align - выравнивание линии.
color - цвет линии.
size - толщина линии.
width - ширина линии.
noshade - рисует линию без трехмерных эффектов

Пунктирная с фоном

Пунктирная с фоном
<div class="style-five"></div>
<hr class="style-five">
<style>div.style-five {
height: 75px;
background: #fff url(image/cartoon.png) no-repeat scroll left;
background-size: 80px 75px;
margin-left: -40px;
}
hr.style-five
{
width: 95%;
margin-top: -40px;
border: 0;
border-bottom: 1px dashed black;
background: #70A8FF;
}</style>

Косые штрихи

Косые штрихи
<hr class="hr-sloping-lines">
<style>
.hr-sloping-lines {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
box-sizing: border-box;
background-position: 50%;
color: orange;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="orange"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
background-size: 6px 6px;
}
</style>

Анимированная волна

Анимированная волна
<hr class="hr" />
<style>
hr {
  border: none;
  margin: 30px 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='rgb(51, 122, 183)' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-2,10,-2 s 5,2,10,2 c 5,0,5,-2,10,-2 s 5,2,10,2'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-repeat: repeat-x;
  padding-bottom: 4px;
  background-size: auto 4px;
}
</style>

Бегущая жёлтая полоска 

Бегущая жёлтая полоска
<hr class="hr " />
<style>
hr {
  margin: 30px 0;
  border: 2px solid #cab9f0;
  position: relative;
  overflow: visible;
}
hr:after {
  content: "";
  border: 2px solid #ffff03;
  position: absolute;
  width: 20%;
  top: -2px;
  animation: anim-hr 5s linear infinite;
}
@keyframes anim-hr {
  0% {
  left: -20%;
  }
  100% {
  left: 100%;
  }
}
</style>

Линии крупными точками

Линии крупными точками
<hr class="hr-circle">

<style>
.hr-circle {
margin: 20px 0;
padding: 0;
height: 0;
border: none;
border-width: 0 0 5px;
border-style: solid;
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="8" height="4"><circle fill="slateblue" cx="1" cy="0.5" r="0.5"></circle></svg>') 0 0 100% repeat;
background-position: 50%;
box-sizing: border-box;
color: slateblue;
}
</style>

Картинка

Картинка
<div class="hr"><hr /></div>
<style>
div.hr {
  height: 40px;
  background: #fff url(ваша картинка) no-repeat scroll center;
}
div.hr hr {
  display: none;
}
</style>
Вставить картинку можно любую, на прозрачном фоне. Но нужно будет подобрать высоту (height) для неё. Выделила в коде синим.

Пульсирующая линия

Пульсирующая линия
<div class="hr"><hr /></div>
<style>
hr {
    border: none;
    height: 3px;
    margin: 40px 0;
    background-image: linear-gradient(to right, #FFF, #BFE2FF, #FFF);
}
hr:before,
hr:after {
    content: '';
    display: inline-block;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    border: 2px solid #BFE2FF;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
}
hr:after {
    animation: anim-hr 1s linear infinite;
}
@keyframes anim-hr {
    0% {
        width: 40px;
        height: 40px;
    }
    100% {
        width: 0;
        height: 0;
    }
}
</style>

  1. Анонимный25/6/21 16:18

    VarangaOfficial - варанга купить - все, что нужно знать об этом препарате. Воспользовавшись нашим порталам, вы получите возможность узнать всеисчерпывающую информацию касающуюся представленного средства. Лично увидеть данные о проведенных клинических исследований, прочесть реальные отзывы пользователей и врачей. Изучить инструкцию по использованию, прочесть об особенностях и методах работы мази, осмыслить, как работает крем Варанга, где необходимо заказывать сертифицированный, оригинальный препарат и, как не нарваться на фальсификат. Мы скурпулезно проверяем публикуемые данные. Предоставляем посетителям нашего онлайн-ресурса сведения, которые были почерпнуты исключительно из надежных источников. Если вы нашли признаки развития грибка или уже довольно продолжительное время, без ощутимых результатов пытаетесь избавиться от этого неприятного недуга, у нас на сайте вы найдете быстрый и простой способ решения проблемы. Приобщайтесь и живите здоровой полноценной жизнью. Благодаря нам, все ответы на самые волнующие вопросы, теперь собраны в одном месте на удобной в использовании и высоко информационном ресурсе.

    ОтветитьУдалить

Комментарии со спамом удаляются.