Использование горизонтального разделителя
6 июня 2017 | Опубликовано в css | 1 Комментарий »
Элемент горизонтального разделителя <hr> - один из наиболее редко и неправильно используемых в коде HTML, возможно, из-за того, что он не выглядит привлекательно в исходном состоянии. При использовании его без задания свойств на веб-странице, он выглядит следующим образом:
Его целью является отображение изменения темы — это возможность для читателя «перевести дух», обдумать прочитанное, подготовиться к новой информации. Подобное оформление используется для обозначения изменения места действия внутри главы книги, в длинных журнальных статьях — перед введением новых людей или мест. Конечно, горизонтальный разделитель обычно выглядит не как простая серая линия: он может выглядеть как геральдическая лилия или как другая декоративная фигура.
Горизонтальный разделитель не должен быть использован на веб-страницах для следующих целей: чтобы добавить линию, что нужно делать с помощью свойства нижней рамки элемента или свойства рамки изображения. Его нужно применять только по назначению, после хотя бы нескольких абзацев текста или в самом верху или низу тега body.
С помощью кода CSS горизонтальному разделителю можно задать любой внешний вид. Проще всего превратить его в квадрат:
hr { width: 25px; height: 25px; border: none; background: #000; color: #000; }
Обратите внимание на то, что горизонтальный разделитель остается по центру. Можно превратить его в ромб с помощью трансформаций CSS:
hr { width: 25px; height: 25px; border: none; background: #000; color: #000; transform: rotate(45deg); }
Также для создания внешнего вида горизонтального разделителя можно использовать фоновое изображение:
hr { width: 200px; height: 200px; border: none; background: #fff; color: #fff; background-image: url(skull.png); }
Так как горизонтальный разделитель будет использован многократно на разных страницах, имеет смысл закодировать изображений в формате base-64:
hr { width: 200px; height: 200px; border: none; background: #fff; color: #fff; background-image: url(data:image/png;base64,iVBORw0KGgoAAA…); }
Это даст такой же результат, как и в предыдущем примере.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Новые крутые одностраничные сайты
-
Бесплатный вектор на тему наград
-
Рисуем лиственную композицию в Adobe Illustrator
-
Хорошие идеи для домашнего офиса
-
Немного сумасшествия в иллюстрациях Iza Dudzik
-
Насыщенные красные оттенки в веб-дизайне
-
Используем необычные шрифты для заполнения макета сайта
-
Постеры WWF о защите природы
-
Бесплатные фотографии аттракционов
-
Текстовый гранж-эффект в Adobe Photoshop
-
Тема ретро в веб-дизайне
-
Бесплатные визитные карточки в векторном формате
-
Стильные обложки для CD и винила
-
Бесплатные шабоны для полиграфии в женственном стиле
Самые комментируемые
- 50 прикольных страниц ошибки 404
88
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
56
- Рисуем животных: кошки и их анатомия
53