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

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.

скачати

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

Douglas Bowman

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

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

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

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

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

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

У чому нововведення?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Те ж саме потрібно зробити і зі світлим зображенням для поточної закладки. Отримавши таким чином всі 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 не дозволить нам «просочитися» поточну закладку через цей кордон. Замість цього ми створимо нове зображення із потрібним нам обведенням по його нижньому краю. І поки ми працюємо з цим зображенням, додамо легкий градієнт, щоб це виглядало так:

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

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

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

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

Додати в блог або на сайт

Цей текст може містити помилки.

Програмування, комп'ютери, інформатика і кібернетика | Реферат
36.2кб. | скачати


Схожі роботи:
Образ будинку і двері в рок поезії
Китай відкриває двері для інвестицій
Образ будинку і двері в рок-поезії
Пам`ятка по CSS
Кулінарні рецепти CSS
Розробка сайту з використанням CSS
CSS дизайн з урахуванням контексту
Просунута CSS-верстка крок за кроком
© Усі права захищені
написати до нас