آموزش گام به گام ساخت فرم ورود با افکت قطره آب با HTML و CSS – پروژه عملی

0 دیدگاه 31 آموزش html, آموزش HTML5 و CSS3, آموزش تکنیک های css

در ادامه یک مقاله آموزشی جامع و گام به گام برای طراحی فرم ورود با افکت قطره آب به همراه توضیحات جداگانه برای هر بخش ارائه شده است. این مقاله به زبان ساده و روان نوشته شده تا حتی افراد تازه‌کار نیز بتوانند به راحتی مراحل را دنبال کنند. همچنین می‌توانید آموزش ویدیویی کامل این پروژه را در کانال یوتیوب ما مشاهده کنید و سورس کد کامل همراه با تصاویر و فونت‌ها را از این مقاله آموزشی دانلود نمایید.

مقدمه

فهرست موضوعات در این آموزش

سلام دوستان عزیز!
من زمان الله ابراهیمی هستم و از حضورتون در این آموزش خوشحال می‌شم. امروز قصد دارم با شما یک فرم ورود زیبا با افکت قطره آب طراحی کنیم که فقط با استفاده از HTML و CSS ساخته شده است. در این آموزش، هر بخش به صورت جداگانه و گام به گام توضیح داده می‌شود تا شما بتوانید به راحتی مفاهیم را درک کنید و آن‌ها را در پروژه‌های خود به کار ببرید.
همیشه باور دارم که یادگیری از طریق قدم به قدم پیش رفتن، کلید موفقیت در طراحی وب است؛ پس با هم شروع می‌کنیم!

مرحله ۱: ساختار کلی HTML فرم ورود

گام ۱.۱: ایجاد سند HTML استاندارد

ابتدا یک فایل HTML ایجاد می‌کنیم. در این فایل، اطلاعات پایه مانند زبان، کدگذاری و تنظیمات viewport قرار دارد تا مطمئن شویم صفحه در تمامی دستگاه‌ها به درستی نمایش داده می‌شود.

<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>فرم ورود با افکت قطره آب</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- ادامه کد در مراحل بعدی قرار می‌گیرد -->
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

توضیح:

lang=”fa” و dir (در اینجا در صورت نیاز) به تنظیم زبان و جهت متن کمک می‌کنند.
متا تگ‌ها برای اطمینان از نمایش صحیح کاراکترها و واکنشگرایی صفحه بسیار حیاتی هستند.
لینک‌دهی به فایل CSS نیز در همین قسمت انجام می‌شود.

گام ۱.۲: ایجاد ساختار فرم ورود

در این مرحله، عناصر اصلی فرم ورود را تعریف می‌کنیم. این ساختار شامل لینک‌های فراموشی رمز عبور و ثبت نام، همراه با بخش اصلی فرم ورود می‌شود.

<div class="container">
  <!-- لینک فراموشی رمز عبور -->
  <a href="#" class="btn">فراموشی رمز عبور</a>
  <!-- لینک ثبت نام -->
  <a href="#" class="btn signup">ثبت نام</a>
  <!-- بخش اصلی فرم ورود -->
  <div class="drop">
    <div class="content">
      <h2>ورود</h2>
      <form>
        <div class="input">
          <input type="text" placeholder="نام کاربری" />
        </div>
        <div class="input">
          <input type="password" placeholder="رمز عبور" />
        </div>
        <div class="input">
          <input type="submit" value="ورود" />
        </div>
      </form>
    </div>
  </div>
</div>

<a href="#" class="btn">فراموشی رمز عبور</a>

<form>

</div>

</div>

</div>

</form>

</div>

توضیح:

container: تمامی عناصر فرم ورود درون یک کانتینر قرار دارند تا ساختار کلی صفحه مرتب شود.
btn: لینک‌های فراموشی رمز عبور و ثبت نام به صورت دکمه طراحی شده‌اند.
drop: این بخش دارای افکت‌های بصری ویژه است و تمام محتویات فرم ورود در آن قرار گرفته است.
content: شامل عنوان فرم (ورود) و فرم اصلی با فیلدهای نام کاربری و رمز عبور است.

