Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяCSS Красивое оформление с помощью legend

Красивое оформление с помощью legend

Изначально тег legend задумывался для оформления форм. В принципе, большинство веб-дизайнеров используют его исключительно для этой цели. А если применить его нестандартно? Скажем, пусть он выполняет функцию заголовка для блока. В качестве примера - небольшой блок, оформленный в стиле старых DOS-овских программ. Возможно, вы помните интерфейс программ десятилетней давности - давайте попробуем создать нечто, внешне похожее на те интерфейсы. Вот действующий пример.

Вначале хочу оговориться, что все отступы и цвета использованы такие как на сервисе, вы можете изменить их на любые другие. Здесь описан лишь базовый принцип подобного оформления.
Для начала создадим эффект тени для блока. Для этого просто используем три вложенных слоя main, shadow и fieldset. Вот html-код:
<div class="main"><div class="shadow"><fieldset>
Здесь будет содержимое
</fieldset></div></div>

А вот стили:
.main{
width:432px;
}

.shadow{
position: relative;
left: 10px;
top: 10px;
background-color: #b5dbf1;
}

fieldset {
display:block;
padding:15px;
margin:0px;
border:solid #0c7eee 1px;
background-color: #fff;
position: relative;
left: -5px;
top: -5px;
width:400px;
}

Надеюсь, особых вопросов не возникнет, но все же пару слов по поводу fieldset.
Если вас смутила разница в ширине блоков main и fieldset, то обратите внимание на отступы и border - как раз в сумме (с правой и левой стороны) получается 32 пиксела.

Теперь добавим стили для legend (сам тег legend добавим между открывающим и закрывающим тегами fieldset)
C помощью абсолютного позиционирования и отрицательного значения top немножко "приподнимем" legend по отношению к fieldset.
legend {
background:#b5dbf1;
border: 1px solid #0c7eee;
padding:2px;
position:absolute;
top: -12px;
left: 12px;
}

Казалось бы, вот и все. Действительно - в IE 6, 7, 8 и Opera 9 данный пример отлично работает. Сюрприз на этот раз преподнес Mozilla Firefox - честно говоря, не ожидал такого от парней из MF. Вначале я пытался гуглить, в надежде что кто-то уже сталкивался с подобной проблемой, но подходящего решения так и не нашел. Тогда я просто решил воспользоваться вложенным тегом span и небольшим хаком для ФФ. С помощью @-moz-document url-prefix() можно указать стили только для ФФ, остальные браузеры будут его игнорировать. Поэтому просто добавим код для ФФ:
@-moz-document url-prefix()
{
legend span {
display:block;
background:#b5dbf1;
border: 1px solid #0c7eee;
padding:2px;
position:absolute;

top:-30px;
left: 0px;
}
}

а текст между открывающим и закрывающим тегами legend поместим в span:
<legend><span>Название блока:</span></legend>
Категория: CSS
Опубликовано: 24 октября 2009, просмотров: 6437
 (Голосов: 2)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.33 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.