Здравствуйте, дорогие читатели блога BlogGood.ru
Если вы для своих сайтах используете тег <hr />, то эта статья для вас, так как в ней я расскажу, а точнее покажу парочку CSS стилей для горизонтальной линии, с помощью которых эта же линия преобразится.
При верстке сайта вам пригодится.
Итак, нам нужен экспериментальный объект. Вставьте в ваш HTML документ тег «hr»:
<hr />
Теперь приступим. Сейчас нам нужен только файл с CSS стилями.
Трюк № 1
hr { border: 0; height: 1px; background: #000; background-image: -webkit-linear-gradient(left, #fff, #000, #fff); background-image: -moz-linear-gradient(left, #fff, #000, #fff); background-image: -ms-linear-gradient(left, #fff, #000, #fff); background-image: -o-linear-gradient(left, #fff, #000, #fff); }
Результат:
Трюк № 2
hr { border: 0; border-bottom: 2px dashed #999; background: #000; }
Результат:
Трюк № 3
hr { height: 12px; border: 0; box-shadow: inset 0 15px 12px -11px rgba(0,0,0,0.15); }
Результат:
Трюк № 4
hr { border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px #000000; }
Результат:
Трюк № 5
hr { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; }
Результат:
Трюк № 6
hr { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }
Результат:
Трюк № 7
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; }
Результат:
Трюк № 8
hr { padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr:after { content: "♥♥♥"; display: inline-block; position: relative; top: -0.7em; font-size: 1.5em; padding: 0 0.25em; background: white; }
Чтобы создать вот такие значки «♥♥♥» или другие «♦♣♠☺☻♪♫☼§♂♀» почитайте вот тут.
Результат:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274369 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181501
6 Ответов на комментарий - CSS стили для горизонтальных линий «HR»
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта
Прикольненько. Я знал, что можно их стилизовать, но не думал, что так интересно. Все зависит от фантазии ))
Спасибо за комментарий!
Спасибо! Не знала, что можно использовать такие стили.
Пожалуйста.
Спасибо, очень оригинально!
Пожалуйста