آموزش ساخت Login Form
سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی در خدمت شما هستیم با آموزش ساخت Login Form(ساخت فرم ورود،فرم لاگین)
پس در ادامه این آموزش همراه باشید
با آموزش ساخت Login Form در خدمت شما هستیم
ابتدا یک فایل با نام index.html میسازیم و کد های زیر را داخلش قرار میدیم
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>نت کپی - مرجع دانلود قالب و اسکریپت فارسی</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-box"> <h2>ورود</h2> <form> <div class="user-box"> <input type="text"> <label>نام کاربری</label> </div> <div class="user-box"> <input type="password"> <label>رمز عبور</label> </div> <a href="#"> <span></span> <span></span> <span></span> <span></span> ورود </a> </form> </div> </body> </html>
سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم
@font-face { font-family: "Vazir"; src: url(Vazir.ttf); } body { margin: 0; padding: 0; font-family: "Vazir"; background: linear-gradient(#141e30, #243b55); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-box { width: 400px; padding: 40px; background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .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; } .login-box .user-box label { position: absolute; top: 0; right: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .user-box input:focus ~ label, .login-box .user-box input:active ~ label { top: -20px; right: 0; color: #03e9f4; font-size: 12px; } .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px; } .login-box a:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } .login-box a span { position: absolute; display: block; } .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-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: btn-anim2 1s linear infinite; animation-delay: .25s; } @keyframes btn-anim2 { 0%{ top: -100%; } 50%,100% { top: 100%; } } .login-box a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: btn-anim3 1s linear infinite; animation-delay: .5s; } @keyframes btn-anim3 { 0% { right: -100%; } 50%,100% { right: 100%; } } .login-box a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: btn-anim4 1s linear infinite; animation-delay: .75s; } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }
به همین سادگی ما تونستیم یک Login Form زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂
نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.
با تشکر:)
نت کپی- مرجع دانلود قالب و اسکریپت فارسی
شما میتونید سورس این پروژه رو به صورت رایگان دانلود کنید
آموزش ویدئویی ساخت Login Form