І ще. щоб не ускладнювати, я надам тільки необхідні фрагменти HTML і CSS. Не варто очікувати, що при копіюванні матеріалу зі статті матиме такий же ефект, як і в наведених нижче демках. Але якщо ви хочете подивитися повний код прикладу - можна перейти на сайт CodePen, також в кінці статті я надам посилання на файли з вихідним кодом.
Приклад простої форми
Нижче представлений варіант оповіщення користувача при заповненні форми.
Тут представлені три текстових поля, як мітки використовуються наповнювачі. Звичайно, це не дуже добре позначається на призначеному для користувача взаємодії, але я потрапляв у багато ситуацій, коли головний дизайнер забороняв використання видимих міток.
Моє рішення цієї надуманої проблеми полягає в тому, щоб перетворити мітки в "спливаючі нагадування", коли користувач переводить фокус на поле введення:
Як видно в цій ділянці HTML немає ніякої магії. Єдина незвична річ полягає в тому, що елемент
А ось цей шматок CSS змусить все це працювати:
Перший блок CSS - це стилі за замовчуванням для полів введення. Стиль .form-row утримує абсолютно позиційовані елемент .label-helper поруч з відповідним полем введення.
Елемент .input-text позиційований щодо, а z-index до нього застосований тому, що ми не хочемо, щоб мітка перекривала поле введення при переході.
А ось і CSS, який обробляє показ мітки при зміні фокусу:
Важливим моментом є використання псевдо-класу: focus в комбінації з селектором сусідніх елементів + (селектори сусідніх елементів відіграють важливу роль в наших демонстраційних прикладах).
Тому нам і треба розміщувати мітки після полів введення, так як інакше не буде працювати селектор сусідніх елементів.
Простіше кажучи, коли елемент потрапляє у фокус, сусідній елемент (мітка) стає видимим, і змінює своє положення так, щоб опинитися над полем введення, і надає користувачеві підказку, так як заповнювач поля більш не відображається.
Як невеликий доповнення я підсвічують поле введення email-а, якщо в ньому помилка. Так як поля введення не підтримують псевдо-елементи, помилка 'x' застосовується до мітки.
Кілька більш складних варіантів використання
Наведений вище приклад набуває популярності. Як я знаю, я не перший і не останній, хто використовував ефект для відображення підказки.
Переходи для односторінкових сайтів
Трохи пограти, я таки зробив це:
Можливо, ви помітили використання елементів на початку кожного розділу. В CSS ми будемо грунтуватися на них, так як нам також потрібно спиратися на селекторі сусідніх елементів (+), щоб змусити працювати ефекти переходу.
Простіше кажучи, ми будемо використовувати стан: checked перемикачів, які будуть активуватися кліком по відповідній мітці, і за допомогою селектора сусідніх елементів ми будемо міняти їх розміщення за допомогою простого CSS.
А ось і сам CSS:
Вищенаведений CSS забезпечує стилізацію "кнопок", а також приховує перемикачі, відключаючи їх відобра й інтерфейс.
Елементи .page-label і .page-label span використовуються для великих кнопок-панелей, тоді як клас .exit-label стилізує кнопку "закриття" відкритої панелі (знову ж, мітки, стилізовані під кнопки).
Тут у нас настройка контейнерів панелей (розділів) і їх вмісту. Контейнери мають розмір 50% від загальної висоти і ширини, що схоже на відповідний приклад з Codrops.
Розділи позиціонуються за допомогою transform: translate, замість того, щоб використовувати позиціонування зверху / зліва / знизу / праворуч. Це тому, що трансформації краще позначаються на продуктивності, так як вони не вимагають інтенсивної перемальовування, як це відбувається в разі зі зміною позиції елемента.
А ось і весела частина, де ми перевіряємо, якщо перемикач був обраний, і якщо так, то:
- .section-container змінює свої розміри до повної висоти і ширини, і трансформується в верхнє ліве положення вікна браузера
- кнопка закриття і вміст розділу стають видимими
- мітка, на яку скликали, стає невидимою, так що по ній більше не можна клікнути, і не перекриває вміст секції, яке тільки що було відображено
- секціях, які не були відібрані, проставляється межа, яка збільшується до розміру 40px, симулюючи ефект "зменшення" на тлі секції, яка розгортається на весь екран.
Альтернативні ефекти переходу
На основі злегка переробленої розмітки з попереднього прикладу, я представляю ще два приклади, які слідують тим же концепціям, що і минулий приклад.
Проблема цих прикладів полягає в тому, що не дивлячись на всю їх крутість і те, що вони показують, як багато всього можна зробити за допомогою CSS, в них все дуже погано в плані доступності для користувачів з обмеженими можливостями.
Прийнявши це до відома, давайте перейдемо до наступного прикладу, який куди як більш доступний користувачам з обмеженими можливостями, але дозволяє отримати схожі результати.
Зміна макета за допомогою: target
Трохи змінивши CSS і розмітку, можна домогтися такого ж поведінки, як в прикладах з навігацією за допомогою перемикачів, але використовуючи ID і псевдо-клас: target.
Давайте подивимося на зміни в розмітці:
замість використання перемикачів і селектора сусідніх елементів, тепер ми використовуємо ID кожного з елементів-контейнерів. Замість перемикачів роль "кнопок" грають посилання-якоря, що куди як більш семантично правильно.
Ось CSS, який зазнав більшу кількість змін:
Тут я навів тільки той CSS код, в якому було зроблено найбільше змін, але порівнявши попередні і поточний приклад, можна помітити, що зміни торкнулися тільки селектор.
Селектори міток були замінені на використання атрибута href замість атрибута for. і у нас вийшло відмовитися від використання перемикачів.
Так як тепер ми використовуємо: target для того, щоб посилатися на різні розділи, то селектори: checked + були замінені на відповідні селектори: target. Якщо раніше можна було оголосити один єдиний селектор: checked + для всіх варіантів, то використання селектора: target вимагає від дублювати його для кожного URI.
Необхідність писати таку кількість селекторів, звичайно, мінус в порівнянні з варіантом з перемикачами. Але зауважу: цей варіант більш правильний з точки зору семантики.
На завершення
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!