Від автора: один з найбільш потужних і недостатньо використовуваних CSS селекторів – це комбінатор спільного батька або ~. У наступних статтях я розповім про різні способи створення не тільки привабливі, але і функціональних і корисних компонентів з допомогою ~. У цьому уроці ми розберемо з вами елементи форми: радіокнопки, чекбокси і звичайні инпуты.
Ми дізнаємося багато нового: сучасні CSS-селектори, властивість will-change, SVG-властивість stroke, стану инпутов і багато іншого!
Перш ніж почати…
Невеликий дисклеймер: представлені у статті ефекти можуть працювати в старих браузерах, а можуть і ні. Я перевіряв їх в останніх версіях Chrome, Firefox і Safari.
Для прискорення процесу програмування я буду використовувати Haml (HTML-компілятор) і Sass (CSS-препроцесор)! У демо буде використовуватися Haml, а в инлайновом звичайний HTML коді.
Також замість вендорних префіксів я буду використовувати чудову бібліотеку AutoPrefixer. Якщо ви працюєте в CodePen, не забудьте перейти в налаштування, клікнути на CSS і вибрати AutoPrefixer.
Радіокнопки
Почнемо ми з одного з базових елементів форми – радіокнопки. У даного елемента є два основних візуальних стану (checked і безконтрольно), а також два проміжних стану (hover і click/active – click візуально схоже на checked).
Версія SVG
Насамперед необхідно поставити HTML. Нам необхідний зовнішній контейнер і внутрішній з двома дочірніми елементами: div з инпутом і візуальними елементами, а також label для инпута. В якості зовнішнього контейнера я люблю використовувати fieldset. Не забудьте додати ID инпуту зі значенням, рівним значенню атрибута for на тезі label.
SVG
Далі необхідно приховати дефолтний инпут, додати базові стилі і приховати додаткові елементи, які повинні показуватися тільки після вибору радіокнопки. Ідея полягає в тому, щоб зробити инпут невидимим і розташувати його зверху візуальних елементів, щоб клік по радиокнопке був схожий на клік по візуальному елементу. Для цього необхідно задати position: relative для .svg і position: absolute для инпута, після чого приховати його.
Замітка: візуальний вигляд можете зробити абсолютно будь-який. Я зберіг базовий стиль гуртка, що імітує стандартну радіокнопку, тільки зробив її більш плоскою.
З допомогою Sass необхідно задати кілька змінних кольори: пара сірих відтінків і світло-блакитний для обраної кнопки. Також необхідно створити змінну $p одиниць за замовчуванням. У нас це буде 12px – прекрасне число, воно ділиться на 1, 2, 3, 4, 6.
Основні змінні я помістив безпосередньо під вбудоване демо, інше можна знайти за посиланням або на сторінці в демо, клікнувши на налаштування в правому верхньому кутку, далі вкладка CSS.
Перший гурток у нас світло-сірий, другий – світло-блакитний. Другий гурток схований за допомогою transform: scale(0). Пізніше ми з допомогою анімації повернемо другий гурток, тому нам потрібно задати початкове значення scale.
Після всіх налаштувань необхідно визначитися зі стилями всіх станів. При наведенні світло-сірий гурток буде ставати ясно-блакитним. По кліку світло-блакитний гурток плавно переходить в блакитний, а задній фон змінюється з сірого на білий. Фон зберігається для стану checked. Прибрати з кнопки стан checked можна тільки, натиснувши на іншу радіокнопку. При натисненні на іншу кнопку блакитний і білий колір плавно повертаються у вихідні відтінки.
Спочатку ми встановимо кольору, а потім анімацію, так як кольори задані для всіх станів. Ось тут нам і знадобиться ~. Селектор спільного батька (споріднений комбінатор) вибирає елемент, якщо йому передує інший елемент, і в обох є спільний батько. Для вибору візуального елемента при наведенні курсору на инпут ми використовуємо input:hover ~ div.
Клікніть на першу кнопку, потім на другу. Ви повинні чотки бачити стану hover і checked/active.
Залишилося анімувати стану. Для додавання анімації необхідно встановити transition для стану безконтрольно за замовчуванням, а для стану checked по кліку. Для цього я скористаюся новим властивістю will-change, щоб дати зрозуміти браузеру, які властивості я збираюся анімувати.
Версія HTML
Користувальницькі радіокнопки можна зробити і без SVG. Розмітка буде схожою:
HTML
CSS залишається майже тим же, додається трохи стилів для тегів div, які замінюють SVG-гуртки. В цьому випадку для вибору різних div ів (щоб не давати їм окремі класи) ми будемо використовувати nth-of-type(n).
У версії на SVG менше стилів, але більше розмітки, в HTML-версії навпаки. Результат ідентичний, можете використовувати те, що більше подобається!
Чекбокси
Наступний елемент, який ми будемо кастомизировать – чекбокс. Стану ті ж, що і у радіокнопки: два основних візуальних стану (checked і безконтрольно) і два проміжних (hover і click/active).
Версія SVG
Розмітка дуже схожа, тільки замість кружечка галка формується з допомогою ліній.
SVG
Лінії першої групи будуть мати світло-сірий колір, вони не будуть анимироваться. Лінії другої групи будуть анимироваться по кліку на инпут.
Також є додатковий елемент div. Його ми будемо використовувати для створення ефекту натискання. Цей блок буде плавно заповнюватися світло-блакитним кольором. Щоб ефект працював, div повинен прийняти форму блакитного кола з діаметром більшим, ніж ширина і висота реального чекбокса. Зовнішнього контейнера необхідно задати overflow: hidden;, щоб приховати частині кола, вылезающие за чекбокс. У круглому div е буде змінюватися transform: scale(0), як в радиокнопке.
І знову ж таки, стиль можете задати будь. Я скруглю краю галки, як, в принципі, і всі кути.
Тепер необхідно підготувати анімацію. Ефекти схожі на ефекти для радіокнопки, тільки тут буде не розширюється коло, а плавно рисующаяся галка. Для створення подібної анімації нам знадобиться властивість stroke-dashoffset, яке необхідно застосувати до SVG-лініях.
Для анімації stroke-dashoffset необхідно знати довжину ліній. Я створив інструмент на CodePen для обчислення довжини. Якщо ви використовуєте створені мною галки, то маленька лінія дорівнює 6.708, а довга – 14.873. Ці значення нам знадобляться для stroke-dashoffset і stroke-dasharray. Анімація потрібна тільки для першої галки (другий набір ліній показується за замовчуванням в стані безконтрольно).
По кліку на инпут необхідно задати stroke-dashoffset в 0, що (з властивістю transition) буде імітувати «малювання» лінії. В інший стан необхідно скопіювати зміни з радіокнопки, зокрема зміна фону по наведенню та збільшення кола по кліку.
Залишилося додати всі плавні переходи. І знову, переходи для безконтрольно ставимо за замовчуванням, а для checked по кліку. І як для кола в радиокнопке, галя буде плавно стає світло-сірої при переході в стан безконтрольно.
Версія HTML
Той же ефект можна відтворити, додавши пару div ів замість SVG. Розмітка стане простіше, але не такою чіткою. Перший порожній div – збільшується блакитне коло, другий блок – це галка за замовчуванням, третій – анимируемая галка при кліці.
HTML
Для створення галки візьмемо :before :after, це спростить розмітку. Можна піти по-іншому, але тоді знадобиться 4 порожніх елемента йди більше для створення двох галок. Лінії необхідно орієнтувати і повернути вручну. Для повороту і малювання ліній можна використовувати одну трансформацію.
Версія зі спеціальним символом
Щоб не обертати div и, можна використовувати символ галки! Візуально вона злегка відрізняється від двох інших, але вона працює.
Symbol
Примітка: HTML-символ потрібен тільки в останніх двох div ” ах, але в демо нижче я додав його у всіх три div а, щоб включити символ в повторюваний цикл.
Ми не можемо анімувати малювання символу, тому по кліку буде просто плавно з’являтися біла галка. Всі три версії можете побачити нижче!
Звичайні инпуты
Остання частина нашого уроку – звичайні текстові инпуты. Я надихався матеріальним дизайном инпутов Google. У цих полів кілька станів: за замовчуванням, active/focus (коли видно миготливий курсор) і тонке стан hover.
Розмітка ще більш проста, ніж у попередніх двох прикладах. У нас є fieldset, input, label div (рамка).
Label
Далі необхідно стилізувати инпут. В цей раз ми не будемо ховати поле, воно повинно відображати значення. Також необхідно створити лейбл, який буде плавно підніматися і опускатися по фокусу инпута. Щоб все запрацювало, лейбл повинен знаходитися прямо над инпутом. У рамках div буде псевдоэлемент :after, який поверх рамки буде малювати лінію, коли инпут отримує фокус. Початковим значенням для псевдоэлемента буде scale(0).
Спробуйте набрати текст в демо зверху. Бачите, текст набирається поверх лейблу? За допомогою анімації ми будемо зменшувати лейбл і перемістити його вгору по кліку. Всю анімацію можна виконати за допомогою трансформацій, щоб не було перерисовок. А можете зробити як я, анімувати font-size. Я з’ясував, що за font-size та translateY виходить більш точна анімація. Для створення ефекту малювання лінії необхідно видалити scale з div:after.
Якщо тепер клацнути на полі в демо зверху і ввести текст, то лейбл зменшиться і плавно пересунеться вгору. Однак якщо залишити текст в полі і клацнути де-небудь в іншому місці, лейб опуститься і загородит текст. Уникнути цього можна з допомогою JS, а можна скористатися станом :valid.
У инпут можна додати порожній атрибут required або ж :required => true Haml. Далі необхідно додати стан :valid до :focus в Sass/CSS, так ми отримаємо додаткове візуальне стан для нашого инпута. Так що це простий текстовий инпут, то єдиним валідним станом буде текст.
Зауваження: ефект не працює з іншими типами инпута, такими як email, так як у них інші вимоги щодо валідності.
Натхнення
Хочете створити свої власні инпуты за цим технікам, але не вистачає натхнення? Подивіться UI-набори доступні після підписки на Envato Elements:
Висновок
Селектор з загальним батьком можна використовувати різними способами, чи то візуальний селектор, функціональний або обидва відразу. Селектор дає потужний інструментарій для налаштування компонентів без необхідності підключати що-небудь крім CSS і HTML. Сьогодні ми розглянули три елементи форми, в наступному уроці ми розглянемо меню і навігацію. Якщо у вас виникли питання або пропозиції, обов’язково пишіть про це в коментарях!
