Серед рідко обговорюваних переваг CSS-можливість накладення фонових зображень з метою отримання різних ефектів. Відповідно до стандарту CSS2 для кожного фонового зображення потрібен окремий HTML елемент. У більшості випадків, типовий код, що описує загальноприйняті компоненти інтерфейсу, надає в наше розпорядження кілька HTML елементів.
Один з таких випадків-навігація на основі закладок. Прийшов час повернути контроль над закладками, популярність яких в якості основного засобу навігації постійно зростає. А тепер завдяки широкій підтримці CSS ми можемо поліпшити якість і зовнішній вигляд закладок на наших сайтах. Ви, швидше за все вже в курсі, що CSS можна використовувати для «приручення» простого ненумерованого списку. Можливо, ви навіть бачили списки з дизайном у вигляді закладок, які виглядають приблизно так:
А що якби ми могли взяти код в точності з попереднього прикладу і перетворити закладки на щось схоже на це:
За допомогою нескладного CSSето можливо.
У чому новизна?
Багато з зустрічалися мені CSS-закладок (закладки, засновані на CSS) страждають одноманітністю свого дизайну: кольорові прямокутники, можливо з обведенням, поточна закладка без обведення, колір змінюється для стану hover. Невже це все, що CSS може нам запропонувати? Кілька прямокутників з одноколірної заливкою?
Перед тим як CSS набув широкого поширення, в навігаційному дизайні з'явилося багато нових ідей: химерні форми, майстерні переходи кольору, імітування інтерфейсів з реального світу. Такий дизайн, однак, грунтувався значною мірою на складних конструкціях з растрированного тексту і багато разів вкладених таблиць. Редагування тексту або зміна послідовності розміщення закладок були обтяжливим справою. Масштабування тексту було неможливим або призводило до серйозних проблем в композиції сторінки.
Навігація з простого тексту легка в редагуванні і завантажується значно швидше, ніж навігація на основі растрированного тексту. Крім того, хоча ми і можемо додати атрибут alt для кожного зображення, простий текст, все ж, більш загальнодоступний, тому що може бути масштабований. Тому не дивно, що навігація на основі простого тексту повертається у веб-дизайн. Однак зовнішній вигляд CSS-закладок до цих пір був кроком назад в дизайні, і вже звичайно зовсім не тим, що можна включити в дизайн-портфоліо. Нові технології (як, наприклад, CSS) повинні дозволити створювати щось краще і з такою ж якістю дизайну, яке давало використання таблиць і закладок на основі растрових зображень.
Метод «розсувних дверей»
Ми можемо створити красиві, дійсно гнучкі елементи інтерфейсу, які розширюються і звужуються залежно від розміру тексту, використовуючи два окремих фонових зображення. Одно-для лівій частині закладки, інше-для правої. Уявіть, що ця пара картинок-Розсувні двері, що закривають один дверний отвір. Ці двері зсуваються і перекриваються більше, якщо дверний проріз вузький, і навпаки, розсуваються і перекриваються менше, якщо потрібно закрити ширший простір. Це показано на ілюстрації:
Відповідно до цієї моделі одне зображення перекриває частину іншого. Якщо припустити, що по краях наших картинок є щось унікальне, як, наприклад округлений кут закладки, ми навряд чи захочемо, щоб одна картинка повністю закривала іншу, що знаходиться позаду. Щоб цього не сталося, ми зробимо передню (в нашому випадку ліву) картинку як можна більш вузькою. Але при цьому картинка повинна бути досить широкою, щоб збереглася її видима унікальність. У нашому випадку унікальними є закруглені кути, тому передня картинка буде шириною з цю, округляє частина зображення:
Якщо розмір закладки збільшиться в результаті, наприклад, масштабування тексту, наші картинки розійдуться в сторони, оголивши неприємний розрив. Отже, потрібно оцінити масштаб прийнятного розширення. Як сильно може збільшитися об'єкт при масштабуванні тексту в браузері? Реально слід розраховувати на можливість збільшення до 300%. Щоб компенсувати це зростання, потрібно розтягнути фонові зображення. У нашому прикладі, ми зробимо задню картинку (права сторона) розміром 400х150 пікселів, а передню-9х150 пікселів.
Не забувайте, що фонові зображення видно тільки в «дверному отворі» елемента, до якого вони застосовані ( «дверний отвір» -область контенту + відступ). Обидві наші картинки прикріплені до зовнішніх кутах їх відповідних елементів. Видимі частини цих зображень об'єднуються усередині дверного отвору і утворюють форму закладки:
Коли закладка збільшується, зображення розсуваються, заповнюючи більш широкий отвір, при цьому видима область зображень також стає більше:
Те ж саме потрібно зробити і зі світлим зображенням для поточної закладки. Отримавши таким чином всі 4 зображення, (1, 2, 3, 4) ми можемо приступити до створення коду і CSS для наших закладок.
У міру знайомства зі створенням горизонтальних списків за допомогою CSS ви помітите як мінімум два способи розташування групи об'єктів в один ряд. У кожного є свої переваги і недоліки. Обидва вимагають звернення до досить складних аспектів CSS, в результаті можна швидко заплутатися. Перший спосіб використовує рядкові елементи, другий-властивість float.
Перший спосіб-можливо більш поширений-передбачає зміну властивості display на «inline» (рядковий). «Рядковий» метод привабливий своєю простотою. Однак він призводить до проблем в реалізації нашого методу розсувних дверей в деяких браузерах. Другий спосіб, на якому ми і зосередимо нашу увагу, використовує плаваючу модель для вибудовування елементів списку в горизонтальний ряд. Плаваюча модель, однак, теж може розчарувати. Її суперечлива поведінка часом порушує всю мислиму логіку. Але все ж загальне розуміння того, як справлятися з кількома плаваючими елементами і знання надійних способів «виходу» з плаваючого ряду (або його укладення в контейнер) може створити дива.
Ми спробуємо помістити кілька плаваючих елементів всередину іншого плаваючого елементу-контейнера. Це треба зробити так, щоб зовнішній батьківський плаваючий елемент повністю оточив внутрішні плаваючі елементи. Тоді ми зможемо додати позаду наших закладок фоновий колір або фонове зображення. Важливо пам'ятати, що положення наступного за закладками елемента має бути відновлено за допомогою CSS-властивості clear. Тоді плаваючі закладки не зможуть впливати на розташування інших елементів сторінки.
Почнемо з наступного коду:
На практиці блок #header міг би містити наприклад, ще логотип і форму для пошуку. У нашому прикладі ми скоротимо значення href для кожного посилання до "#". Зрозуміло, що в реальному житті замість цього значка буде вказано шлях до файлу або папці.
Почнемо роботу з CSS з присвоєння властивості float контейнера #header. Це дає гарантію того, що контейнер насправді «вміщує» елементи списку, які теж будуть плаваючими. Так як ми зробили #header плаваючим, нам потрібно присвоїти йому ширину в 100%. Ми також додамо тимчасовий жовтий фон, щоб переконатися, що цей батьківський елемент розтягується на всю ширину позаду закладок. Ну і нарешті поставимо кілька основних шрифтових властивостей, щоб забезпечити єдність зовнішнього вигляду елементів:
#header #current a
Зробивши це, ми отримуємо приклад 4. Зауважте, що вжиті нами для створення прозорих кутів кроки, призвели до появи невеликий «мертвої» зони в лівій частині закладки, де вона не реагує на наведення миші. Мертва зона знаходиться поза текстом, але вона все ж помітна. Прозорі картинки для кожної сторони нашої закладки використовувати необов'язково. Якщо ми віддамо перевагу не мати на нашій закладці «мертвого» ділянки, потрібно всього лише використовувати позаду закладок суцільну заливку, а не градієнт, і зробити куточки закладок такого ж кольору. Поки ж ми збережемо прозорість кутів. [В IE / Win згадана «мертва» зона існувала і до зроблених кроків, причому з усіх боків від тексту посилання. Вирішення цієї проблеми висвітлено в наступній статті серії SlidingDoorsofCSS, PartII.-прим. перекладача]
Ну і, нарешті, останні штрихи. Все за один раз: робимо весь текст напівжирним, текст на звичайних закладках коричневим, а на поточному-темно-сірим, цей же колір присвоюємо тексту для стану посилання hover, прибираємо підкреслення посилань. Всі зроблені до цієї хвилині додавання і зміни представлені в прикладі 5.
Ще один метод для забезпечення сумісності
Розглянувши приклад 2, ми визнали наявність проблеми з IE5 / Mac, який розтягував закладки на всю ширину вікна, вибудовуючи їх вертикально одна під інший. Не зовсім той ефект, якого ми домагаємося.
У більшості браузерів застосування до елемента властивості float тягне його стиснення до мінімально можливого розміру, що визначається його контентом. Якщо плаваючий елемент містить картинку (або сам є картинкою), то він стиснеться до ширини картинки. Якщо він містить лише текст, то стиснеться до ширини найдовшою рядки тексту, що не містить переносів.
Проблеми виникають в IE5 / Mac, коли блоковий елемент з шириною auto поміщається всередину плаваючого елементу. В цьому випадку всі браузери стискають плаваючий елемент до мінімально можливої ширини, не звертаючи уваги на внутрішній блоковий елемент. А ось IE5 / Mac в описаній ситуації цього не робить. Замість цього він розтягує плаваючий і внутрішній блоковий елементи на всю доступну ширину. Щоб обійти таку поведінку, нам потрібно застосувати float також і до заслання, але тільки для IE5 / Mac, не зачіпаючи інші браузери. Спочатку додамо float до вже існуючого правилом. Потім застосуємо «Метод зворотного слеша», щоб заховати від IE5 / Mac нове правило, яке видаляє float для інших браузерів:
no-repeat right top;
padding: 5px 15px 4px 6px;
/ * Commented Backslash Hack
hides rule from IE5-Mac \ * /
/ * End IE5-Mac hack * /
Відповідно до прикладом 6 IE5 / Mac тепер відображає закладки як належить. Для інших браузерів нічого не змінилося. IE5 / Mac містить величезну кількість CSS-багів, які були виправлені в версії IE5.1. Від цих багів в IE5 / Mac страждає і метод «розсувних дверей». Їх число перевершує всі мислимі межі, і я не збираюся з ними боротися. А так як оновлення до 5.1 вже досить тривалий час є для всіх бажаючих, відсоток Маков cOS 9 і встановленим IE5 / Mac постійно скорочується і наближається до нуля.
Ми тільки що детально розібрали метод «розсувних дверей», який дозволяє створювати зверстаний за допомогою ненумерованого списку і посилань і доопрацьовану за допомогою декількох правил CSS закладний навігацію на основі простого тексту. Така навігація швидко завантажується, проста у підтримці, а текст всередині неї може бути значно масштабований в будь-яку сторону без порушення дизайну. Чи варто говорити, наскільки гнучким є цей метод при створенні будь-якої витончено виглядає навігації?
Використання цієї техніки обмежується тільки нашою уявою. Заключний приклад ілюструє всього лише один варіант. Але цей приклад не повинен обмежувати наші ідеї.
До застосованої техніки можуть бути додані інші ефекти, які ми тут не розглядаємо. У нашому прикладі ми міняли колір тексту для стану hover, але чому б не поміняти фонове зображення цілком для отримання цікавих ролловер-ефектів. При наявності в коді двох вкладених HTML елементів ми завжди можемо використовувати CSS для накладання фонових зображень та отримання ефектів, про які ми й не мріяли. У нашому прикладі ми створили горизонтальний ряд закладок, але метод розсувних дверей можна використовувати і в багатьох інших випадках. Яке застосування цього методу запропонуєте ви?
Всі матеріали в розділі "Інформатика і програмування"