От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать JavaScript, на самом деле мы создадим форму, воспользовавшись «техникой хака чек-боксов CSS». Звучит интересно?
Вот что мы будем создавать:
1. Начинаем с разметки страницы
Мы начнем с чек-бокса вместе с его меткой и формой. В форме мы поместим некоторые общие элементы ввода. Имейте в виду, что порядок здесь имеет значение. Сначала мы установим чек-бокс, затем метку и, наконец, форму. Мы свяжем каждый элемент управления формы с его меткой, установив значение id, равным значению метки for. Вот разметка страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<input type="checkbox" id="mycheckbox"> <label for="mycheckbox" class="feedback-label">FEEDBACK</label> <form class="form"> <div> <label for="fullname">Full Name</label> <input type="text" id="fullname"> </div> <div> <label for="email">Email</label> <input type="email" id="email"> </div> <div> <label for="comment">Comment</label> <textarea id="comment"></textarea> </div> <div> <button type="submit">Send</button> </div> </form> |
2. Определение основных стилей
Теперь давайте определим несколько пользовательских переменных, чтобы задать схему расположения плюс некоторые правила сброса, особенно для элементов управления формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
:root { --white: white; --gradient: linear-gradient(-45deg, #FFA600 0%, #FF5E03 50%); --form: #eeefef; --border-radius: 4px; --form-width: 500px; --form-mob-width: 320px; } * { padding: 0; margin: 0; box-sizing: border-box; } button, label { cursor: pointer; } label { display: block; } button, input, textarea { font-family: inherit; font-size: 100%; border: none; } textarea { resize: none; } |
3. Стили элементов формы
Теперь механика. В качестве первого шага мы визуально скроем чек-бокс:
|
1 2 3 4 |
[type="checkbox"] { position: absolute; left: -9999px; } |
Затем мы сделаем следующие вещи:
Определим метку чек-бокса и форму как фиксированные элементы. Кроме того, мы разместим их в правом верхнем углу страницы.
Отобразим текст метки в вертикальной ориентации.
Скроем форму с холста. По умолчанию мы переместим ее на 100% ширины вправо.
Соответствующие стили следующие:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*CUSTOM VARIABLES HERE*/ .feedback-label, .form { position: fixed; top: 50%; right: 0; backface-visibility: hidden; } .feedback-label { transform-origin: top right; transform: rotate(-90deg) translate(50%, -100%); z-index: 2; } .form { width: var(--form-width); max-height: 90vh; transform: translate(100%, -50%); padding: 30px; overflow: auto; background: var(--form); z-index: 1; } |
Далее мы добавим несколько простых стилей к элементам формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/*CUSTOM VARIABLES HERE*/ .feedback-label, .form input, .form textarea, .form button { border-radius: var(--border-radius); } .feedback-label, .form button { background: var(--gradient); color: var(--white); } .feedback-label:hover, .form button:hover { filter: hue-rotate(-45deg); } .feedback-label { padding: 5px 10px; border-radius: var(--border-radius) var(--border-radius) 0 0; } form div:not(:last-child) { margin-bottom: 20px; } form div:last-child { text-align: right; } .form input, .form textarea { padding: 0 5px; width: 100%; } .form button { padding: 10px 20px; width: 50%; max-width: 120px; } .form input { height: 40px; } .form textarea { height: 220px; } |
Переключение формы
Каждый раз, когда мы нажимаем на метку чек-бокса, форма должна появляться или исчезать с анимацией скольжения. Чтобы это произошло, мы воспользуемся преимуществами псевдо-класса :checked, селектора смежного элемента (~) и комбинатора следующего одноуровневого элемента (+). Вот необходимые стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*CUSTOM VARIABLES HERE*/ [type="checkbox"]:checked + .feedback-label { transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1)); } [type="checkbox"]:focus + .feedback-label { outline: 2px solid rgb(77, 144, 254); } [type="checkbox"]:checked ~ .form { transform: translate(0, -50%); } .feedback-label, .form { transition: all 0.35s ease-in-out; } |
Давайте обсудим первые три стиля выше:
Первый селектор ищет элементы .feedback-label, которые следуют сразу же за выбранным чек-боксом. Здесь вместо селектора + мы могли бы также использовать более общий селектор ~. Затем он плавно перемещает эти элементы сразу после формы. Обратите внимание на значение функции translateY(), которое кажется немного непонятным. Если вы посмотрите на предыдущее правило, ее значение изначально -100%. Теперь так и должно быть -(form width + 100%). Чтобы заставить calc() функцию возвращать отрицательное значение, мы умножим результат целевой операции на -1.
Второй селектор ищет элементы .feedback-label, которые следуют сразу же за выделенными фокусом чек-боксами. Опять же, здесь также будет работать селектор ~. Затем он задает для этих элементов обводку. Это полезно для доступности клавиатуры. Используйте клавишу Tab, чтобы переместить фокус на чек-бокс (метку). Затем нажмите клавишу пробела, чтобы переключить состояние формы.
Третий селектор ищет элементы .form, которые следуют (даже не сразу) за выбранным чек-боксом. Затем он плавно перемещает эти элементы в поле зрения, удаляя значение функции translateX().
4. Адаптивность
В качестве последней (важной) детали мы определим несколько правил для мобильных экранов. В этом нет ничего страшного, мы просто уменьшим ширину формы с 500 до 320 пикселей. Адаптивные стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*CUSTOM VARIABLES HERE*/ @media screen and (max-width: 600px) { body { font-size: 16px; } .form { padding: 15px; width: var(--form-mob-width); } form div:not(:last-child) { margin-bottom: 10px; } [type="checkbox"]:checked + .feedback-label { transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1)); } } |
Заключение
Вот и все, ребята! Не прилагая слишком много усилий, нам удалось реализовать форму обратной связи. Я надеюсь, что вам понравилось это упражнение и вы узнали некоторые новые вещи, которые сможете применить на практике в ближайшем будущем. Как всегда, спасибо за прочтение!
Автор: George Martsoukos
Источник: //webdesign.tutsplus.com
Редакция: Команда webformyself.
