Как создать всплывающее окно обратной связи на чистом CSS

Как создать всплывающее окно обратной связи на чистом CSS

От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать JavaScript, на самом деле мы создадим форму, воспользовавшись «техникой хака чек-боксов CSS». Звучит интересно?

Вот что мы будем создавать:

1. Начинаем с разметки страницы

Мы начнем с чек-бокса вместе с его меткой и формой. В форме мы поместим некоторые общие элементы ввода. Имейте в виду, что порядок здесь имеет значение. Сначала мы установим чек-бокс, затем метку и, наконец, форму. Мы свяжем каждый элемент управления формы с его меткой, установив значение id, равным значению метки for. Вот разметка страницы:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

2. Определение основных стилей

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

3. Стили элементов формы

Теперь механика. В качестве первого шага мы визуально скроем чек-бокс:

Затем мы сделаем следующие вещи:

Определим метку чек-бокса и форму как фиксированные элементы. Кроме того, мы разместим их в правом верхнем углу страницы.

Отобразим текст метки в вертикальной ориентации.

Скроем форму с холста. По умолчанию мы переместим ее на 100% ширины вправо.

Соответствующие стили следующие:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Далее мы добавим несколько простых стилей к элементам формы:

Переключение формы

Каждый раз, когда мы нажимаем на метку чек-бокса, форма должна появляться или исчезать с анимацией скольжения. Чтобы это произошло, мы воспользуемся преимуществами псевдо-класса :checked, селектора смежного элемента (~) и комбинатора следующего одноуровневого элемента (+). Вот необходимые стили:

Давайте обсудим первые три стиля выше:

Первый селектор ищет элементы .feedback-label, которые следуют сразу же за выбранным чек-боксом. Здесь вместо селектора + мы могли бы также использовать более общий селектор ~. Затем он плавно перемещает эти элементы сразу после формы. Обратите внимание на значение функции translateY(), которое кажется немного непонятным. Если вы посмотрите на предыдущее правило, ее значение изначально -100%. Теперь так и должно быть -(form width + 100%). Чтобы заставить calc() функцию возвращать отрицательное значение, мы умножим результат целевой операции на -1.

Второй селектор ищет элементы .feedback-label, которые следуют сразу же за выделенными фокусом чек-боксами. Опять же, здесь также будет работать селектор ~. Затем он задает для этих элементов обводку. Это полезно для доступности клавиатуры. Используйте клавишу Tab, чтобы переместить фокус на чек-бокс (метку). Затем нажмите клавишу пробела, чтобы переключить состояние формы.

Третий селектор ищет элементы .form, которые следуют (даже не сразу) за выбранным чек-боксом. Затем он плавно перемещает эти элементы в поле зрения, удаляя значение функции translateX().

4. Адаптивность

В качестве последней (важной) детали мы определим несколько правил для мобильных экранов. В этом нет ничего страшного, мы просто уменьшим ширину формы с 500 до 320 пикселей. Адаптивные стили:

Заключение

Вот и все, ребята! Не прилагая слишком много усилий, нам удалось реализовать форму обратной связи. Я надеюсь, что вам понравилось это упражнение и вы узнали некоторые новые вещи, которые сможете применить на практике в ближайшем будущем. Как всегда, спасибо за прочтение!

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий