تمرین طراحی فرم لاگین در html

در این پست میخواهیم تمرین طراحی فرم لاگین در html را پیاده سازی کنیم .

دمو ویدیویی

سوال : فرم لاگینی طراحی کنید که در قسمت دکمه ورود آن از انیمیشن های css استفاده شده باشد .

فرم لاگین خروجی مانند تصویر زیر میباشد .

در ادامه مهم ترین کد های تمرین را توضیح میدهیم .

تغییر رنگ پس زمینه

با استفاده از خصوصیت background میتوانیم پس زمینه صفحه را به حالت هایی مانند تصویر ، gradient و رنگ تکی تغییر دهیم .

در اینجا از gradient از نوع linear برای رنگ پس زمینه استفاده کرده ایم .

background: linear-gradient(#141e30, #243b55);

کد باکس لاگین

برای ایجاد کادر لاگین از width با مقدار 400px استفاده کردیم و با استفاده از خصوصیت position  آن را نسبت به بالای صفحه جا به جا کردیم .

خصوصیت border-radius برای گرد کردن گوشه های کادر استفاده شده است .

تمرین طراحی فرم لاگین و ثبت نام در html با یک طراحی دیگر را مشاهده نمایید .

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}

کد انیمیشن دکمه لاگین

برای اینکه انیمیشن مانند ویدیو زیر برای دکمه در نظر بگیریم از 4 تگ span استفاده کردیم .

که هر کدام animation و keyframes خاص خود را دارند که با خصوصیت های left , top , right , bottom تنظیم میشوند .

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.login-box a span:nth-last-child(3) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.login-box a span:nth-last-child(2) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.login-box a span:nth-last-child(1) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }

کادر های ورودی

input هایی مانند نام کاربری و گذرواژه با مقداردهی border: none کادر های خود را از دست میدهند .

با مقدار border-bottom: 1px solid #fff فقط کادر پایین خط دار میشود .

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

نکته : سورس کد کامل این تمرین را پس از ثبت نام در وب سایت میتوانید از همین صفحه دانلود نمایید .

دیگر تمرینات html-css