Практика » Симпатичне оформлення тегу legend


27 жовтня 2009 від admin
Тег legend було задумано для групування оформлення форм. Сьогодні більшість веб-дизайнерів використовують його виключно лише з цією метою. А якщо застосувати його нестандартно? Скажімо, хай він виконує функцію заголовка для блоку. Нариклад - невеликий блок, що оформлений в стилі старих DOS-івських програм. Можливо, ви пам'ятаєте інтерфейс програм десятирічної давнини - давайте спробуємо створити щось, зовні схоже на ті інтерфейси. Діючий приклад подібного оформлення - наші сервіси. Саме тому всі відступи і кольорова гама в коді використана така, як на сервісах. Але для себе ви можете змінити їх на будь-які інші - тут описаний лише базовий принцип подібного оформлення.

Для початку створимо ефект тіні для блоку. Для цього просто використовуємо три вкладених слоя main, shadow та fieldset.
Ось їх html-код:
<div class="main">
<div class="shadow">
<fieldset>Тут буде зміст блоку</fieldset>
</div>
</div>

А ось CSS-код:
.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 піксела.

Тепер пропишемо CSS для 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.

Для Firefox ми скористаємось невеликим хаком і вкладеним тегом span. За допомогою @-moz-document url-prefix () ми можемо вказати стилі тільки для FF, інші браузери будуть його ігнорувати. Тому просто додамо CSS-код для FF:
@-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>
Ось і все, а якщо щось не виходить, запитуйте в коментарях або на форумі.