HTML/CSS

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

Сборник горизонтальных линий с тегом <hr> разных видов и стилей.

1

Сплошные линии

<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="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-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: orange;
}
</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-gradient">

<style>
.hr-vertical-gradient {
    margin: 20px 0;
    padding: 0;
    height: 10px;
    border: none;
    background: linear-gradient(180deg, orange, blue);
}
</style>

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

<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="hr-washed">

<style>
.hr-washed {
    margin: 20px 0;
    padding: 0;
    height: 0;
    border: none;
    box-shadow: 0 0 10px 1px black;
}
</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-dashed">

<style>
.hr-dashed {
    margin: 20px 0;
    padding: 0;
    height: 0;
    border: none;
    border-top: 2px dashed #ddd;
}
</style>

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

<hr class="hr-dashed-bg">

<style>
.hr-dashed-bg {
    margin: 20px 0;
    padding: 0;
    height: 0;
    border: none;
    border-top: 2px dashed #ddd;
    background: #999;
}
</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>
3

Точечные линии

<hr class="hr-dotted">

<style>
.hr-dotted {
    margin: 20px 0;
    padding: 0;
    height: 0;
    border: none;
    border-top: 2px dotted #ddd;
}
</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="orange" cx="1" cy="0.5" r="0.5"></circle></svg>') 0 0 100% repeat;
    background-position: 50%;
    box-sizing: border-box;
    color: orange;
}
</style>
4

Разное

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

<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-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-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-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>
04 сентября 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.