ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стилизация тега HR при помощи CSS + HTML

Стилизация тега HR при помощи CSS + HTML

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

Если мы ставим стандартный, то стилистика его находится в самой системе, здесь мы изначально прописываем стилистику, где самостоятельно задаем толщину (size) и ширину (width), но нужно понимать, что на разных браузерах по разному отображается. Здесь мы просто выстраиваем тонкую по ширине линию, что идет по высоте 1px, и также цветовую гамму, что отображение по всем браузерам будет одинаково.

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

Установка:

Ставим по месту, где хотите наблюдать прочерк:

Код
<hr />

И безусловно стилистика CSS с данными, что меняем как вам нужно или оставляем по умолчанию в стандартном виде.

Код
hr {
  color: #4c4b4b; /*для IE */
  background-color: #4c4b4b; /*для Firefox, Opera, Safari*/
  border:0px none;
  height:1px; /* высота 1px IE, Firefox, Opera, Safari */
  clear:both; /* для очистки, если тег идет после float элемента */
}

Выше вам уже дал ссылку под оригинальный дизайн, также можно посмотреть линий hr элемента с изображением, что мне понравилось, где можно любую тематическую картинку в формате PNG закрепить.

Демонстрация
2021-06-22 Загрузок: 1 Просмотров: 662 Комментарий: (0)

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

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

Оставь свой отзыв

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