Техніки накладення css

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

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

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

Коли призначений для користувача інтерфейс сприймається тільки в постає модальном вікні, зазвичай застосовується ефект Lightbox, а інша сторінка затемнюється, позначаючи її неактивність. Завдання цього підручника - представити вам кілька методів, які можна застосувати для створення затемнює накладення за допомогою CSS, і позначити «за» і «проти» кожної техніки в міру їх опису.

МЕТОД №1: АБСОЛЮТНО позиціонувати ЕЛЕМЕНТ

Перший спосіб створення накладення - абсолютне позиціонування на сторінці елемента HTML. У розмітці буде порожній div, а за допомогою CSS цей div абсолютно позиціонується і йому призначається болшое значення z-index для того, щоб гарантувати, що він залишиться на сторінці поверх всіх інших елементів, крім модального вікна, що відкривається зверху цього накладення, яке отримає ще вищий z-index, ніж оверлей.

Припустимо, в нашу розмітку вже доданий порожній div, і йому призначено клас .overlay, а ось CSS для позиціонування цього накладення на сторінці:

Даний код дуже простий, але при використанні цього методу необхідно знати ще про дещо.

По-перше, переконайтеся, що оверлей абсолютно позиціонується по відношенню до body. Так що, якщо накладення, наприклад, міститься в іншому div'е і позиціонування цього іншого div'а встановлено на відносне, то оверлей буде позиціонується абсолютно щодо його контейнера, а не body. Тому вам потрібно або дати накладення можливість бути прямим підлеглим вузлом body, або переконатися, що ні у одного з його дочірніх елементів позиціонування не встановлено на relative.

Ще про цю методику слід зауважити, що не слід користуватися дуже високими значеннями z-index. Багато розробники люблять брати дуже великі значення, на кшталт z-index: 999999; при позиціонуванні оверлею або будь-якого іншого елемента поверх інших елементів сторінки. Це не потрібно. Найчастіше значення z-index рівного 10, іноді навіть менше, досить для того, щоб елемент на сторінці залишався поверх інших. Вам лише слід знати, що якщо інші елементи отримують z-index, і такі є, то просто встановіть z-index накладення більше найвищого у інших елементів.

І нарешті, потрібно також пам'ятати, що при цьому методі ви додаєте в свою розмітку порожній div, і це, звичайно, не семантично.

Перевага цього способу в тому, що він підтримується у всіх основних браузерах і навіть старих, аж до IE8.

Я помістила приклад на Codepen, щоб ви могли протестувати результат цієї техніки. Попробуйтезаменіть min-height в html і body на height, або видалити позиціонування relative з body і подивитися, як при прокручуванні оверлей обрізається внизу.

МЕТОД №2: ЕЛЕМЕНТ З POSITION FIXED

І знову, в цій техніці ми додаємо в розмітку порожній елемент, що проти семантики розмітки. Як же цього уникнути?

МЕТОД №3: ЗАСТОСУВАННЯ псевдоелементи

Щоб уникнути додавання порожніх елементів в розмітку замість них при створенні накладення можна використовувати псевдоелементи. Стилі і рішення цього методу багато в чому схожі на попередні, за винятком того, що замість кожного стилю і розташування порожнього елемента з класом .overlay ми призначимо стилі псевдоелементи body: before або: after.

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

МЕТОД №4: ЗАСТОСУВАННЯ До модальності вікна ШИРОКОГО КОНТУРУ

Створення накладання із затемненим фоном цим способом не вимагає додаткових елементів. Замість них можна застосувати до модальному вікна великий контур для отримання ефекту затемнення на решті сторінці.

Дякувати за цю техніку слід Леа Віру (LeaVerou), вона першою поділилася нею з нами через twitter. Отже, уявіть, що у вас в розмітці є елемент, який представляє модальне вікно, яке з'явиться в накладенні:

Звичайно, не забудьте встановити z-index модального вікна для того, щоб воно залишалося поверх інших елементів сторінки.

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

Також зверніть увагу, що контур намальований поза border-a і не піде за округленими кутами. Якщо вони у вас є, як в прикладах, то ви помітите зазор. Так що цей метод може виявитися не кращим вибором, якщо у вас модальне вікно з округленими кутами.

МЕТОД №5: ЗАСТОСУВАННЯ До модальності вікна ШИРОКОЇ ТІНІ БЛОКУ