آموزش تگ article در HTML

یک آموزش جذاب دیگه!

مرحله ۲: استایل‌دهی CSS فرم ورود

در این مرحله به بررسی کامل کد CSS مربوط به فرم ورود می‌پردازیم. هر بخش از استایل‌دهی به صورت جداگانه توضیح داده می‌شود.

گام ۲.۱: تنظیمات کلی CSS و ریست استایل‌ها

/* ریست کلی استایل‌ها برای همه عناصر */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* تنظیمات پایه بدنه */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #eff0f4;
}

/* ریست کلی استایل‌ها برای همه عناصر */

* {

margin: ;

padding: ;

box-sizing: border-box;

}

/* تنظیمات پایه بدنه */

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #eff0f4;

}

توضیح:

این بخش تمامی استایل‌های پیش‌فرض مرورگر را ریست می‌کند تا از بروز ناسازگاری‌ها جلوگیری شود.
بدنه صفحه به گونه‌ای تنظیم شده که محتوا در وسط صفحه نمایش داده شود.

گام ۲.۲: استایل کانتینر و موقعیت‌دهی فرم

.container {
  position: relative;
  left: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {

position: relative;

left: -80px;

display: flex;

justify-content: center;

align-items: center;

}

توضیح:

موقعیت‌دهی کانتینر به صورت نسبی باعث می‌شود که فرم در موقعیت مناسبی قرار گیرد.
تنظیمات flexbox به چینش منظم عناصر کمک می‌کند.

گام ۲.۳: استایل بخش اصلی فرم (قسمت .drop)

.drop {
  position: relative;
  width: 350px;
  height: 350px;
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  /* استفاده از border-radius پیچیده برای افکت قطره آب */
  border-radius: 62% 38% 24% 76% / 59% 60% 40% 41%;
  /* استفاده از box-shadow ترکیبی برای ایجاد عمق و افکت بصری */
  box-shadow: 
    inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05),
    25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
}

.drop {

position: relative;

width: 350px;

height: 350px;

transition: 0.5s;

display: flex;

align-items: center;

justify-content: center;

/* استفاده از border-radius پیچیده برای افکت قطره آب */

border-radius: 62% 38% 24% 76% / 59% 60% 40% 41%;

/* استفاده از box-shadow ترکیبی برای ایجاد عمق و افکت بصری */

box-shadow:

inset 20px 20px 20px rgba(, , , 0.05),

25px 35px 20px rgba(, , , 0.05),

25px 30px 30px rgba(, , , 0.05),

inset -20px -20px 25px rgba(255, 255, 255, 0.9);

}

توضیح:

border-radius: با استفاده از مقادیر درصدی افقی و عمودی، شکل منحصر به فرد و هنری ایجاد می‌شود.
box-shadow: ترکیب سایه‌های داخلی و خارجی باعث ایجاد عمق و جلوه‌ی سه‌بعدی در فرم می‌شود.
transition: باعث می‌شود که تغییرات (مانند hover) به صورت نرم انیمیت شوند.

گام ۲.۴: افکت hover برای بخش .drop

.container .drop:hover {
  border-radius: 50%;
}

.container .drop:hover {

border-radius: 50%;

}

توضیح:

هنگام قرار گرفتن ماوس روی فرم، شکل به یک دایره کامل تغییر می‌کند که یک افکت جذاب و دینامیک ایجاد می‌کند.

گام ۲.۵: افکت‌های تزئینی داخل .drop

.container .drop::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 85px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.container .drop::after {
  content: "";
  position: absolute;
  top: 85px;
  left: 110px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.container .drop::before {

content: "";

position: absolute;

top: 50px;

left: 85px;

width: 35px;

height: 35px;

border-radius: 50%;

background: #fff;

opacity: 0.9;

}

.container .drop::after {

content: "";

position: absolute;

top: 85px;

left: 110px;

width: 15px;

height: 15px;

border-radius: 50%;

background: #fff;

opacity: 0.9;

}

توضیح:

این افکت‌ها المان‌های تزئینی کوچکی هستند که به ایجاد حس قطره آب کمک می‌کنند و زیبایی طراحی را افزایش می‌دهند.

آموزش طراحی باکس تبلیغات 125*125

یک آموزش جذاب دیگه!

گام ۲.۶: استایل محتوا و عنوان فرم

.drop .content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  gap: 15px;
}

