القائمة الرئيسية

الصفحات


Login form with Glowing using html and css3



مرحبًا أيها القارئ، ستتعلم اليوم في هذه المدونة كيفية إنشاء تصميم نموذج تسجيل الدخول باستخدام HTML & Css3 فقط.  لقد شاركت في وقت سابق العديد من المدونات حول كيفية إنشاء تصميم نموذج تسجيل الدخول باستخدام Password Show Hide Toggle Button.  والآن سأقوم بإنشاء نموذج تسجيل دخول مشروط باستخدام HTML & CSS فقط.ولكن هذه المرة سيكون مع وجود Glowing

ضع هذا التنصيص في البداية بامتداد html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login form with Glowing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form">
<h2>Login form</h2>
<form action="">
<div class="inputbox">
<input type="text" placeholder="User name">
</div>
<div class="inputbox">
<input type="password" placeholder="Y password">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</body>
</html>



 نموذج تسيجل الدخول في العديد من المواقع وذلك من اجل ان يكون من السهولة دخول المدير او المستخدمين او الموظفين للوحة التحكم الخاصة بالموقع بسهولة مع انه يمكن ان يكون الموقع فيه نموذج للتسجيل اي عضوية لكل مستخدم او زائر في هذا الدرس سنتعلم انشاء شيء عصري من هذا النموذج


 كما هو الحال دائمًا من قبل ، شارك رموز هذا البرنامج (نموذج تسجيل دخول ولكن مع وجود اناره).  دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج.  في البداية ، في ملف HTML ، أنشأت <div> باسم الفئة "حاوية" وداخل هذه العلامة ، أنشأت <form>.  داخل <form> ، أنشأت علامتي <input> واحدة للبريد الإلكتروني وأخرى لكلمة المرور.  وبالمثل ، أنشأت  وبعض علامات <div> و <a> anchor.  في علامة التسمية ، أضع نص البريد الإلكتروني وكلمة المرور ، ويتم إنشاء علامات   ، داخل نفس علامة <form> ، أنشأت <div> أخرى باسم الفئة ووضعت علامتين داخلها وانشأت فقط Input ليكون خاص بالضغط بشكل مباشر بنوع submit).
في ملف CSS ، قمت أولاً بوضع جميع العناصر في المركز وتعيين خلفية متدرجة.  ثم قمت بإنشاء حاوية باللون الاسود الشكل ذات عرض ارتفاع معين.  بعد ذلك ، قمت بالتصميم لمدخلات مثل أنا أعطيت ارتفاع العرض ، الحشو الهامش ، وما إلى ذلك. وبالمثل ، فعلت التصميم لنسي رابط كلمة المرور كما هو الحال عند التمرير أعطت زخرفة النص: التسطير.  ثم قمت بإنشاء زر لون خلفية وكذلك وضع خلفية بظلال يكون متحرك وكذلك لضمان عمل تحريك متلاشي يمكن ان يظهر بشكل جذاب للاخرين بوضع انميشن

ضع هذا التنصينص بامتداد css

body{
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
font-family: sans-serif;
display: flex;
}
.container{
position: relative;
width: 500px;
min-height: 300px;
background: linear-gradient(0deg,#000,#626262);
box-shadow: 1px 5px 15px rgba(0, 0, 0, 1);
}
.container:before,
.container:after{
content: "";
position: absolute;
top:-5px;
left:-5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
background: linear-gradient(45deg,#fa7,#f3da75,#00ffd5,#ff0000,#fae,#f3da75,#00ffd5,#ffddee,#ff0000);
background-size: 400%;
z-index: -1;
animation:animate 20s linear infinite;
}
@keyframes animate{
0%{
background-position: 0 0;
}
50%{
background-position: 300% 0;
}
100%{
background-position: 0 0;
}
}
.container:after{
filter: blur(20px);
}
.form{
position: absolute;
width: 100%;
height: 100%;
padding: 40px;
box-sizing: border-box;
z-index: 1;
}
.form h2{
margin:0;
padding: 0;
color:#fff;
font-size: 30px;
}
.form .inputbox{
width: 100%;
margin-top: 20px;
}
.form .inputbox input{
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid #fff;
font-size: 18px;
outline: none;
color:#fff;
padding:5px 0;
font-family: sans-serif;
}
::placeholder{
color:#eee;
}
.form .inputbox input[type="submit"]{
background: #fff;
color:#000;
padding:2px;
padding-bottom:5px;
border:none;
font-weight:800;
max-width: 180px;
font-size: 32px;
border-radius: 100px;
margin-left: 115px;
cursor: pointer;
}

بعد ذلك كما تلاحظ وضع الحاوية في شيئين هما القبل والبعد before and after وذلك من اجل ان يكون التعامل معه بالالوان والانميشن بشكل ميسر لنا واستخدمناه بعرض وارتفاع clac ايضا ووضعنا الخلفية بعدة الوان ليعطي جاذبيه مع ذللك تحديد الحجم الخاص فيه ووضع الطبقة -1 ثم اننا وضعنا للحاوية بعد after ان يكون فلتر filter blur 20px ثم تدرجنا بالعمل بوضع لform ايضا عرض وارتفاع وما الى ذلك وتحديد حجم الخط

وبعد ذلك في الاخير قمنا بوضع الانبوت الخاص بالزر باللون الابيض مع بوردر راديوس ان يكون بحجم 100px وبشكل جميل
يمكنك تطوير ذلك ايضا بوضع اكثر من هذا ان تضع نص البريد الإلكتروني وكلمة المرور ، ويتم إنشاء علامات <a> لرابط كلمة المرور المنسية ورابط الاشتراك.  أخيرًا ، داخل نفس علامة <form> ، أنشأت <div> أخرى باسم الفئة ووضعت علامتين داخلها (<div> و <button>).

الان كل شيء جاهز للعمل يمكنك التحميل للاطلاع على الكود في حال واجهت اي مشاكل في كتابة الكود
تحياتنا فريق سومر للحلول البرمجية

الان جاهز للعرض 

هل اعجبك الموضوع :

تعليقات