(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Создание стильной разделительной линии средствами CSS

Источник: websovet

Для начала просто картинка, чтобы было понятно, о чем собственно идет речь:

hr1.png

Надеюсь, вы уже имели удовольствие видеть подобные разделительные линии в дизайне некоторых сайтов. Обычно такую линию рисуют в фотошопе в 2 пикселя толщиной: один пиксель - сама линия, второй - ее тень, или блик, если угодно. А затем ее размещают на странице в виде картинки или фона.

Однако можно вполне обойтись и без картинки. Для этого используем старый добрый тэг <hr />, которому зададим несколько хитрых правил в стилях. Данный тэг добавляет на страницу разделительную линию, оставляя над и под собой по одной пустой строке. По умолчанию эта линия выглядит не слишком кошерно - обычная черная черта слева направо через всю страницу. Приукрасим ее:

hr {
padding-bottom: 1px;
background-color: #9b9b9b;
border-bottom:1px solid #F4F4F4;
}

Цвет линии #9b9b9b - темно-серый. Под ней мы разместили более светлый блик #F4F4F4 в виде нижнего бордера. Но так как у данного тэга весьма своеобразный способ отображения самое себя, то для необходимого эффекта следует добавить нижнее поле padding-bottom в 1 пиксель.

В результате получаем практически тот же результат, как если бы это была нарисованная в фотошопе двухцветная линия толщиной в 2 пикселя:

hr2.png

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 03.07.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Panda Antivirus Pro - ESD версия - на 1 устройство - (лицензия на 1 год)
Nero 2018 Platinum ESD
SAP CRYSTAL Reports 2013 WIN INTL NUL
FastCube FMX Single License
ABBYY Lingvo x6 Английская Домашняя версия, электронный ключ
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Один день системного администратора
3D и виртуальная реальность. Все о Macromedia Flash MX.
Проект mic-hard - все об XP - новости, статьи, советы
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Беговая дорожка (3)
Купила беговую дорожку вот здесь https://4gym.com.ua/product/technogym-artis-run Очень классная,...
 
Аналоги виагры (3)
Если мужчине, по каким либо причинам, не подходит виагра, существуют качественные аналоги...
 
работа на дому! (8)
Доброго времени суток дорогие друзья. Многоуровневый маркетинг окончательно признан...
 
Отличается ли ДрифтКазино от беттинга? (16)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Актуальное зеркало БК Лигаставок (2)
Актуальное зеркало букмекерской конторы Лигаставок https://superbet.guru/bk-ligastavok-mirror/...
 
 
 



    
rambler's top100 Rambler's Top100