logo

Тег  <hr>  или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег <hr> .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина). Вот пример простой линии.


При необходимости мы можем изменить линию, задав ей нужный цвет и ширину (толщину).


hr{
  border: 0;
  background: #f00;
  height: 3px;
}

Линия с помощью градиента


hr{
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}  

Похожа на предыдущую, но края расплываются — сходят на нет


hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

Глядя на следующий пример кажется, что достаточно прописать границу элементу и получится тоже самое, но сравните границу этого абзаца и пример линии. Как говорится — найдите отличия.


 hr{
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
}   

2 варианта с использованием тени


hr {
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}    


hr {
  border: 0;
  height: 0;
  box-shadow: 0 0 10px 1px black;
}  
hr:after {  
  content: "\00a0";  
}  

Линия с раздвоенным концом


hr {
  height: 30px;
  border-style: solid;
  border-color: black;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr:before { 
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}    

Производные от предыдущих вариантов


hr {
  border-top: 5px dashed #8c8b8b;
}    


hr {
  border-top: 10px dotted #8c8b8b;
}    


hr {
  border-top: 10px solid #8c8b8b;
  border-bottom: 10px solid #ccc;
}   

Изображения в линии


hr {
  height: 6px;
  background: url(images/hr-1.png) repeat-x 0 0;
  border: 0;
}    


hr {
  height: 6px;
  background: url(images/hr-2.png) repeat-x 0 0;
  border: 0;
}    

Линия разреза — используется иконочный шрифт


hr{
  border-top: 1px dashed #8c8b8b;
}
hr:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -13.5px;
  left: 40px;
  padding: 0 3px;
  background: transparent;
  color: #8c8b8b;
  font-size: 18px;
}   

Конечно большенство приведенных выше примеров возможно получить прописав, скажем блоку border-bottom: …, но иногда удобней использовать линию как отдельный элемент.


Элементы CSS 0

Рекомендую прочитать...

Бегущая строка при помощи анимации на CSS3
Бегущая строка на CSS3

Бегущая строка позволяет демонстрировать информацию в яркой динамической форме, используя различные спецэффекты, привлекая значительное внимание посетителей сайта. Так, например, информация может двигаться сверху вниз и снизу вверх, справа налево и слева на право, взад-вперед и обратно, медленно и быстро, пробегая только один раз, а затем оставаясь, как обычный текст. Могут поочередно печататься несколько строк.

Читать полностью
Трансформации для блока анонсов
блок анонсов

В этой статье представлены несколько различных трансформаций, которые удобно применить ,например, для анонсирования своей продукции или услуг. Неплохо эти варианты будут смотреться и в рекламных блоках. Вариант, представленный ниже, возможно применить в интернет-магазине. Первоначально выводится изображение товара, при наведении курсора появляется краткая информация или параметры.

Читать полностью
Необычное превью для «Главной»
необычное превью для главной

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей. Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.