ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальные линии в HTML и CSS

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

Рассмотрим несколько вариантов, как сделать горизонтальную линию на странице, так, чтоб она выглядела оригинально от стандартной с помощью CSS. Так как стандартная линия идет по умолчанию. Здесь нужно только прописать HR и она появится, но в нашем материале мы закрепим оформление, чтоб создавая линию, она кардинально отличалась от стандартного виду.

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

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

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

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

Код

hr {
  display: block;
  margin-before: 0.5em;
  margin-after: 0.5em;
  margin-start: auto;
  margin-end: auto;
  overflow: hidden;
  border-style: inset;
  border-width: 1px;
}

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

Код

hr {
width: 60%;
margin-left: auto;
margin-right: auto;
}

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

Код

hr {
width: 300px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:#666;
opcaity: 0.5;
}

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

Код

hr {
width: 80%;
height: 8px;
margin-left: auto;
margin-right: auto;
background-color:#666;
border: 0 none;
margin-top: 100px;
margin-bottom:100px;
}

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

CSS

Код

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;
}

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

Вариант с бегущей линией

CSS

Код

hr {
  margin: 30px 0;
  border: 2px solid #BFE2FF;
  position: relative;
  overflow: visible;
}
hr:after {
  content: "";
  border: 2px solid #337AB7;
  position: absolute;
  width: 20%;
  top: -2px;
  animation: anim-hr 5s linear infinite;
}
@keyframes anim-hr {
  0% {
  left: -20%;
  }
  100% {
  left: 100%;
  }
}

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

Код

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;
}

Горизонтальные линии - отличный способ добавить визуальную ценность вашим макетам. Элемент HTML HR обеспечивает семантическое значение для макета страницы. Его можно настроить только с помощью CSS. Но вы можете применить все виды сумасшедших стилей к горизонтальной линии, чтобы создать очень интересные эффекты макета.

06 Октября 2019 Просмотров: 2699 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0