• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать выдвижную форму с помощью CSS (Анимация с выдвижной формой при помощи чистого CSS)
Создать выдвижную форму с помощью CSS
Kosten
Дата: Воскресенье, 2019-11-03, 19:44 | Сообщение 1
Онлайн
Администраторы
Сообщений:25131
Награды: 57


Иногда на сайте нужна скрытая форма, где только наблюдаем кнопку, что за основу возьмем форму обратной связи, а точнее как создать форму обратной связи вне холста с помощью CSS. Где при открытие страницы мы наблюдаем по правую сторону кнопку той или иной надписью, так как под эту форму можно разные функций выставить, здесь просто по умолчанию идет обратная связь. Все 'то делается на чистом стиле CSS, где при клике она выезжает, пр аналогичном клике заезжает на место.



HTML

Код
<input type="checkbox" id="mycheckbox">
<label for="mycheckbox" class="feedback-label">FEEDBACK</label>
<form class="form" action="">
  <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>

CSS

Код
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
: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;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
label {
  cursor: pointer;
}

label {
  display: block;
}

button,
input,
textarea {
  font-family: inherit;
  font-size: 100%;
  border: none;
}

textarea {
  resize: none;
}

body {
  font: 20px/1.5 sans-serif;
  background: var(--white);
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin-top: 20vh;
}

/* FORM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.feedback-label,
.form {
  position: fixed;
  top: 50%;
  right: 0;
  backface-visibility: hidden;
}

.feedback-label {
  transform-origin: top right;
  transform: rotate(-90deg) translate(50%, -100%);
  /*uncomment this if you want to reverse the order of the characters*/
  /*transform: rotate(90deg) translateX(50%);*/
  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;
}

.feedback-label,
.form,
.form button {
  transition: all 0.35s ease-in-out;
}

.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;
}

[type="checkbox"]:checked + .feedback-label {
  /*EDGE is buggy with calc + variables + transform - use a hardcoded value instead of variables*/
  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%);
}

@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));
  }
}

.page-footer {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 0.85rem;
  color: var(--black);
}

.page-footer span {
  color: #e31b23;
}

На этом установка завершена.

Демонстрация
Прикрепления: 3538851.png(24.1 Kb) · feedback.zip(4.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать выдвижную форму с помощью CSS (Анимация с выдвижной формой при помощи чистого CSS)
  • Страница 1 из 1
  • 1
Поиск: