Вариант 1
Простой пример с двумя точками.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
hr { margin: 30px; text-align: center; border: none; } hr:before, hr:after { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #BFE2FF; margin: 0 6px; } |
Вариант 2:
Пример с тремя точками, которые плавно меняют свой цвет.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
hr, hr:before, hr:after { content: ""; background: #BFE2FF; display: block; height: 14px; width: 14px; border-radius: 50%; position: absolute; animation: anim-hr 6s linear infinite; border: 0; overflow: visible; } hr:before { left: -32px; } hr:after { left: 32px; } hr { position: relative; margin: 30px auto; } @keyframes anim-hr { 0% { background: #BFE2FF; } 50% { background: #337AB7; } 100% { background: #BFE2FF; } } |
Вариант 3:
Несколько точек с использованием SVG.
|
1 2 3 4 5 6 7 |
hr { margin: 30px auto; border-width: 0 0 8px; 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="rgb(191, 226, 255)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat; width: 216px; } |
Вариант 4:
Еще один пример на SVG c анимацией.
|
1 2 3 4 5 6 7 8 9 |
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; } |
Вариант 5:
Пример с бегущей линией.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
hr { margin: 30px 0; height: 4px; background: #BFE2FF; position: relative; overflow: hidden; border: none; } hr:after { content: ""; height: 4px; background: #337AB7; position: absolute; width: 20%; top: 0; animation: anim-hr 5s linear infinite; } @keyframes anim-hr { 0% { left: -20%; } 100% { left: 100%; } } |
Вариант 6:
Наклонная линия с градиентом и контентом по середине (на примере это солнышки).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
hr { position: relative; display: block; margin-top: 60px; margin-bottom: 60px; height: 3px; border:none; background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #337AB7, #BFE2FF); background-size: 18px, 100%; transform: rotate(-5deg); transform-origin: 50% 0%; overflow: visible; } hr:after { content: '\2600 \2600 \2600'; white-space: pre; font-size: 20px; display: block; position: absolute; top: 1px; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; color: #337AB7; } hr:before { content: ''; width: 120px; height: 10px; display: block; position: absolute; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; background: #FFF; } |
Вариант 7:
Еще одна линия с градиентом и небольшой анимацией.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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; } } |
Вариант 8:
Пример горизонтальной линии с тенью.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
hr { height: 20px; margin: 30px auto; width: 70%; background-image: radial-gradient(farthest-side at 50% -50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); position: relative; border: none; } hr:before { height: 1px; position: absolute; top: -1px; left: 0; right: 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0)); } |
Вариант 9:
Зигзагообразная линия, сделанная линейным градиентом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
hr { position: relative; font-size: 16px; height: 16px; border: 0; width: 50%; margin: 30px auto; } hr:before, hr:after { content: ""; display: block; position: absolute; left: 0; right: 0; background-size: 18px 100%; height: inherit; } hr:before { background-image: linear-gradient(315deg, rgba(191, 226, 255, 1) 30%, transparent 30%), linear-gradient(45deg, rgba(191, 226, 255, 1) 30%, transparent 30%); background-position: 50%; top: -8px; } hr:after { background-image: linear-gradient(135deg, rgba(191, 226, 255, 1) 30%, transparent 30%), linear-gradient(225deg, rgba(191, 226, 255, 1) 30%, transparent 30%); background-position: calc(50% - 8px); top: 8px; } |
Вариант 10:
И еще один простенький пример с применением линейного градиента без переходов.
|
1 2 3 4 5 6 |
hr { border: 0; height: 4px; margin: 30px 0; background-image: linear-gradient(to right, #BFE2FF 50%, #337AB7 50%, #337AB7 60%, #ff9100 60%, #ff9100 70%, #05b5e6 70%, #05b5e6 80%, #b448b8 80%, #b448b8 90%, #BFE2FF 90%, #BFE2FF 100%); } |
Только тут нашел крутые линии
Очень клевый сайт! Много интересных фишек, которые можно добавить на сайт, и все довольно просто и работает.
Добрый день. Вариант 5 уезжает за границу экрана справа. И таким образом появляется полоса прокрутки по горизонтали, пока весь ползунок не заедет за правую границу экрана. Как поправить подскажите пожалуйста?
Упс, нашел, недочитал
Отличный сайт и годный контент. Не много прокачал вариант 7. Хотел поделиться модификацией и закинуть код в коммент, а сайт ругается, либо запрещенный тег или слишком часто пишу, хотя там только html и css.
На тег <скрипт> он обычно ругается
Можно ссылку оставить на кодопен, например. Там и нагляднее будет.
Мод
Интересно, но ваш вариант ИМХО больше подходит для разделения секций (как Вариант 6), это цельная линия и стрелка вниз, показывающая что ниже еще есть информация.
Линиями <hr> я обычно отделяю абзацы или заголовки, это для себя в основном и делал.
Но ваш вариант пригодится, Спасибо! Там можно увеличить стрелку, покрасить и даже привязать на стрелку событие.
Спасибо, крутые линии :)))
Спасибо за комментарий, пока читал его в хроме, нашел 3 ошибки в нем 🙂
Исправил сейчас.
Спасибо, пригодилось