Как сделать горизонтальную линию в css

В css есть специальный тег, который и обозначает и выводит горизонтальную линию! Это иногда бывает очень полезным!

1. Горизонтальная линия тег
2. Стилизация тега горизонтальной линии css
3. Горизонтальная линия сплошная - solid
4. Горизонтальная линия точками - dotted
5. Горизонтальная линия пунктирная - dashed
6. Горизонтальная линия сплошная двойная - double
7. Горизонтальная линия с тенью сверху/снизу - groove/ridge
8. Тень для горизонтальной линии css
9. Горизонтальная линия под текстом css

Скопировать ссылку


Скопировать ссылку


Скопировать ссылку



Горизонтальная линия сплошная - css

В данном пункте разберем создание горизонтальной линии с помощью блока div.

Для этого на м понадобится:

Двойной тег div:

<div>без текста</div>

Далее нам понадобится attribute style

style ="";

Вовнутрь помещаем свойство border + solid + 1px толщина линии + подбираем цвет( -> генератор цвета) пусть это будет "#d71212".


Соединим наш код горизонтальной сплошной линии вместе:

<div style="border-bottom: solid 1px #d71212;">solid</div>

Пример вывода горизонтальной сплошной линии с помощью блока div

Добавим еще:
<div style="border-bottom: solid 5px #d71212;">solid</div>

Пример вывода горизонтальной сплошной линии толщина 5px

Скопировать ссылку



Горизонтальная линия точками - css

В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была "горизонтальная линия сплошная", то в этом пункте мы сделаем "горизонтальную линию точками!"


Для этого нам понадобится:

Опять будем использовать двойной тег div:

<div>без текста</div>

Снова attribute style

style ="";

По той же схеме: border + только вместо сплошной, берем точками: dotted + 1px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет "#d71212".


Соединим наш код горизонтальной линии вместе:

Пример вывода горизонтальной линии точками с помощью блока div

<div style="border-bottom: dotted 2px #d71212;">dotted</div>

Пример вывода горизонтальной линии точками с помощью блока div

Добавим еще:
<div style="border-bottom: dotted 5px #d71212;">dotted</div>

Пример вывода горизонтальной линии точками толщина 5px

Скопировать ссылку



Горизонтальная линия пунктирная - css

Следующая по списку это : "Горизонтальная линия пунктирная ", уже несколько вариантов мы рассмотрели, теперь новый вариант "горизонтальной линии"!


Для этого нам нужно:

Какой-то из блочных тегов, наиболее часто применимый двойной тег - div:

<div>без текста</div>

Без атрибута никак : attribute style

style ="";

По той же схеме: border + только вместо сплошной, берем пунктиром: dashed + 2px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет "#9EC1D4".


Соединим наш код горизонтальной линии вместе:

Пример вывода горизонтальной линии пунктирная с помощью блока div

<div style="border-bottom: dashed 2px #9EC1D4;">dashed</div>

Пример вывода горизонтальной линии пунктирная с помощью блока div

Добавим еще:
<div style="border-bottom: dashed 5px #9EC1D4;">dashed</div>

Пример вывода горизонтальной линии пунктирная толщина 5px

Скопировать ссылку



Горизонтальная линия сплошная двойная - css

Следующая по списку это : "Горизонтальная линия двойная ", уже несколько вариантов мы рассмотрели, теперь новый вариант "горизонтальной линии"!


Для этого нам нужно:

Какой-то из блочных тегов, наиболее часто применимый двойной тег - div:

<div>без текста</div>

Без атрибута никак : attribute style

style ="";

По той же схеме: border + только вместо сплошной, берем пунктиром: double + 2px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет "#0008ff".


Соединим наш код горизонтальной линии вместе:

Пример вывода горизонтальной линии двойная с помощью блока div

<div style="border-bottom: double 2px #0008ff;">double</div>

Пример вывода горизонтальной линии двойная с помощью блока div

Добавим еще:
<div style="border-bottom: double 5px #0008ff;">double</div>

Пример вывода горизонтальной линии двойная толщина 5px

Скопировать ссылку



Тень для горизонтальной линии - groove

Тень для линии - groove, вообще groove переводиться паз, вид линии получается с тенью, groove - тень сверху горизонтальной линии

<div style="border-bottom: groove 5px #d5d5d5;">groove</div>


Горизонтальная линия с тенью снизу - ridge

Тень для линии - ridge, вообще ridge переводится хребет, вид линии получается с тенью, ridge - тень снизу горизонтальной линии

<div style="border-bottom: ridge 5px #d5d5d5;">ridge</div>


О выше приведенных линиях с тенью...

Вообще... какая-то странная тень. Которая и на тень то не похожа...

Может я просто не умею ими пользоваться? смайлы

Может попробуем нарисовать тень под линией с помощью css?

Скопировать ссылку



Тень для горизонтальной линии css

Для того, чтобы нарисовать тень в css нам потребуется:

Нам нужен элемент - пусть это будет div.

К нему добавим class

<div class=line_shadow></div>

Далее напишем код css для тени :

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


Соберем весь код и разместим прямо здесь:

Горизонтальная линия с тень через css:

Размещаем выше приведенный код линии с тенью:





Скопировать ссылку



Горизонтальная линия под текстом css

Для того, чтобы нарисовать горизонтальную линию под текстом, нам потребуется:

Какой-то из тегов, в данном случае, чтобы по умолчанию было "display:block" - это элемент : div

<div>Линия под текстом</div>

Далее внутрь тега помещаем атрибут style(attribute style) + свойство border с нижним подчеркиванием border-bottom + solid 1px red :

style="border-bottom: solid 1px red ;

Собираем весь код вместе:

<div style="border-bottom: solid 1px red ;">Линия под текстом</div>

Результат горизонтальная линия под текстом:

Линия под текстом

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---