• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Появляющаяся форма входа для сайта в CSS (Появляющаяся форма при нажатии на кнопку на HTML И CSS)
Появляющаяся форма входа для сайта в CSS
Kosten
Дата: Пятница, 2018-12-28, 23:31 | Сообщение 1
Администраторы
Сообщений:23402
Награды: 56


Бывают очень разные как по дизайн форма входа, так и по стилистике эффекта, но основном мы видим стандартные, где по клику переходим на страницу или появляется модальное окно и в нем находится сама форма с кнопками перехода. Здесь немного по другому сделано, в плане появление, так как вы переходите на эту форму.

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



HTML

Код
<div class="kingepromis miseag">
<input type="text" name="email" id="email" placeholder="Email" pattern=""/>
  <input type="password" name="password" id="password" placeholder="Password" />
  <input type="button" value="Помогите!" />
  <input type="submit" value="Авторизоваться" />
</div>


CSS

Код
.miseag {
  margin: 0 auto;
}
.kingepromis {
  width: 300px;
  margin-top: 40vh;
}
.kingepromis input[type=text],
.kingepromis input[type=password] {
  opacity: 1;
  display: block;
  border: none;
  outline: none;
  width: 280px;
  padding: 10px;
  margin: 20px 0 0 0;
  border-radius: 2px;
}
.kingepromis input[type=text] {
  animation: bounce 1s;
  -webkit-appearance: none;
}
.kingepromis input[type=text]:focus:valid {
  box-shadow: 0 0 0 10000px #2ecc71;
}
.kingepromis input[type=text]:focus:valid ~ input[type=button] {
  background: #27ae60;
  color: #2ecc71;
}
.kingepromis input[type=text]:focus:valid ~ input[type=submit] {
  color: #2ecc71;
}
.kingepromis input[type=text]:invalid {
  box-shadow: 0 0 0 10000px #e74c3c;
}
.kingepromis input[type=text]:invalid ~ input[type=button] {
  background: #c0392b;
  color: #e74c3c;
}
.kingepromis input[type=text]:invalid ~ input[type=submit] {
  color: #e74c3c;
}
.kingepromis input[type=password] {
  animation: bounce1 1.3s;
}
.kingepromis input[type=submit],
.kingepromis input[type=button] {
  border: 0;
  outline: 0;
  padding: 13px 18px;
  margin: 40px 0 0 0;
  border-radius: 2px;
  font-weight: 600;
  animation: bounce2 1.6s;
}
.kingepromis input[type=submit] {
  float: right;
  background: #fff;  
  color: #34495e;
  outline: none;
}
.kingepromis input[type=button] {
  background: #2C3E50;
  color: #34495e;
}
@keyframes bounce {
  0% { transform: translateY(-250px); opacity: 0; }
}
@keyframes bounce1 {
  0% {  opacity: 0; }
  40% { transform: translateY(-100px); opacity: 0;}
}
@keyframes bounce2 {
  0% {  opacity: 0; }
  70% { transform: translateY(-20px); opacity: 0;}
}


Переходим и смотрим, как все выглядит.

Демонстрация
Прикрепления: 5534198.png(9.3 Kb) · selectors.zip(2.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Появляющаяся форма входа для сайта в CSS (Появляющаяся форма при нажатии на кнопку на HTML И CSS)
  • Страница 1 из 1
  • 1
Поиск: