Розсувні двері CSS

Douglas Bowman

Серед рідко обговорюваних переваг CSS-можливість накладення фонових зображень з метою отримання різних ефектів. Відповідно до стандарту CSS2 для кожного фонового зображення потрібен окремий HTML елемент. У більшості випадків, типовий код, що описує загальноприйняті компоненти інтерфейсу, надає в наше розпорядження кілька HTML елементів.

Один з таких випадків-навігація на основі закладок. Настав час повернути контроль над закладками, популярність яких в якості основного засобу навігації постійно зростає. А тепер завдяки широкій підтримці CSS ми можемо поліпшити якість і зовнішній вид закладок на наших сайтах. Ви, швидше за все вже в курсі, що CSS можна використовувати для «приручення» простого ненумерованого списку. Можливо, ви навіть бачили списки з дизайном в вигляді закладок, які виглядають приблизно так:

А що якщо б ми могли взяти код в точності з попереднього прикладу і перетворити закладку на щось схоже на це:

З допомогою нескладного CSS це можливо.

В ніж нововведення?

Багато з зустрічалися мені CSS-закладок (закладки, засновані на CSS) страждають одноманітністю свого дизайну: кольорові прямокутники, можливо з обведенням, поточна закладка без обведення, колір змінюється для стану hover. Невже це все, що CSS може нам запропонувати? Кілька прямокутників з одноколірної заливанням?

Перед тим як CSS отримав широке розповсюдження, в навігаційному дизайні з'явилося багато нових ідей: химерні форми, майстерні переходи кольору, імітування інтерфейсів з реального світу. Такий дизайн, однак, грунтувався значною мірою на складних конструкціях з растрірованного тексту і багато разів вкладених таблиць. Редагування тексту або зміна послідовності розміщення закладок були обтяжливим справою. Масштабування тексту було неможливим або призводило до серйозних проблем в композиції сторінки.

Навігація з простого тексту легка в редагуванні і завантажується значно швидше, ніж навігація на основі растрірованного тексту. Крім того, хоча ми і можемо додати атрибут alt для кожного зображення, звичайний текст, все ж, більш загальнодоступний, тому що може бути масштабував. Тому не дивно, що навігація на основі простого тексту повертається у веб-дизайн. Однак зовнішній вигляд CSS-закладок до цих пір був кроком назад у дизайні, і вже, звичайно зовсім не тим, що можна включити в дизайн-портфоліо. Нові технології (як, наприклад, CSS) повинні дозволити створювати щось краще і з такою ж якістю дизайну, яке давало використання таблиць і закладок на основі растрових зображень.

Метод «розсувних дверей»

Ми можемо створити красиві, дійсно гнучкі елементи інтерфейсу, які розширюються і звужуються залежно від розміру тексту, використовуючи два окремих фонових зображення. Одно-для лівій частині закладки, інша-для правої. Уявіть, що ця пара картинок-Розсувні двері, що закривають один дверний отвір. Ці двері зсуваються і перекриваються більше, якщо дверний отвір вузький, і навпаки, розсуваються і перекриваються менше, якщо потрібно закрити більш широке простір. Це показано на ілюстрації:

Згідно цієї моделі одне зображення перекриває частину іншого. Якщо припустити, що по краях наших картинок є щось унікальне, як, наприклад округлений кут закладки, ми навряд чи захочемо, щоб одна картинка повністю закривала іншу, що знаходиться позаду. Щоб цього не сталося, ми зробимо передню (у нашому випадку ліву) картинку як можна вужчою. Але при цьому картинка повинна бути досить широкою, щоб збереглася її видима унікальність. У нашому випадку унікальними є закруглені кути, тому передня картинка буде шириною з цю, округляє частина зображення:

Якщо розмір закладку збільшиться в результаті, наприклад, масштабування тексту, наші картинки розійдуться в сторони, оголивши неприємний розрив. Отже, потрібно оцінити масштаб прийнятного розширення. Як сильно може збільшитися об'єкт при масштабування тексту в браузері? Реально слід розраховувати на можливість збільшення до 300%. Щоб компенсувати це зростання, потрібно розтягнути фонові зображення. У нашому прикладі, ми зробимо задню картинку (права сторона) розміром 400х150 пікселів, а передню-9х150 пікселів.

Не забувайте, що фонові зображення видно тільки в «дверному отворі» елемента, на якого вони застосовані ( «дверний отвір»-область контенту + відступ). Обидві наші картинки прикріплені до зовнішніх кутах їх відповідних елементів. Видимі частини цих зображень об'єднуються усередині дверного прорізу і утворюють форму закладки:

Коли закладка збільшується, зображення розсуваються, заповнюючи більш широкий отвір, при цьому видима область зображень також стає більше:

Для нашого прикладу я створив у Photoshop'е два зображення з м'яким, що імітує тривимірність, тонуванням. Для однієї з закладок я висвітлив заливку і затемнили обвід-цей варіант буде представляти «Поточну» закладку. Слідуючи обраної моделі з лівим і правим зображеннями, ми повинні розрізати зображення на дві частини:

Те ж саме потрібно зробити і зі світлим зображенням для поточної закладки. Отримавши таким чином всі 4 зображення, (1, 2, 3, 4) ми можемо приступити до створення коду і CSS для наших закладок.

Створення закладок

За міру знайомства зі створенням горизонтальних списків за допомогою CSS ви помітите як мінімум два способи розташування групи об'єктів в один ряд. У кожного є свої переваги і недоліки. Обидва вимагають звернення до досить складних аспектів CSS, в результаті можна швидко заплутатися. Перший спосіб використовує малі елементи, друге-властивість float.

Перший спосіб-можливо більш поширений-передбачає зміну властивості display на «inline» (рядковий). «Малі» метод привабливий своєю простотою. Однак він призводить до проблем в реалізації нашого методу розсувних дверей в деяких браузерах. Другий спосіб, на якому ми й зосередимо нашу увагу, використовує плаваючу модель для вибудовування елементів списку в горизонтальний ряд. Плаваюча модель, однак, теж може розчарувати. Її суперечливу поведінку часом порушує всю мислиму логіку. Але все ж таки загальне розуміння того, як справлятися з декількома плаваючими елементами і знання надійних способів «виходу» з плаваючого ряду (або його ув'язнення в контейнер) може створити дива.

Ми спробуємо помістити кілька плаваючих елементів всередину іншого плаваючого елемента-контейнера. Це треба зробити так, щоб зовнішній батьківський плаваючий елемент повністю оточив внутрішні плаваючі елементи. Тоді ми зможемо додати позаду наших закладок фоновий колір або фонове зображення. Важливо пам'ятати, що положення наступного за закладками елемента має бути відновлено за допомогою CSS-властивості clear. Тоді плаваючі закладки не зможуть впливати на розташування інших елементів сторінки.

Почнемо з наступного коду:

Home

News

Products

About

Contact

На практиці блок # header міг б утримувати наприклад, ще логотип і форму для пошуку. У нашому прикладі ми скоротимо значення href для кожної ссилки до "#". Зрозуміло, що в реальному житті замість цього значка буде вказано шлях до файлу або папці.

Почнемо роботу з CSS з присвоєння властивості float контейнера # header. Це дає гарантію того, що контейнер насправді «вміщує» елементи списку, які теж будуть плаваючими. Так як ми зробили # header плаваючим, нам потрібно присвоїти йому ширину в 100%. Ми також додамо тимчасовий жовтий фон, щоб переконатися, що цей батьківський елемент розтягується на всю ширину позаду закладок. Ну і нарешті поставимо кілька основних шрифтових властивостей, щоб забезпечити єдність зовнішнього вигляду елементів:

# header (

float: left;

width: 100%;

background: yellow;

font-size: 93%;

line-height: normal;

)

Ми також поставимо нульове значення для полів і відступів елементів ul і li і приберемо маркер списку. Для всіх елементів списку напишемо оголошення float: left:

# header ul (

margin: 0;

