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 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Читать полностью
Свойство clip-path и модальное окно
C-p-&-modal

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

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

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

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

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