Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Освоение общих селекторов: пользовательские элементы формы

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Одним из самых мощных и недоиспользуемых селекторов CSS является обобщающий близких (селекторов): ~. В следующих уроках я рассмотрю различные способы использования ~ для создания компонентов, которые не только визуально привлекательны, но также функциональны и полезны. Этот урок посвещён элементам формы: радио-переключение, поле с флажком "галочка" и обычные поля ввода.

Мы изучим многое: современные CSS-селекторы, свойство will-change — “изменится”, stroke — свойство обводки SVG, состояния полей ввода и многое другое!

Прежде чем мы начнём…

Сразу оговорюсь: эти эффекты CSS могут работать или не работать в старых браузерах — я тестировал их в последних версиях Chrome, Firefox и Safari.

Я буду использовать Haml (компилятор HTML) и Sass (препроцессор CSS), чтобы ускорить процесс написания кода! В демо буду использовать Haml, в то время как в примерах кода будет использоваться обычный HTML.

Я также буду использовать замечательный AutoPrefixer, как Vendor Prefixing . Если вы используете CodePen, обязательно зайдите в настройки вашего pen’а, нажмите на CSS и выберите AutoPrefixer.

Autoprefixer in your pen settings
Выбираем AutoPrefixer в настройках pen’а

Радио переключатели

Мы начнем с одного из самых элементарных элементов формы: радио-переключателя. Существуют два основных визуальных состояния (включено или выключено), а также два промежуточных состояния (наведение и клик/клик-в-процессе по внешнему виду аналогичны состоянию включено).

SVG версия

Первым шагом будет настройка нашего HTML. Вам понадобится главный внешний контейнер и внутренний контейнер с двумя дочерними элементами: div, содержащие элемент поля и визуальные элементы, и label — метку для поля ввода. Мне нравится использовать fieldset в качестве внешнего контейнера. Убедитесь, что вы добавили ID для поля ввода, соответствующего атрибуту for для метки.

Следующий шаг — скрыть стандартное поле ввода, добавить базовое оформление и скрыть лишние элементы, которые будут отображаться только при выборе радио-переключателя. Идея состоит в том, чтобы сделать поле ввода невидимым, но поместить его поверх визуальных элементов, чтобы клик по радио-переключателю работал также, как при клике по обычному радио-переключателя. Мы можем сделать это, установив position: relative в .svg и position: absolute в поле ввода, затем скрыть поле.

Примечание: вы можете отформатировать его любым способом. Я выбрал основной стиль в виде круга, который имитирует радио переключатель по умолчанию, за исключением того, что он более плоский.

Мы зададим некоторые цветовые переменные, используя Sass; пару серых цветов и ярко-синий для выбранного переключателя. Мы также установим переменную $p стандартного размера — 12px, это отличное число, потому что оно делится на широкий диапазон различных чисел (1, 2, 3, 4, 6).

Я разместил основные переменные непосредственно в рабочем файле, но дополнительные стили можно найти здесь или, чтобы просмотреть дополнительные таблицы стилей, перейдите на страницу CodePen, нажав Settings в верхнем правом углу и нажав на вкладку CSS.

Мы сделали первый круг светло-серым, а второй ярко-синим, а затем спрятали второй, установив transform: scale(0). Позднее мы снова отобразим круг, поэтому сейчас важно установить масштаб.

После настройки всего этого, нам нужно определиться с визуальными стилями для каждого состояния. Для этого примера я решил, что при наведении — светло-серый круг должен стать светло-голубым; по клику, синий кружок масштабируется, а серый фон становится белым, а затем остается таким во включенном состоянии. Единственный способ убрать состояние включено с радио переключателя — это выбрать другой элемента, и в этом случае синий и белый цвета должны просто исчезнуть.

Сначала мы настроим цвета, а затем анимацию, поскольку все состояния имеют цвета. Вот тут нам и пригодится тильда ~. Этот общий, объединяющий селектор (объединяющий родственные элементы) выберет второй элемент, если ему где-нибудь предшествует первый элемент, и у них общий родительский элемент. Мы используем input:hover ~ div для выбора визуального элемента при наведении на элемент поля.