Єдина відмінність цієї і попередньої техніки в тому, що замість великого контуру ми застосуємо до модальному вікна широку тінь блоку.

Результат, звичайно, теж сильно схожий.

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

Тіні блоку не легко відображати, і все стає ще гірше, коли широкі тіні застосовуються до фіксованих елементів, так як це може змушувати браузер перемальовувати великі області сторінки при прокручуванні. Особливо погано виходить в Firefox'е, де фіксовані елементи і широкі тіні блоку CSS здатні істотно знизити швидкість. аж до 2 кадрів в секунду при прокручуванні і маніпулюванні DOM.

МЕТОД №6: ЗАСТОСУВАННЯ ЕЛЕМЕНТА HTML DIALOG

Остання обговорювана нами методика досить нова і дійсно приголомшлива! І сама семантична з усіх, якщо ви створюєте накладення для діалогового або модального вікна.

Тепер їх можна легко створити і призначити їм стилі за допомогою елемента HTML dialog. Елемент dialog забезпечує внутрішню функціональність. Діалог існує в дереві DOM, а призначити йому стилі можна за допомогою простого CSS. Елемент dialog представляє частину програми, з яким користувач взаємодіє для виконання завдання, наприклад, діалог, інспектор або вікно. - специфікація HTML WHATWG

У елемента HTML dialog є чотири основних властивості. в трьох з яких ми найбільше зацікавлені при створенні оверлеїв (четверте на момент написання цієї статті ще не застосовується):

Діалоги можуть бути модальними. Коли модальний діалог відкривається, він блокує решті документ. Для управління випадком застосування безлічі модальних діалогів існує штабель «виконуваних діалогів».

Новий накладається шар поверх існуючих контекстів CSS виконує поведінку «завжди зверху». І dialog, і специфікація Fullscreen користуються верхнім шаром. Модальні діалоги постійно знаходяться в верхньому шарі. Тому вам не потрібно турбуватися про встановлення z-index вручну для того, щоб ваше модальне вікно залишалося поверх всіх елементів сторінки.

Здорово, так? Елемент dialog центрируется замовчуванням, але, як говорилося в першому пункті, він застосовує абсолютне позиціонування, тому його можна прокручувати. Можна обійти абсолютне позиціонування за замовчуванням, встановивши position на fixed в таблиці стилів. Якщо дійсно вирішите змінити позицію на фіксовану, вам також доведеться встановити значення top і left і теж відцентрувати їх. Елемент dialog можна помістити в DOM де завгодно.

Йому можна призначити стилі точно так же, як будь-якого іншого елементу блочного рівня.

Крім того, елемент dialog йде разом з псевдоелементи під назвою. backdrop, який дає можливість призначати стилі фону під модальним вікном, створюючи, таким чином, затемнений ефект накладення, який раніше ми створювали в попередніх п'яти техніках, тільки на цей раз можна легко створити таке накладення, призначивши стилі псевдоелементу, що йде за замовчуванням з елементом dialog .

Ось на що буде схожий результат:

Ось і все, що потрібно для створення накладання за допомогою елемента dialog! Змусити його працювати ще простіше - dialog йде в комплекті з API, чому показ або приховання модального вікна стають завданням-цукеркою і де, крім іншого, застосовуються функції типу show () і hide (). Більше дізнатися про елемент dialog і його API і подивитися живі приклади можна в цьому демо від Ейжі Китамура (Eiji Kitamura). Демо-приклад йде в режимі Полифила. коли ви переглядаєте його в браузері, який ще не підтримує елемент dialog.

ПІСЛЯМОВА

Думаю, ми розглянули майже всі методи, які застосовуються для створення накладання на сторінці для модальних вікон. Як ви, можливо, здогадалися, остання техніка із застосуванням елемента dialog найкраще підходить для створення оверлеїв модельного вікна або діалогу, але на момент написання цієї статті вона підтримується тільки в Chrome Canary з доступним поліфілії. Так що вам потрібно бути обережніше з браузерної підтримкою, якщо спробуєте використовувати його зараз. Але як тільки його підтримка буде додана в усі основні браузери, він стане найкращим способом створення сторінкових оверлеїв, при цьому стануть доступні чудові властивості роботи з ним.

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі