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

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

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

От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать 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.