🎨 تصميم صفحة تسجيل دخول للمواقع بطريقة احترافية (Login Page UI)

إذا كنت تبحث عن تصميم صفحة تسجيل دخول احترافية تضيف لمسة عصرية لموقعك أو مشروعك، فأنت في المكان الصحيح.
في هذا الموضوع نقدم لك نموذج Login UI متوهج ومتحرك باستخدام HTML وCSS فقط، بدون أي JavaScript، بتصميم جذاب مستوحى من واجهات التطبيقات الحديثة مثل Netflix والأنظمة المستقبلية (Futuristic UI).

الصورة المرفقة توضح الشكل النهائي للتصميم، والذي يعتمد على:

خلفية داكنة أنيقة
إطار متوهج متحرك
انتقال سلس من زر تسجيل دخول إلى نموذج كامل
أزرار وحقول إدخال بتأثيرات احترافية

✨ مميزات تصميم صفحة تسجيل الدخول

هذا النموذج يتميز بعدة نقاط تجعله مناسبًا لأي موقع حديث:

✔ تصميم عصري ومتوهج (Neon UI)
✔ متجاوب مع جميع الشاشات (كمبيوتر – موبايل – تابلت)
✔ بدون JavaScript – يعتمد فقط على HTML وCSS
✔ تأثيرات Hover وانتقالات سلسة
✔ واجهة مستخدم أنيقة وسهلة الاستخدام
✔ قابل للتعديل والدمج مع أي قالب

🧩 فكرة التصميم

التصميم يعتمد على مرحلتين بصريتين:

1️⃣ زر تسجيل دخول صغير بتأثير توهج
2️⃣ عند التفاعل، يظهر نموذج تسجيل الدخول الكامل بسلاسة

النموذج يحتوي على:

حقل اسم المستخدم
حقل كلمة المرور
زر تسجيل الدخول
رابط "نسيت كلمة المرور"
رابط "إنشاء حساب"

كل ذلك داخل إطار متوهج متحرك يعطي إحساسًا احترافيًا وقويًا.

🛠️ الأدوات المستخدمة في التصميم

🔹 HTML

يُستخدم لإنشاء هيكل النموذج، ويشمل:

العنوان
حقول الإدخال
الأزرار
الروابط

🔹 CSS

يُستخدم لإضافة:

التأثيرات المتوهجة
الإطارات المتحركة
الانتقالات السلسة
الألوان والظلال
التصميم المتجاوب

🔹 Font Awesome

لاستخدام أيقونات أنيقة داخل النموذج (اختياري).

📄 كود HTML (وصف)

كود HTML في هذا المشروع يقوم بإنشاء:

نموذج تسجيل دخول كامل
عنوان Login جذاب
حقول إدخال لاسم المستخدم وكلمة المرور
زر Sign In
روابط مساعدة للمستخدم

يتم ربط ملف CSS خارجي للتحكم الكامل في التصميم والتأثيرات.

🎨 كود CSS (وصف)

كود CSS هو سر جمال التصميم، حيث يقوم بـ:

إنشاء إطار متوهج متحرك حول النموذج
إضافة تأثير دوران خفيف للإطار
تكبير النموذج عند تمرير الماوس
تحريك النموذج داخليًا بسلاسة
استخدام ألوان نيون (سماوي – وردي)
إضافة ظلال وإضاءات عميقة

النتيجة:
واجهة مستخدم مستقبلية تشبه واجهات التطبيقات المدفوعة.

كيفية التركيب :

1. HTML

انسخ كود HTML وضعه داخل المشاركة أو صفحة ثابتة:

2. CSS

