Создание адаптивной формы входа с помощью HTML и CSS


Что мы придумаем? 💚

Форма входа - dev.to/koustav

Адаптивная форма входа — dev.to/koustav


Давайте создадим🎯🔥


Структура тела

dev.to/koustav - Форма входа



HTML

<form>

    <h2>Login Here</h2>

    <label for="username">Username</label>
    <input type="text" placeholder="Enter your User " id="username">
    <label for="password">Password</label>
    <input type="password" placeholder="Enter a 8+ character password" id="password">

    <button>Log In</button>

    <div class="sociallogin">
      <div class="go"><b class="fab fa-google"></b> Google</div>
      <div class="fb"><b class="fab fa-facebook"></b> Facebook</div>
    </div>

  </form>
Войти в полноэкранный режим

Выйти из полноэкранного режима

📢 Кончик💡
Если вы хотите поставить отметку *, чтобы показать обязательное

Форма входа dev.to/koustav
использовать —

<sup>*</sup>
Войти в полноэкранный режим

Выйти из полноэкранного режима



CSS

Некоторые фиксированные значения.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Укладка тела….🔥

body {
    background-image: url("
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Nunito', sans-serif;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

📢 Кончик 💡

Чтобы форма выглядела круто💚 используйте-

::selection {
    color: #003300;
    background-color: #e6ffe6;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

Кстати, я рассмотрел это ::selection в День 2. Если вы еще не читали… посмотрите…!

Стилизуем форму..

form {
    height: 520px;
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
  }

  form * {
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

  1. transform: translate(-50%, -50%); используется для приведения формы в центр
  2. blur используется для создания эффекта матового стекла поверх фонового изображения.

Давайте стиль Войти здесь

form h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    font-family: 'Playfair Display', serif;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь приходит label

label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

В настоящее время input💚

input {
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

🎯 Кончик 💡

Использовать :focus за крутой вид…

input:focus {
    border-style: solid;
    border-color: rgb(0, 179, 0);
    border-width: 1px;
    box-shadow: 0 4px 8px 0 rgb(0, 179, 0, 0.3),
      0 6px 20px 0 rgb(0, 179, 0, 0.2);
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

placeholder

::placeholder {
   color: #e5e5e5;
 }
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вот Авторизоваться кнопка

button {
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

Стилизация социальных иконок — Google & Фейсбук

.social {
    margin-top: 30px;
    display: flex;
  }
.social .fb{
  margin-left: 25px;
}
.social b{
  margin-right: 4px;
}
.social div {
   background: red;
   width: 150px;
   border-radius: 3px;
   padding: 5px 10px 10px 5px;
   background-color: rgba(255, 255, 255, 0.27);
   color: #eaf0fb;
   text-align: center;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

🎯 Кончик 💡

Чтобы придать классный вид, давайте использовать-

  1. :hover — при наведении мыши на
  2. :active — когда div нажимается
. button div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.button div:active {
    background-color: rgba(255, 255, 255, 0.60)
.social div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.social div:active {
    background-color: rgba(255, 255, 255, 0.60)
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима


ПОЗДРАВЛЯЕМ✨ МЫ СДЕЛАЛИ


Отзывчивая форма входа


Теперь твоя очередь 🎯


🎯 Задача дня🔥
1.
Задание формы входа — dev.to/koustav

Попробуй это


Форма регистрации

2.
Форма регистрации - dev.to/koustav


Кредиты
КартинкиСкрыть
ШрифтыГугл шрифты


Посмотрите всю серию!
Поделись💚 с кем-то, кто может извлечь из этого пользу
❤️ Удачного кодирования!
Следите за новостями!