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

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

Свойство text-shadow
Свойство text-shadow

Свойство text-shadow позволяет видоизменить внешний вид текста . Его применяют для того, чтобы выделить какую-то часть текста (или слово) . Обычное использование для заголовков, ссылок — текста на который следует обратить внимание. Да и просто наличие тени у слова красиво смотрится.

Читать полностью
Градиент в качестве границы блоков
Граница блока - градиент

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.
Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Читать полностью
Ссылки, события при наведении и клике

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

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

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

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

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