آموزش طراحی فرم ورود زیبا با افکت شیشه‌ای در HTML و CSS | قدم به قدم و پروژه‌محور
در این مقاله، به شما یاد می‌دهیم چگونه یک فرم ورود زیبا و مدرن با افکت شیشه‌ای طراحی کنید. این فرم ورود کاملاً واکنشگرا است و از تکنیک‌های پیشرفته CSS مانند backdrop-filter برای ایجاد افکت شیشه‌ای استفاده می‌کند. همچنین، از آیکون‌های زیبا و انیمیشن‌های جذاب نیز بهره برده‌ایم.
طراحی فرم ورود زیبا با افکت شیشه‌ای در HTML و CSS
این آموزش یک از جلسات آموزش تکنیک های css
مراحل طراحی فرم ورود
۱. ساختار HTML
کد HTML زیر ساختار اصلی فرم ورود را ایجاد می‌کند. این کد شامل فیلدهای ورودی برای نام کاربری و رمز عبور، دکمه ورود، و لینک‌های “فراموشی رمز عبور” و “ثبت نام” است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>فرم ورود زیبا | پاسخ وردپرس</title> <link rel="stylesheet" href="style.css" /> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" /> </head> <body> <div class="wrapper"> <form action=""> <h1>ورود</h1> <div class="input-box"> <input type="text" placeholder="نام کاربری " required /> <i class="bx bxs-user"></i> </div> <div class="input-box"> <input type="text" placeholder="رمز عبور شما " required /> <i class="bx bxs-lock-open-alt"></i> </div> <div class="remember"> <label> <input type="checkbox" /> مرا به خاطر بسپار </label> <a href="#">رمز عبور خود را فراموش کردید ؟</a> </div> <button type="submit" class="btn">ورود</button> <div class="register-link"> <p>حساب کاربری دارید ؟ <a href="#">ثبت نام کنید</a></p> </div> </form> </div> </body> </html> |
۲. استایل‌دهی با CSS
کد CSS زیر ظاهر زیبا و افکت شیشه‌ای را به فرم ورود اضافه می‌کند. از backdrop-filter برای ایجاد افکت شیشه‌ای و از Flexbox برای چیدمان عناصر استفاده شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
@font-face { font-family: "iran-s"; src: url("fonts/IRANSansWeb.woff") format("woff"), url("fonts/IRANSansWeb.ttf") format("truetype"); } { margin: ; padding: ; box-sizing: border-box; font-family: "iran-s"; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url("img.jpg") no-repeat center center/cover; position: relative; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(, , , 0.5); z-index: -1; } .wrapper { width: 420px; background: rgba(255, 255, 255, 0.1); border: rgba(255, 255, 255, 0.3); backdrop-filter: blur(15px); box-shadow: 4px 15px rgba(, , , 0.2); color: #fff; border-radius: 10px; padding: 30px 40px; } .wrapper h1 { font-size: 36px; text-align: center; } .input-box { position: relative; width: 100%; height: 50px; margin: 30px ; } .input-box input { width: 100%; height: 100%; background: transparent; outline: none; border: 2px solid #fff; border-radius: 40px; font-size: 16px; color: #fff; padding: 20px 45px 20px 20px; } .input-box input::placeholder { color: #fff; } .input-box i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; } .remember { display: flex; justify-content: space-between; font-size: 14.4px; margin: -15px 15px; } .remember input { accent-color: #fff; margin-right: 3px; } .remember a { color: #fff; text-decoration: none; } .remember a:hover { text-decoration: underline; } .wrapper .btn { width: 100%; height: 45px; background: linear-gradient(135deg, #ff7b00, #ff4b2b); border: none; outline: none; border-radius: 40px; box-shadow: 10px rgba(255, 77, , 0.5); cursor: pointer; font-size: 16px; font-weight: 600; color: #fff; transition: all 0.3s ease; } .wrapper .btn:hover { background: linear-gradient(135deg, #ff4b2b, #ff7b00); box-shadow: 15px rgba(255, 77, , 0.8); } .register-link { font-size: 15px; text-align: center; margin: 20px 15px; } .register-link p a { color: #fff; text-decoration: none; font-weight: 600; } .register-link p a:hover { text-decoration: underline; } |
توضیحات کدها
- افکت شیشه‌ای:
ازbackdrop-filter: blur(15px);برای ایجاد افکت شیشه‌ای استفاده شده است. این ویژگی پس‌زمینه را محو می‌کند و ظاهری شیشه‌ای به فرم می‌دهد. - واکنش‌گرایی:
فرم ورود با استفاده ازdisplay: flex;وjustify-content: center;در وسط صفحه قرار می‌گیرد و برای دستگاه‌های مختلف به خوبی نمایش داده می‌شود. - انیمیشن‌ها:
دکمه ورود با استفاده ازtransitionوbox-shadowدارای انیمیشن‌های جذاب است که هنگام hover تغییر رنگ می‌دهد.
نتیجه‌گیری
با استفاده از این کدها، شما می‌توانید یک فرم ورود زیبا و مدرن با افکت شیشه‌ای طراحی کنید. این فرم ورود کاملاً واکنشگرا است و برای هر نوع وب‌سایتی مناسب می‌باشد.
اگر سوالی داشتید یا نیاز به راهنمایی بیشتر بود، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید. 😊
هیچ دیدگاهی برای این محصول نوشته نشده است.