أضف كود الـ CSS داخل تنسيق القالب أو داخل <style>:

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #252432;
}

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.box {
  position: relative;
  width: 400px;
  height: 200px;
  background: repeating-conic-gradient(
    from var(--a),
    #ff2770 0%,
    #ff2770 5%,
    transparent 5%,
    transparent 40%,
    #ff2770 50%
  );
  filter: drop-shadow(0 15px 50px #000);
  animation: rotating 4s linear infinite;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.box:hover {
  width: 450px;
  height: 500px;
}

@keyframes rotating {
  0% {
    --a: 0deg;
  }
  100% {
    --a: 360deg;
  }
}

.box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(
    from var(--a),
    #45f3ff 0%,
    #45f3ff 5%,
    transparent 5%,
    transparent 40%,
    #45f3ff 50%
  );
  filter: drop-shadow(0 15px 50px #000);
  border-radius: 20px;
  animation: rotating 4s linear infinite;
  animation-delay: -1s;
}

.box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #2d2d39;
  border-radius: 15px;
  border: 8px solid #25252b;
}

.login {
  position: absolute;
  inset: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transition: 0.5s;
  color: #fff;
  overflow: hidden;
}

.box:hover .login {
  inset: 40px;
}

.loginBx {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(126px);
  gap: 20px;
  width: 70%;
  transition: 0.5s;
}

.box:hover .loginBx {
  transform: translateY(0px);
}

.loginBx h2 {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.loginBx h2 i {
  color: #ff2770;
  text-shadow: 0 0 5px #ff2770, 0 0 30px #ff2770;
}

.loginBx input {
  width: 100%;
  padding: 10px 20px;
  outline: none;
  font-size: 1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid #fff;
  border-radius: 30px;
}

.loginBx input::placeholder {
  color: #999;
}

.loginBx input[type="submit"] {
  background: #45f3ff;
  border: none;
  font-weight: 500;
  color: #111;
  cursor: pointer;
  transition: 0.5s;
}

.loginBx input[type="submit"]:hover {
  box-shadow: 0 0 10px #45f3ff, 0 0 60px #45f3ff;
}

.group {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.group a {
  color: #fff;
  text-decoration: none;
}

.group a:nth-child(2) {
  color: #ff2770;
  font-weight: 600;
}

📱 هل التصميم متجاوب؟

نعم ✅
التصميم:

يعمل بكفاءة على الشاشات الصغيرة
يتكيف تلقائيًا مع حجم الشاشة
مناسب للمواقع والتطبيقات واللوحات التحكم

📌 ملاحظات مهمة

🔹 عند تحرير قيم CSS داخل بعض المحررات، قد تظهر القيم فارغة،
لكن يجب نسخ الكود كاملًا ولصقه كما هو لضمان عمل التأثيرات.

🔹 هذا التصميم واجهة فقط (Frontend)، ولا يحتوي على تحقق بيانات.

🔐 ماذا عن تسجيل الدخول الحقيقي؟

لجعل صفحة تسجيل الدخول تعمل فعليًا، يجب:

1️⃣ ربط النموذج بـ سلوك خادم (Backend)
2️⃣ التحقق من:

اسم المستخدم
كلمة المرور

3️⃣ مقارنة البيانات المُدخلة بقاعدة البيانات
4️⃣ تحديد:

صفحة نجاح تسجيل الدخول
صفحة فشل البيانات

يمكن تنفيذ ذلك باستخدام:

PHP
Node.js
Python
أو أي نظام Backend آخر

💡 استخدامات التصميم

هذا النموذج مناسب لـ:

✔ مواقع شخصية
✔ لوحات تحكم Admin
✔ مواقع شركات
✔ صفحات تسجيل دخول SaaS
✔ تطبيقات ويب
✔ قوالب بلوجر مخصصة

📝 الخلاصة

إذا كنت تريد:

تصميم Login احترافي
بدون تعقيد
بدون JavaScript
وبشكل عصري وجذاب

فهذا النموذج هو خيار ممتاز لإضافة لمسة احترافية لموقعك.

Menu

Allito

الربح من الانترنت

تصميمات

كورس تصميم قالب بلوجر

تصميمات هيدر

مقالات تعليمية

بلوجر