От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать JavaScript, на самом деле мы создадим форму, воспользовавшись «техникой хака чек-боксов CSS». Звучит интересно?
Вот что мы будем создавать:
1. Начинаем с разметки страницы
Мы начнем с чек-бокса вместе с его меткой и формой. В форме мы поместим некоторые общие элементы ввода. Имейте в виду, что порядок здесь имеет значение. Сначала мы установим чек-бокс, затем метку и, наконец, форму. Мы свяжем каждый элемент управления формы с его меткой, установив значение id, равным значению метки for. Вот разметка страницы:
<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. Определение основных стилей
Теперь давайте определим несколько пользовательских переменных, чтобы задать схему расположения плюс некоторые правила сброса, особенно для элементов управления формы:
: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. Стили элементов формы
Теперь механика. В качестве первого шага мы визуально скроем чек-бокс:
[type="checkbox"] { position: absolute; left: -9999px;
}
Затем мы сделаем следующие вещи:
Определим метку чек-бокса и форму как фиксированные элементы. Кроме того, мы разместим их в правом верхнем углу страницы.
Отобразим текст метки в вертикальной ориентации.
Скроем форму с холста. По умолчанию мы переместим ее на 100% ширины вправо.
Соответствующие стили следующие:
/*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;
}
Далее мы добавим несколько простых стилей к элементам формы:
/*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, селектора смежного элемента (~) и комбинатора следующего одноуровневого элемента (+). Вот необходимые стили:
/*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 пикселей. Адаптивные стили:
/*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
Источник: https://webdesign.tutsplus.com
Редакция: Команда webformyself.