Попробуйте кликнуть по первому переключателю, а затем по второму — вы должны четко видеть состояния: “при наведении” и активно/включено.

Последний шаг — настроить анимацию для каждого состояния. Ключевым моментом в анимации всех этих различных состояний, является установка их к выключенному состоянию по умолчанию и настройка включенного состояния, при клике по элементу. Я использую новое CSS свойство, называемое will-change (изменится), чтобы браузер знал, какие свойства я буду анимировать.

HTML версия

Вы также можете сделать этот пользовательский радио переключатель без использования SVG. Настройка аналогична:

CSS почти то же самое, за исключением того, что стилей для двух элементов div немного больше, которые заменяют круги в SVG. В этом случае мы используем nth-of-type(n) для выбора различных элементов div, чтобы нам не нужно было задавать им HTML класс.

В SVG версии больше разметки, но меньше стилизации; в HTML версии — наоборот. Результаты выглядят одинаково, поэтому выберите тот, который подходит вашим предпочтениям написания кода!

Переключатель “флажок” (галочка)

Следующий элемент формы, который мы будем настраивать — это переключатель “флажок”. Его состояния аналогичны состояниям радио переключателя: двум основным визуальным состояниям (включено и выключено) и двум промежуточным состояниям (“при наведении” и активно/включено).

SVG версия

Настройка очень похожа на радио переключатель, но тут используются линии, чтобы сформировать галочку вместо кругов.

Линии в первой группе будут иметь светло-серый цвет и не будут анимироваться; линии во второй группе будут анимироваться при нажатии на поле ввода.

Также есть дополнительный элемент div; мы будем использовать его для создания эффекта при клике, чтобы яркий синий цвет заполнял задний фон. Чтобы эффект работал, div должен быть синим кругом с большей шириной и высотой, чем фактическое поле флажка, а внешний контейнер должен иметь а overflow: hidden; поэтому настройте это так, чтобы края круга не отображались. Круглый div должен иметь transform: scale (0), подобно радио переключателю.

Checkbox dimensions and circle dimensions
Размеры полей “флажок” (слева) и окружности (справа)

И опять же, настройте это по вашему вкусу. Я решил скруглить края у галочки, а, впрочем и все углы.

Следующим шагом будет подготовка к анимации. Эффекты аналогичны тем, что мы делали для радио переключателя, за исключением того, что вместо расширяющегося круга, галочка будет прорисовываться. Для этой анимации нам нужно использовать stroke-dashoffset в SVG-линиях.

Чтобы анимировать stroke-dashoffset, нам понадобится длина каждой строки. Я создал инструмент для вычисления длины на CodePen, но если вы уже используете созданную мной галочку, то длина короткой линии будет равна 6.708, а большей - 14.873. Мы будем использовать эти значения для настройки как stroke-dashoffset, так и stroke-dasharray. Это необходимо только для первой галочки (второй набор линий отображается по умолчанию в выключенном состоянии).

Когда элемент будет включен, для параметра stroke-dashoffset мы установим в значение 0, что (с преобразованием) будет выглядеть так, как-будто линия «прорисовывается». Нам также необходимо добавить изменения для других состояний так же, как в нашем радио переключателе, в том числе изменение фона при наведении и масштаб круга при клике.

Последний шаг — добавить во всё преобразования. Опять же, по умолчанию, мы устанавливаем состояние выключено и задаем переход в состояние включено, при клике. Также как с кругом, затухающем в радио переключателе, мы сделаем угасание галочки, при выключении.

HTML версия

Вы можете добиться того же эффекта с несколькими div элементами вместо использования SVG; разметка проще, но не так четко обозначена. Первый пустой div — расширяющийся синий круг, второй — стандартная галочка, а третий — галочка, которая анимируется при нажатии.