padding: 0;

list-style: none;

)

# header li (

float: left;

margin: 0;

padding: 0;

)

Для посилань ми поставимо блокової відображення з тим, щоб контролювати те, що відбувається, не турбуючись про рядкової моделі:

# header a (

display: block;

)

Потім ми додамо наше праве фонове зображення до елемента списку (зміни і додати показані напівжирним шрифтом):

# header li (

float: left;

background: url ( "norm_right.gif")

no-repeat right top;

margin: 0;

padding: 0;

)

Перед додаванням лівого фонового зображення зробимо паузу і подивимося, що ми маємо до цієї хвилині, у прикладі 1. (Не звертайте уваги на правило, яке я застосував до елемента body у файлі приклад. Воно лише задає основні значення для полів, відступів, квітів і тексту.)

-- - -

Тепер ми можемо розмістити ліве зображення попереду правого, застосувавши його до посилання (нашому внутрішньому елементу). Відразу ж додамо відступ, щоб відсунути текст від країв закладку:

# header a (

display: block;

background: url ( "norm_left.gif")

no-repeat left top;

padding: 5px 15px;

)

Результат показаний в прикладі 2. Наші закладку почали набувати форму. У цьому місці звернемося до збентеженим користувачам IE5/Mac, які задають собі питання: «Що тут взагалі відбувається? Закладки складені в вертикальну стопку і розтягнуті по ширині на весь екран. "Не хвилюйтеся, скоро дійдемо і до вас. А поки просто стежте за тим, що відбувається або тимчасово перейдіть на інший браузер і будьте впевнені-скоро ми вирішимо проблему IE5/Mac.

-- - -

Тепер, коли картинки для простих закладок зайняли своє місце, задамо зображення для поточної закладки. Зробимо це, звернувшись до елемента списку з id = "current" і посиланню усередині нього. Так як ми не змінюємо ніяких властивостей фону крім фонових зображень, будемо використовувати властивість background-image:

# header # current (

background-image: url ( "norm_right_on.gif ");

)

# header # current a (

background-image: url ( "norm_left_on.gif ");

)

В нижньої частини наших закладок нам потрібна якась обведення. Але застосування властивості border до батьківському # header НЕ дозволить нам «просочитися» поточну закладку через цей кордон. Замість цього ми створимо нове зображення із потрібним нам обведенням по його нижньому краю. І поки ми працюємо з цим зображенням, додамо легкий градієнт, щоб це виглядало так:

Ми застосуємо це зображення до фону нашого контейнера # header (замість визначеного раніше жовтого кольору), зрушимо його вниз контейнера і призначимо фоновий колір, що збігається з верхнім кольором створеного градієнта. Ми також приберемо доданий спочатку відступ для елемента body і додамо відступ на 10 пікселів до верхньої, лівої і правої частин елемента ul:

# header (

float: left;

width: 100%;

background: # DAE0D2 url ( "bg.gif")

repeat-x bottom;

font-size: 93%;

line-height: normal;

)

# header ul (

margin: 0;

padding: 10px 10px 0;

list-style: none;

)

Для завершення роботи над закладкою залишилося «просочитися» поточну закладку через кордон, про що ми вже говорили вище. Ви можете подумати, що ми застосуємо до нашим закладок нижню межу, співпадаючу за кольором з нижньою обведенням фонового зображення елементу # header, а потім змінимо колір кордону для поточної закладки на білий. Однак це призвело б до появи крихітної «сходинки», видимої для уважного ока. А от якщо ми змінимо відступ для посилань, ми зможемо створити чіткі і прямі кути всередині поточної закладки, як показано на збільшеному малюнку:

Ми доб'ємося цього, зменшивши нижній відступ для звичайного посилання на 1 піксель (5px - 1px = 4px), а потім додавши цей піксель до поточної посиланням:

# header a (

display: block;

background: url ( "norm_left.gif")

no-repeat left top;

padding: 5px 15px 4px;

)

# header # current a (

background-image: url ( "norm_left_on.gif ");

