دورة في CSS

قالب تسجيل الدخول CSS

ملاحظة: هذا الدرس اضافي لكسب خبرات اكثر

المكتسبات من هذا الدرس كالتالي:

طريقة عمل قالب تسجيل الدخول
طريقة تصميم القالب بالطريقة التي تناسبك
طريقة تغير الخلفية والالوان للقالب

ملاحظة

تعريف كود span

<span>

العلامة سبان مثل علامة ديف. ليس له معنى على الإطلاق، ويستخدم في الغالب للتصميم باستخدام معرف أو فئة. الفرق بين الاثنين هو أن ديف هو عنصر كتلة، انها على خط منفصل. سبان ومع ذلك هو عنصر مضمنة، وهذا يعني أنه يمكن أن يكون على خط مع عناصر أخرى.

شرح الكود خطوة بخطوة كالأتي:

/*هنا بداية تعريف القالب لتحديد الحدود للقالب*/ form {
border: 3px solid #f1f1f1;
}
/*تعريف امر ادخال النص لاسم المستخدم و الرقم السري. تحديد عرض الحقل لصندوق النص وحدوده */ input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/*تعريف حقول زر تسجيل الدخول. تحديد خلفية الون, لون الخط, المسافات, الحدود, العرض*/ button {
/*لون الخلفية*/ background-color: #4CAF50;
/*لون الخط*/ color: white;
/* المسافات*/ padding: 14px 20px;
/*الحواشي*/ margin: 8px 0;
/*الحدود*/ border: none;
/*نقطة التحديد*/ cursor: pointer;
/*العرض*/ width: 100%;
}
/*التضليل الحقل وقت تمرير الماوس */ button:hover {
opacity: 0.8;
}
/*زر الالغاء*/ .cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/*نقطة البداية لصورة*/ .imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* الافتار لصورة*/ img.avatar {
width: 40%;
border-radius: 50%;
}
/*الكونتير لصفحة*/ .container {
padding: 16px;
}
/**/ span.psw {
float: right;
padding-top: 16px;
}

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
form {
    border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
</head>
<body>

<h2>تسجيل الدخول</h2>

<div class="container">
    <label><b>إسم المستخدم</b></label>
    <input type="text" placeholder="أدخل اسم المستخدم" name="uname" required>

<label><b>كلمة المرور</b></label>
    <input type="password" placeholder="أدخل كلمة المرور" name="psw" required>
        
    <button type="submit">دخول</button>
    <label>
      <input type="checkbox" checked="checked"> تذكرني
    </label>
  </div>

<div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">إلغاء</button>
    <span class="psw">نسيت <a href="#">كلمة المرور؟</a></span>
  </div>
</form>

</body>
</html>