Розсувні двері css - верстка

Серед рідко обговорюваних переваг 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%. Ми також додамо тимчасовий жовтий фон, щоб переконатися, що цей батьківський елемент розтягується на всю ширину позаду закладок. Ну і нарешті поставимо кілька основних шрифтових властивостей, щоб забезпечити єдність зовнішнього вигляду елементів:

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

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

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

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

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

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

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

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

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

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

заключні кроки

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

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

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

Зробивши це, ми отримуємо приклад 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 для інших браузерів:

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

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

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

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

Засновник і глава Stopdesign 'а, Дуглас Бауман (Douglas Bowman) спеціалізується в простому, ясному і передовому дизайні. Він постійно кидає виклик існуючому стану речей і розширює межі того, чого можна домогтися, використовуючи існуючі веб-стандарти. Даглас був головним архітектором гучного ре-дизайну Wired News в минулому році. Він обіцяє, що не буде задовольнятися цією славою.