padding-bottom: 5px;

)

Це зміна робить нижню межу видимої крізь звичайні закладки, але ховає її для поточної закладки. Ми отримуємо приклад 3.

Прикінцеві кроки

Уважний погляд міг помітити в попередньому прикладі білі ділянки по кутах закладок. Ці непрозорі куточки заважають задній картинці бути видимою через лівий кут переднього зображення. Теоретично ми могли б зробити ці куточки такого ж кольору як і фон позаду них. Але наші закладку можуть збільшитися по висоті, і тоді задній градієнтний фон зрушить вниз, що призведе до неузгодженості кольору куточків і фонового градієнта. Замість цього ми змінимо наші картинки, зробивши їх куточки прозорими. Якщо до обведення закладок застосовано згладжування (anti-aliasing), ми поставимо в якості прозорого кольору (matte) середнє значення заднього фонового градієнта.

Тепер, коли куточки прозорі, шматочок правого зображення проглядається через прозорий кут лівого. Щоб уникнути цього, додамо невеликий відступ зліва до елементу списку, що дорівнює ширині лівого зображення (9px). Щоб зберегти центрування тексту після додавання відступу до елемента списку, необхідно прибрати таку ж величину лівого відступу у посилання (15px - 9px = 6px):

# header li (

float: left;

background: url ( "right.gif")

no-repeat right top;

margin: 0;

padding: 0 0 0 9px;

)

# header a (

display: block;

background: url ( "left.gif")

no-repeat left top;

padding: 5px 15px 4px 6px;

)

Але і цей варіант нас не влаштує, тому що ліва картинка тепер відсунута від лівого краю закладки на 9 пікселів доданого відступ. Тепер, коли внутрішні краї лівого і правого «дверних прорізів» стикуються один з одним, нам більше немає потреби тримати ліву картинку попереду. І ми можемо змінити черговість фонових картинок, застосувавши їх до протилежних елементів. Ми також повинні поміняти картинки і для поточної закладки:

# header li (

float: left;

background: url ( "left.gif")

no-repeat left top;

margin: 0;

padding: 0 0 0 9px;

)

# header a, # header strong, # header span (

display: block;

background: url ( "right.gif")

no-repeat right top;

padding: 5px 15px 4px 6px;

)

# header # current (

background-image: url ( "left_on.gif ");

)

# header # current a (

background-image: url ( "right_on.gif ");

padding-bottom: 5px;

)

Зробивши це, ми отримуємо приклад 4. Зауважте, що початі нами для створення прозорих кутів кроки, призвели до появи невеликий «мертвої» зони в лівій частині закладки, де вона не реагує на наведення миші. Мертва зона знаходиться поза текстом, але вона все ж помітна. Прозорі картинки для кожної сторони нашої закладку використовувати необов'язково. Якщо ми віддамо перевагу не мати на нашій закладці «мертвого» ділянки, потрібно всього лише використовувати позаду закладок суцільну заливку, а не градієнт, і зробити куточки закладок такого ж кольору. Поки ж ми збережемо прозорість кутів. [В IE/Win згадана «мертва» зона існувала і до зроблених кроків, причому з усіх сторін від тексту посилання. Вирішення цієї проблеми висвітлено в наступній статті серії Sliding Doors of CSS, Part II.-прим. перекладача]

-- - -

Ну і, нарешті, останні штрихи. Всі за один раз: робимо весь текст напівжирним, текст на звичайних закладках коричневим, а на поточному-темно-сірим, цей же колір присвоюємо тексту для стану посилання hover, прибираємо підкреслення посилань. Усі зроблені до цієї хвилині додавання і зміни представлені в прикладі 5.

Ще один метод для забезпечення сумісності

Розглянувши приклад 2, ми визнали наявність проблеми з IE5/Mac, який розтягував закладки на всю ширину вікна, вибудовуючи їх вертикально один під інший. Не зовсім той ефект, якого ми домагаємося.