.content h2 {
  color: #3240e1;
  font-size: 1.5em;
}

.drop .content {

position: relative;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 40px;

gap: 15px;

}

.content h2 {

color: #3240e1;

font-size: 1.5em;

}

توضیح:

تنظیمات محتوا درون فرم به گونه‌ای است که تمام المان‌ها به صورت ستونی و مرکز چین شده نمایش داده شوند.
عنوان فرم (h2) با رنگ آبی جذاب و اندازه مناسب نمایش داده می‌شود.

گام ۲.۷: استایل فرم ورود

.content form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.content form {

display: flex;

flex-direction: column;

gap: 20px;

justify-content: center;

align-items: center;

}

توضیح:

فرم ورود به صورت ستونی با فاصله مناسب بین فیلدها نمایش داده می‌شود تا خوانایی و کاربری آن بهبود یابد.

گام ۲.۸: استایل فیلدهای ورودی

.container .drop .content form .input {
  position: relative;
  width: 225px;
  /* استفاده از سایه‌ها برای ایجاد عمق در ورودی */
  box-shadow: 
    inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
  border-radius: 25px;
}

.container .drop .content form .input::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px 15px;
}

.container .drop .content form .input input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 1em;
  padding: 10px 15px;
}

.container .drop .content form .input {

position: relative;

width: 225px;

/* استفاده از سایه‌ها برای ایجاد عمق در ورودی */

box-shadow:

inset 2px 5px 10px rgba(, , , 0.1),

inset -2px -5px 10px rgba(255, 255, 255, 1),

15px 15px 10px rgba(, , , 0.05),

15px 10px 15px rgba(, , , 0.025);

border-radius: 25px;

}

.container .drop .content form .input::before {

content: '';

position: absolute;

top: 8px;

left: 50%;

transform: translateX(-50%);

width: 65%;

height: 5px;

background: rgba(255, 255, 255, 0.5);

border-radius: 10px 15px;

}

.container .drop .content form .input input {

border: none;

outline: none;

background: transparent;

width: 100%;

font-size: 1em;

padding: 10px 15px;

}

توضیح:

فیلدهای ورودی با سایه‌های داخلی و خارجی به گونه‌ای طراحی شده‌اند که حس عمق و برجستگی را ایجاد کنند.
نوار کوچک (پسیودو المنت) به عنوان یک افکت تزئینی داخل ورودی قرار داده شده است.
استفاده از border-radius باعث گرد شدن گوشه‌ها و ایجاد ظاهری نرم می‌شود.

گام ۲.۹: استایل دکمه ارسال فرم (ورود)