Мы будем использовать :before и :after для каждой части галочки, это упростит разметку, иначе вам понадобится четыре или больше пустых элемента для создания двух галочек. Мы должны позиционировать линии вручную и "доводить” их до места, но вы можете использовать одно и тоже преобразование для поворота и рисования.

Символьная версия

Также вы можете использовать символ галочки вместо вращения div элементов! Визуально, это не совсем то же самое, что предыдущие два варианта, но работает так же хорошо.

Примечание: HTML символ вам нужен только в двух последних div элементах, но в приведенном ниже демо я включил его во все три div, для того, чтобы сделать повторяющийся цикл.

Поскольку мы не можем рисовать символ, белая версия появляется и исчезает при нажатии. Попробуйте все три варианты ниже!

Обычные поля ввода

Последняя часть этого урока — обычные текстовые поля ввода. Я взял идею с линией из темы Google Material. Эти поля ввода имеют несколько различных состояний: по умолчанию, активный/в фокусе (когда введен мигающий курсор), и неуловимый при наведении.

Настройка еще более минимальна, чем темизация двух предыдущих элементов. У нас есть набор полей (fieldset), поле ввода, заголовок и ограничивающий элемент div.

Следующий шаг — оформление поля ввода. На этот раз мы не будем скрывать поле ввода, поскольку нам нужно, чтобы оно отображало значение. Мы также создадим заголовок, который будет перемещаться вверх и вниз, когда мы фокусируемся на этом поле. Чтобы это сделать, нам нужно разместить заголовок точно над полем ввода. Граница div'а  будет иметь псевдо-элемент :after, который будет обрисовывать границу поверх, при нажатии на поле ввода; мы наложим scale(0) на псевдо-элемент, чтобы подготовить его для дальнейшей анимации.

Если вы попробуете нажать на приведенный выше пример поля ввода и начнёте печатать, вы заметите, что текст накладывается поверх заголовка. Мы анимируем заголовок, чтобы уменьшить его и переместить наверх при клике. Вы можете использовать трансформацию по полной, чтобы предотвратить смену цвета, вместо того, чтобы использовать font-size, как я, но я обнаружил, что использование его, а также translateY дало мне более точную анимацию. Мы также удалим масштабирование у div :after, чтобы сделать прорисовку анимации.

Теперь, если вы попытаетесь нажать на пример поля ввода выше и снова начнёте печатать, заголовок уменьшится и плавно переместится вверх, но если вы оставите напечатанный текст и "выйдите" из поля, нажав снаружи, заголовок снова сдвигается вниз, перекрывая введенное. Мы могли бы использовать JavaScript для предотвращения такого поведения, но мы можем использовать CSS состояние поля ввода, которое назыавется :valid.

К нашему полю ввода мы можем добавить пустой HTML атрибут — required или Haml атрибут :required => true. Затем мы добавляем свойства :valid к :focus в нашем Sass/CSS. Это добавляет дополнительное визуальное состояние к нашему полю, и поскольку это простое поле ввода текста, единственное допустимое состояние (объясняется св-во valid) — это когда текст введен.

Примечание. Использование другого типа полей для ввода данных, таких как ввод электронной почты, может привести к поломке этого поведения, поскольку поля электронной почты имеют разные требования к состоянию valid.

Вдохновение

Если вы хотите создать ваши собственные поля с использованием этих методов, но вам нужно больше визуального вдохновения, посмотрите комплекты пользовательских интерфейсов UI, доступные по подписке Envato Elements:

UI kits on Envato Elements
Наборы пользовательских интерфейсов на Envato Elements

Вывод

Существуют десятки различных способов использования селектора общих родственных элементов — визуально, функционально или и теми, и другими. Он обеспечивает мощный способ настройки компонентов без необходимости использовать что-то большее, чем просто CSS и HTML. В этом уроке мы рассмотрели три различных вида элементов формы; в следующем мы рассмотрим меню и навигацию. Не стесняйтесь оставлять комментарии ниже, если у вас есть какие-либо вопросы или предложения!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.