В більшості браузерів застосування до елемента властивості float тягне його стиснення до мінімально можливого розміру, що визначається його контентом. Якщо плаваючий елемент містить зображення (або сам є картинкою), то він стиснеться до ширини картинки. Якщо він містить тільки текст, то стиснеться до ширини найдовшою рядки тексту, не містить переносів.

Проблеми виникають в IE5/Mac, коли блоковий елемент з шириною auto поміщається всередину плаваючого елементу. У цьому випадку всі браузери стискають плаваючий елемент до мінімально можливої ширини, не звертаючи уваги на внутрішній блоковий елемент. А ось IE5/Mac?? описаної ситуації цього не робить. Замість цього він розтягує плаваючий і внутрішній блочний елементи на всю доступну ширину. Щоб обійти таку поведінку, нам потрібно застосувати float також і до заслання, але тільки для IE5/Mac, не зачіпаючи інші браузери. Спочатку додамо float до вже існуючого правилом. Потім застосуємо «Метод зворотного слеш », щоб сховати від IE5/Mac нове правило, яке видаляє float для інших браузерів:

# header a (

float: left;

display: block;

background: url ( "right.gif")

no-repeat right top;

padding: 5px 15px 4px 6px;

text-decoration: none;

font-weight: bold;

color: # 765;

)

/* Commented Backslash Hack

hides rule from IE5-Mac */

# header a (float: none;)

/* End IE5-Mac hack */

В Згідно з прикладом 6 IE5/Mac тепер відображає закладку як належить. Для інших браузерів нічого не змінилося. IE5/Mac містить величезну кількість CSS-багів, які були виправлені в версії IE5.1. Від цих багів в IE5/Mac страждає і метод «розсувних дверей». Їх число перевершує всі мислимі межі, і я не збираюся з ними боротися. А так як оновлення до 5.1 вже досить тривалий час є для всіх бажаючих, відсоток Маков c OS 9 і встановленим IE5/Mac постійно скорочується і наближається до нуля.

Варіанти

Ми тільки що детально розібрали метод «розсувних дверей», який дозволяє створювати зверстаний за допомогою ненумерованого списку і посилань і доопрацьовану за допомогою декількох правил CSS закладний навігацію на основі простого тексту. Така навігація швидко завантажується, проста у підтримці, а текст всередині неї може бути значно масштабував в будь-яку сторону без порушення дизайну. Чи варто говорити, наскільки гнучким є цей метод при створенні будь-якої витончено виглядає навігації?

Використання цієї техніки обмежується тільки нашою уявою. Заключний приклад ілюструє всього лише один варіант. Але цей приклад не повинен обмежувати наші ідеї.

Закладки, наприклад, не обов'язково повинні бути симетричними. Я швидко створив другий варіант закладок, в якому використовував прості кольори, незграбні форми і більш широку і складну за формою ліворуч. Як показує варіант 2, ми можемо вільно змінювати порядок лівого і правого зображень залежно від дизайну. При чіткому плануванні та майстерному поводженні з картинками, можна відмовитися від нижньої межі на користь стильового поєднання зображень з фоном, розташованим позаду, як показано у створеному мною варіанті 3. Якщо ваш браузер підтримує перемикання між альтернативними стилями, ви можете переглянути всі представлені варіанти, відкривши цей майстер-файл і перемикаючись в ньому між таблицями стилів. [В NN7.1 доступ до альтернативних стилів здійснюється через головне меню View> Use Style, в Opera 7.20-через головне меню View> Style, в IE/Win такої можливості немає-прим. перекладача]

До застосованої техніки можуть бути додані інші ефекти, які ми тут не розглядаємо. У нашому прикладі ми міняли колір тексту для стану hover, але чому б не змінити фонове зображення цілком для отримання цікавих ролловер-ефектів. За наявності в коді двох вкладених HTML елементів ми завжди можемо використовувати CSS для накладання фонових зображень та отримання ефектів, про які ми і не мріяли. У нашому прикладі ми створили горизонтальний ряд закладок, але метод розсувних дверей можна використовувати і в багатьох інших випадках. Яке застосування цього методу запропонуєте ви?

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/