.container .drop .content form .input input[type="submit"] {
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.container .drop .content form .input input[type="submit"] {

color: #fff;

text-transform: uppercase;

font-size: 1em;

cursor: pointer;

letter-spacing: 0.1em;

font-weight: 600;

}

توضیح:

دکمه ارسال فرم با رنگ سفید و حروف بزرگ نمایش داده می‌شود.
افکت‌های تعاملی مانند تغییر رنگ و انیمیشن می‌توانند در این قسمت اضافه شوند.

گام ۲.۱۰: افکت تغییر اندازه دکمه ارسال هنگام hover

.container .drop .content form .input:last-child {
  width: 120px;
  background: #3a86ff;
  box-shadow: 
    inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
  transition: 0.5s;
}

.container .drop .content form .input:last-child:hover {
  width: 150px;
}

.container .drop .content form .input:last-child {

width: 120px;

background: #3a86ff;

box-shadow:

inset 2px 5px 10px rgba(, , , 0.1),

15px 15px 10px rgba(, , , 0.05),

15px 10px 15px rgba(, , , 0.025);

transition: 0.5s;

}

.container .drop .content form .input:last-child:hover {

width: 150px;

}

توضیح:

این بخش باعث می‌شود که دکمه ارسال فرم هنگام hover به تدریج بزرگ شود و افکت جذابی ایجاد کند.

گام ۲.۱۱: استایل دکمه‌های خارجی (لینک‌های فراموشی رمز عبور و ثبت نام)

.btn {
  position: absolute;
  right: -120px;
  bottom: 0;
  width: 120px;
  height: 120px;
  background: #00b4d8;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  line-height: 2.2em;
  letter-spacing: 0.01em;
  font-size: 0.8em;
  transition: 0.25s;
  text-align: center;
  /* استفاده از سایه‌های ترکیبی برای دکمه */
  box-shadow: 
    inset 10px 10px 10px rgba(0, 180, 216, 0.05),
    15px 25px 10px rgba(0, 180, 216, 0.1),
    15px 20px 20px rgba(0, 180, 216, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
  /* تنظیم border-radius غیرمتقارن برای دکمه */
  border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://replywp.com/learn-html-and-css-free-height-and-width-part-14/" target="_blank" rel="nofollow" class="IRPP_button"><!-- INLINE RELATED POSTS 3/3 //--><style> .IRPP_button , .IRPP_button .postImageUrl , .IRPP_button .centered-text-area { min-height: 86px; position: relative; } .IRPP_button , .IRPP_button:hover , .IRPP_button:visited , .IRPP_button:active { border:0!important; } .IRPP_button { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #3498DB; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_button:active , .IRPP_button:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_button .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 30%; } .IRPP_button .centered-text-area { float: left; width: 70%; padding:0; margin:0; } .IRPP_button .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_button .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 80%;display: inline-block;float: right; } .IRPP_button .ctaButton { background: #2980B9; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; margin: 18px 14px 18px 14px; moz-border-radius: 3px; padding: 12px 0; text-align: center; text-decoration: none; text-shadow: none; webkit-border-radius: 3px; position: absolute;float: left;padding: 5px 3%;width: auto;left: 0;top: 8px; } .IRPP_button:hover .ctaButton { background: #3498DB; } .IRPP_button .centered-text { display: table; height: 86px; padding:0; margin:0; padding-left: 0px!important; top: 0;width: 100%; } .IRPP_button .IRPP_button-content { display: table-cell; margin: 0; padding: 0; padding-right: 10px; position: relative; vertical-align: middle; width: 100%; } .IRPP_button:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text"><div class="IRPP_button-content"><div class="postTitle">آموزش height and width در css</div><div class="ctaButton">یک آموزش جذاب دیگه!</div></div></div></div><div data-bg="https://replywp.com/wp-content/uploads/2018/05/طول-و-عرض-در-css.jpg" class="postImageUrl rocket-lazyload" style=""></div></a></div>
/* افکت دکمه: اضافه کردن جزئیات کوچک */
.btn::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.45;
}

.btn {

position: absolute;

right: -120px;

bottom: ;

width: 120px;

height: 120px;

background: #00b4d8;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

text-decoration: none;

color: #fff;

line-height: 2.2em;

letter-spacing: 0.01em;

font-size: 0.8em;

transition: 0.25s;

text-align: center;

/* استفاده از سایه‌های ترکیبی برای دکمه */

box-shadow:

inset 10px 10px 10px rgba(, 180, 216, 0.05),

15px 25px 10px rgba(, 180, 216, 0.1),

15px 20px 20px rgba(, 180, 216, 0.1),

inset -10px -10px 15px rgba(255, 255, 255, 0.5);

/* تنظیم border-radius غیرمتقارن برای دکمه */

border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;

}

/* افکت دکمه: اضافه کردن جزئیات کوچک */

.btn::before {

content: '';

position: absolute;

top: 15px;

left: 30px;

width: 20px;

height: 20px;

border-radius: 50%;

background: #fff;

opacity: 0.45;

}

توضیح:

دکمه‌های خارجی با استفاده از box-shadow و border-radius منحصر به فرد طراحی شده‌اند.
افکت hover و انیمیشن‌های کوچک در این بخش باعث جذابیت بیشتر دکمه می‌شوند.

گام ۲.۱۲: استایل دکمه ثبت نام

.btn.signup {
  bottom: 150px;
  right: -140px;
  width: 80px;
  height: 80px;
  border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;
  background: #f77f01;
  box-shadow: 
    inset 10px 10px 10px rgba(247, 127, 0, 0.05),
    15px 25px 10px rgba(247, 127, 0, 0.1),
    15px 20px 20px rgba(247, 127, 0, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}

.btn.signup::before {
  left: 20px;
  width: 15px;
  height: 15px;
}

.btn.signup {

bottom: 150px;

right: -140px;

width: 80px;

height: 80px;

border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;

background: #f77f01;

box-shadow:

inset 10px 10px 10px rgba(247, 127, , 0.05),

15px 25px 10px rgba(247, 127, , 0.1),

15px 20px 20px rgba(247, 127, , 0.1),

inset -10px -10px 15px rgba(255, 255, 255, 0.5);

}

.btn.signup::before {

left: 20px;

width: 15px;

height: 15px;

}

توضیح:

دکمه ثبت نام با رنگ نارنجی و border-radius متفاوت، به گونه‌ای طراحی شده تا از دکمه اصلی تمایز یابد.
سایه‌های استفاده شده در این دکمه حس ویژه‌ای به آن می‌دهند.

گام ۲.۱۳: افکت تغییر شکل دکمه‌ها هنگام hover

.btn:hover {
  border-radius: 50%;
}

.btn:hover {

border-radius: 50%;

}

توضیح:

وقتی کاربر روی دکمه‌ها قرار می‌گیرد، با تغییر ناگهانی border-radius به ۵۰%، افکت نرمی ایجاد می‌شود که حس تعامل بیشتری به کاربر منتقل می‌کند.

نتیجه‌گیری نهایی

در این آموزش گام به گام، ما به صورت جداگانه هر بخش از سورس کد فرم ورود با افکت قطره آب را بررسی کردیم:

مرحله ۱: ایجاد ساختار HTML شامل عناصر اصلی فرم ورود.
مرحله ۲: استایل‌دهی CSS بخش به بخش شامل تنظیمات کلی، استایل‌دهی بخش فرم (drop)، محتوا و ورودی‌ها، دکمه‌های ارسال و لینک‌های فراموشی رمز عبور و ثبت نام.
بخش‌های تزئینی: استفاده از افکت‌های box-shadow و border-radius برای ایجاد ظاهر جذاب و هنری.

این پروژه عملی نه تنها به شما کمک می‌کند تا مفاهیم #آموزش_HTML و #آموزش_CSS را به صورت عملی فرا بگیرید، بلکه الهام‌بخش طراحی‌های مدرن و واکنشگرا برای پروژه‌های وب شما خواهد بود.
برای مشاهده آموزش ویدیویی جامع این پروژه، حتماً به کانال یوتیوب ما مراجعه کنید. همچنین سورس کد کامل و فایل‌های مربوط به تصاویر و فونت‌ها از این مقاله آموزشی قابل دانلود هستند.

با همراهی این آموزش، شما یک قدم بزرگ به سمت تسلط بر مباحث طراحی فرم‌های ورود و استایل‌دهی با CSS برداشته‌اید. موفق باشید و از یادگیری لذت ببرید!

میانگین رتبه 5/5 تعداد رای : 2

آموزش گام به گام ساخت فرم ورود با افکت قطره آب با HTML و CSS – پروژه عملی

مقدمه

مرحله ۱: ساختار کلی HTML فرم ورود

گام ۱.۱: ایجاد سند HTML استاندارد

گام ۱.۲: ایجاد ساختار فرم ورود

مرحله ۲: استایل‌دهی CSS فرم ورود

گام ۲.۱: تنظیمات کلی CSS و ریست استایل‌ها

گام ۲.۲: استایل کانتینر و موقعیت‌دهی فرم

گام ۲.۳: استایل بخش اصلی فرم (قسمت .drop)

گام ۲.۴: افکت hover برای بخش .drop

گام ۲.۵: افکت‌های تزئینی داخل .drop

گام ۲.۶: استایل محتوا و عنوان فرم

گام ۲.۷: استایل فرم ورود

گام ۲.۸: استایل فیلدهای ورودی

گام ۲.۹: استایل دکمه ارسال فرم (ورود)

گام ۲.۱۰: افکت تغییر اندازه دکمه ارسال هنگام hover

گام ۲.۱۱: استایل دکمه‌های خارجی (لینک‌های فراموشی رمز عبور و ثبت نام)

گام ۲.۱۲: استایل دکمه ثبت نام

گام ۲.۱۳: افکت تغییر شکل دکمه‌ها هنگام hover

نتیجه‌گیری نهایی

مطالب مرتبط

انصراف

نظرات

بهترین دوره آموزش tailwindcss چیست و چه ویژگی هایی دارد؟

آموزش طراحی قالب دیجی کالا با flexbox

آموزش طراحی قالب واکنشگرا Responsive در css

آموزش CSS صفر تا ۱۰۰ رایگان پروژه طراحی قالب ۲۰۲۳

آموزش طراحی قالب وردپرس ❤️ رایگان ۲۰۲۳

دوره ساخت ابزارک widgets حرفه ای در وردپرس

آموزش طراحی قالب فروشگاهی وردپرس

آموزش html از صفر تا ۱۰۰ همراه HTML5

آموزش طراحی قالب وردپرس ❤️طراحی قالب وردپرس ۲۰۲۴

سفارشی سازی صفحه ورود ثبت نام وردپرس

آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش php ساخت CMS پیشرفته

آموزش طراحی سایت HTML5 CSS3 با bootstrap 5

آموزش طراحی UI سایت,طراحی قالب دیجی کالا در فتوشاپ

مقدمه

مرحله ۱: ساختار کلی HTML فرم ورود

گام ۱.۱: ایجاد سند HTML استاندارد

گام ۱.۲: ایجاد ساختار فرم ورود

مرحله ۲: استایل‌دهی CSS فرم ورود

گام ۲.۱: تنظیمات کلی CSS و ریست استایل‌ها

گام ۲.۲: استایل کانتینر و موقعیت‌دهی فرم

گام ۲.۳: استایل بخش اصلی فرم (قسمت .drop)

گام ۲.۴: افکت hover برای بخش .drop

گام ۲.۵: افکت‌های تزئینی داخل .drop

گام ۲.۶: استایل محتوا و عنوان فرم

گام ۲.۷: استایل فرم ورود

گام ۲.۸: استایل فیلدهای ورودی

گام ۲.۹: استایل دکمه ارسال فرم (ورود)

گام ۲.۱۰: افکت تغییر اندازه دکمه ارسال هنگام hover

گام ۲.۱۱: استایل دکمه‌های خارجی (لینک‌های فراموشی رمز عبور و ثبت نام)

گام ۲.۱۲: استایل دکمه ثبت نام

گام ۲.۱۳: افکت تغییر شکل دکمه‌ها هنگام hover

نتیجه‌گیری نهایی

مطالب مرتبط

انصراف

نظرات

بهترین دوره آموزش tailwindcss چیست و چه ویژگی هایی دارد؟

آموزش طراحی قالب دیجی کالا با flexbox

آموزش طراحی قالب واکنشگرا Responsive در css

آموزش CSS صفر تا ۱۰۰ رایگان پروژه طراحی قالب ۲۰۲۳

آموزش طراحی قالب وردپرس ❤️ رایگان ۲۰۲۳

دوره ساخت ابزارک widgets حرفه ای در وردپرس

آموزش طراحی قالب فروشگاهی وردپرس

آموزش html از صفر تا ۱۰۰ همراه HTML5

آموزش طراحی قالب وردپرس ❤️طراحی قالب وردپرس ۲۰۲۴

سفارشی سازی صفحه ورود ثبت نام وردپرس

آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش php ساخت CMS پیشرفته

آموزش طراحی سایت HTML5 CSS3 با bootstrap 5

آموزش طراحی UI سایت,طراحی قالب دیجی کالا در فتوشاپ

ایجاد حساب کاربری