Как создать линию в css

Кроссбраузерная HTML-линия <hr> на CSS

По умолчанию линия, созданная с помощью элемента <hr> , в разных браузерах отображается специфически, что может не очень хорошо сочетаться с дизайном сайта. Сделаем её кроссбраузерной да ещё такой, какой пожелаем .

Код ниже позволяет полностью управлять оформлением линии, а также её выравниванием по горизонтали:

border: 0; скрываем стандартную линию. border-bottom: 1px solid grey; рисуем свою линию с любыми характеристиками: толщина, вид, цвет. margin: auto; устанавливаем внешние отступы от линии, с помощью которых можно не только делать отбивки сверху и снизу, но и выравнивать линию по горизонтали:  — выравнивание по центу;  — выравнивание по левому краю;  — выравнивание по правому краю. width: 50%; задаём ширину линии в 50% от ширины родителя.

Если нужна линия на всю ширину родительского элемента со стандартными отступами по вертикали, то свойства margin и width можно не указывать.

Пример «Кроссбраузерная линия»

Изображение вместо простой линии

Здесь всё просто: воспользуемся свойством border-image  — СТОП! У этого свойства есть ограничения, которые заключается в том, что если для элемента установлено свойство border со значением 0 , то оно будет игнорироваться. Поэтому border-image не подходит, зато background работает «на ура»:

background: url( путь+к+изображению ); устанавливаем фоновое изображение в качестве линии. border: 0; скрываем стандартную линию. height: 10px; задаем толщину линии-изображения.

Пример «Изображение вместо простой линии»

Проверено в браузерах Google Chrome, Internet Explorer, Mozilla Firefox, Opera Next, Opera Presto и Safari. Отличился только Internet Explorer, который выравнивает линию с классом left не по левому краю, как все остальные браузеры, а по центру.

Горизонтальные линии в HTML и CSS

Вообще вы узнаете, это как самостоятельно сделать горизонтальные линии в HTML и CSS, где будут присутствовать крутые способы, где можно стилизовать элемент HR, который отвечает за вывод той самой линий на сайте. Легко добавлять горизонтальные линии, используя HTML или CSS, но это может работать не так, как вы думаете.

Горизонтальные линии — это способ разделения контента, который может быть выполнен с использованием элемента HTML HR или CSS-правил границ.

Установочный процесс:

Стандартные стили браузера по умолчанию:

Вы можете контролировать ширину линии, задав свойство width и затем отцентрировав его, используя следующее правило CSS.

Вы также можете отрегулировать толщину линии, установив значение высоты. Цвет задается с помощью свойства background-color . В качестве бонуса вы также можете использовать свойство opacity, чтобы сделать линию полупрозрачной.

Типичный браузер устанавливает поле примерно на половину ширины символа. Но вы можете изменить это на любое значение, которое вы хотите. Это может добавить качественный пробел к вашим макетам и подчеркнуть разрыв содержимого.

Но сначала давайте рассмотрим несколько простых приемов CSS. Этот первый пример меняет стиль линии на пунктирную.

Теперь примените один из методов полоски к горизонтальной линии. Здесь я использую линейные градиенты, чтобы сделать эффект. Граница горизонтальной линии очищается, а размер устанавливается равным 40px. 40px произвольно, важно сделать первые два линейных градиента равными половине высоты HR. Вам также нужно будет установить размер фона в соответствии с высотой.

С помощью CSS3 вы также можете сделать свои строки более интересными. Элемент HR традиционно является горизонтальной линией, но с помощью свойства CSS-преобразования вы можете изменить их внешний вид. Любимое преобразование элемента HR — это изменение поворота.

Оформление линий CSS

Оформление линиями на странице — очень важное мероприятие для общего восприятия посетителями сайта. Оформлять линии можно присвоенному блоку <div>, <span>, таблице <table> и её отдельным ячейкам, а также можно оформлять общие линии, которые имеют тэг <hr>.

Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.

Содержание

Оформление объектов линиями CSS

Чтобы обрамить блок, таблицу, рисунок линией в CSS файле пишем:

• #name — название div, которое было присвоено
• В фигурных скобках вписываются значения настроек элемента div, в данном случае border — означает «линия», 1px — толщина линии, которую можно увеличивать и линия будет толще, solid — означает непрерывная линия, blue — цвет линии, который можно также менять.
• Имеем в виду, что при оформлении картинок на странице можно каждой картинку оформить в <div> и присвоить ей конкретное имя, либо можно обрамить все картинки на сайте одной строкой в css:

В данном случае все картинки на сайте будут обрамлены красной линией. К слову говоря через эту глобальную настройку картинко можно задавать размеры картинок и другие css настройки

Виды линий

Типы линий CSS

В настройках CSS можно менять вид линий, например параметр solid можно поменять на нижеследующие:

• none — линия отсутствует (по умолчанию).
• dotted — линия из ряда точек.
• ridge — линия «гребень»
• dashed — пунктирная линия.
• double — двойная линия
• groove — линия «бороздка»
• inset — вдавленная линия
• outset — выдавленная линия
• solid — сплошная линия

Стоит отметить, что не все типы линий поддерживаются тем или иным браузером.

• Вот пример, как выглядят «solid», «dashed» и «dotted»:

Закругление линий CSS

Кроме того, есть возможность закруглить углы того или иного объекта (параметры закругления задаются в пикселях — px):

Добавлены внутренние отступы, чтобы было лучше видно свойства закругления.

Цвет линий в CSS

Цвет линий можно менять простыми английскими словами black — чёрный, white — белый, red — красный и так далее, но можно также задавать цвет специальным кодом, который можно взять с программ таких, как Photoshop или в редакторах страниц. И цвет обозначается следующим образом #29809C, вот пример настройки цвета линий в CSS:

Есть возможность менять цвет и толщину всех четырёх линий по отдельности через знак «;«, задаётся это параметрами. В дальнейшем все различные настройки div разделяются этим знаком

• border-top — верхняя линия
• border-bottom — нижняя линия
• border-left — левая линия
• border-right — правая линия

Например в CSS пишем:

Все вышеперечисленные настройки можно менять по своему желанию.

CSS тэги для оформления линий

• border — задаёт параметры всех линий объекта.
• border-bottom — задаёт параметры нижней линии объекта.
• border-bottom-color — задаёт параметры цвета нижней линии объекта.
• border-bottom-left-radius — задаёт параметры радиуса нижнего, левого угла объекта.
• border-bottom-right-radius — задаёт параметры радиуса нижнего, правого угла объекта.
• border-bottom-style
• border-bottom-width — задаёт одну линию в таблицах.

• border-color — задаёт параметры цвета всех линий объекта.
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left

• border-left-color — задаёт параметры цвета левой линии объекта.
• border-left-style
• border-left-width
• border-radius — задаёт параметры радиуса всех углов объекта.
• border-right — задаёт параметры правой линии объекта.
• border-right-color — задаёт параметры цвета правой линии объекта.
• border-right-style
• border-right-width

• border-spacing
• border-style
• border-top — задаёт параметры верхней линии объекта.
• border-top-color — задаёт параметры цвета верхней линии объекта.
• border-top-left-radius — — задаёт параметры радиуса верхнего, левого угла объекта.
• border-top-right-radius — — задаёт параметры радиуса верхнего, правого угла объекта.
• border-top-style
• border-top-width
• border-width

Примечание

Если же есть какие-либо вопросы в отношении оформление линий и другие вопросы относительно CSS настроек, то можно задать вопросы и обсудить тему на странице обсуждения нашего форума.