إنشاء نموذج تسجيل تأثير مكدس الورق

هذه المقالة هي جزء من موقعنا "سلسلة دروس HTML5 / CSS3" - مكرسة لمساعدتك في جعلك أفضل مصمم و / أو مطور. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة.

تعد نماذج تسجيل الدخول جزءًا أساسيًا من أي موقع ديناميكي. أنها توفر آلية لمستخدمي موقع الويب للوصول إلى المحتوى المقيد. في هذا البرنامج التعليمي ، سوف نستكشف الكثير من ميزات CSS3 مثل الظل النصي والظل المربع والتدرجات الخطية والانتقالات لإنشاء نموذج تسجيل دخول بسيط وأنيق بمظهر ورق مكدس.

توضح الصورة أعلاه معاينة لنموذج تسجيل الدخول الذي سنبنيه. على استعداد للغوص في؟ هيا بنا نبدأ!

1. ترميز HTML الأساسي

إن ترميز HTML الذي سنستخدمه بسيط للغاية ، بعد إعلان HTML5 Doctype ، لدينا و </code> العلامات. في حدود <code><body></code> العلامة ، لدينا <code><section></code> علامة مع فئة من "مكدسة". هذه <code><section></code> تُستخدم العلامة لتحديد عرض مربع المحتوى ولمواءمته مع مركز الصفحة. سنستخدم أيضًا اسم فئة هذه العلامة لاستهداف هذه العلامة باستخدام CSS. ا <code><form></code> العلامة يتبع <code><section></code> العلامة. لا تحتوي علامة النموذج على قيمة صالحة لسمة "إجراء" ، حيث يتم استخدامها فقط لغرض العرض التوضيحي. داخل حقل النموذج توجد إعلانات لبطاقات البريد الإلكتروني وكلمات المرور وحقل الإدخال ، متبوعةً زر إرسال. النقطة المهمة التي يجب ملاحظتها هنا هي أننا استخدمنا حقل إدخال بنوع من "البريد الإلكتروني". يتم توفير هذا لنا من خلال إعلان HTML5 وهو يتحلل بأمان إلى حقل إدخال نص منتظم في المتصفحات القديمة.</p> <p>إليك علامة HTML بأكملها:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>نموذج تسجيل الدخول البسيط

  تسجيل الدخول
   البريد الإلكتروني  
   كلمه السر

     وإليك معاينة لما أنشأناه حتى الآن:
  
 2. إضافة الأنماط الأساسية
 قم بإنشاء ملف css جديد يسمى master.css وأضف رابطًا إلى هذا الملف في ملف HTML الرئيسي. سنبدأ تشغيل ملف CSS الخاص بنا بإعادة ضبط سريعة للحصول على التوحيد عبر المتصفحات المختلفة. لنقم أيضًا بإضافة صورة خلفية جميلة إلى صفحتنا. الصورة التي استخدمتها مأخوذة من أنماط دقيقة. لا تتردد في تصفح الموقع للعثور على صورة خلفية تناسب ذوقك. يمكننا إضافة صورة الخلفية بمساعدة الإعلان التالي. لاحظ أيضًا أنني أستخدم بلا بلا الخط من Google Web Font للحصول على النص الأساسي.
  / * -------- Base Styles --------- * / body، html margin: 0؛ الحشو: 0؛  الخلفية: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") أعلى الصفحة اليسرى ؛ font: 16px / 1.5 "Open Sans" و Helvetica و Arial و sans-serif ؛  div.wrap width: 400px؛ الهامش: 80px auto ؛ 
 3. مكدسة تأثير ورقة
 الآن وبعد أن أصبح لدينا التصميم الأساسي قيد التشغيل ، دعنا نبدأ في تصميم النموذج. للحصول على تأثير ورقة مكدسة ، سوف نستفيد من :بعد و :قبل شبه العناصر. تستخدم هذه العناصر الزائفة في الغالب لإضافة تأثيرات بصرية إلى أي محدد. 
 ال :قبل يستخدم العنصر الزائف لإضافة محتوى قبل محتوى المحدد و :بعد عنصر شبه زائف بعد محتوى محدد. 
 سنبدأ بإعطاء القسم فئة "مكدسة" بعرض 400 بكسل وارتفاع 300 بكسل. علاوة على ذلك ، سنمنح هذا المربع لونًا خلفيًا لـ # f6f6f6 وحدًا بسماكة 1 بكسل مع اللون #bbb. الأشياء الرئيسية التي يجب ملاحظتها هنا هي إعلان نصف قطر الحدود وإعلان صندوق الظل. هنا ، تم استخدام بادئات المستعرض "-moz-" و "-webkit-" للتأكد من أن هذا يعمل في المستعرضات المستندة إلى gecko و webkit. 
 إن إعلان نصف القطر بسيط للغاية ويستخدم لإنشاء زوايا دائرية ، حيث يمثل 3px الانحناء. قد يبدو بناء جملة إعلان box-shadow معقدًا ، لكن دعنا نقسمه إلى أجزاء أصغر لفهمه بشكل أفضل. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛ / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0،0،0، .2)؛ -moz-box-shadow: 0 0 3px rgba (0،0،0، .2)؛ box-shadow: 0 0 3px rgba (0،0،0، .2)؛
 يشير أول صفرين إلى الإزاحة x والإزاحة y والإشارة 3px إلى التمويه. التالي هو إعلان اللون. لقد استخدمت قيم rgba هنا ؛ rgba لتقف على أحمر أخضر أزرق وألفا (التعتيم). وبالتالي فإن القيم الأربعة الموجودة داخل الأقواس تشير إلى مقدار اللون الأحمر والأخضر والأزرق وألفا (عتامة).
  .مكدسة خلفية: # f6f6f6؛ الحدود: 1px صلب #bbb ؛ الارتفاع: 300 بكسل ؛ الهامش: 50px auto ؛ الموقف: نسبي العرض: 400 بكسل ؛ -webkit-box-shadow: 0 0 3px rgba (0،0،0، .2)؛ -moz-box-shadow: 0 0 3px rgba (0،0،0، .2)؛ box-shadow: 0 0 3px rgba (0،0،0، .2)؛ -Wkkit-border-radius: 3px ؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛ 
 الآن وقد أنشأنا مربع الإحاطة الأساسي للنموذج ، فلنبدأ مع :بعد و :قبل عناصر-الزائفة. 
  .مكدسة: بعد ،. مكدسة: قبل خلفية: # f6f6f6 ؛ الحدود: 1px صلب #aaa ؛ أسفل: -8px ؛ المحتوى: "؛ الارتفاع: 250 بكسل ؛ اليسار: 2 بكسل ؛ الموضع: مطلق ؛ العرض: 394 بكسل ؛ فهرس z: -10 ؛ -webkit-box-shadow: 0 0 3px rgba (0،0،0، .2)؛ - الظل المربع: 0 0 3px rgba (0،0،0، .2) ؛ box-shadow: 0 0 3px rgba (0،0،0، .2) ؛ -webkit-border-radius: 3px؛ - moz-border-radius: 3px ؛ الحدود-radius: 3px ؛. مكدسة: قبل bottom: -14px ؛ left: 5px ؛ العرض: 388px ؛ -wkkit-border-radius: 3px ؛ -moz-border-radius: 3px ؛ دائرة نصف قطرها: 3px ؛ -webkit-box-shadow: 0 0 15px rgba (0،0،0،0.5) ؛ -moz-box-shadow: 0 0 15px rgba (0،0،0،0.5)؛ box -الظل: 0 0 15 بكسل rgba (0،0،0،0.5) ؛
 يشبه الكود الخاص بـ: بعد و: قبل العناصر الزائفة تمامًا تقريبًا تلك الموجودة في المربع المحيط الموضح أعلاه. الشيء الوحيد المهم الذي نلاحظه هنا هو أن هذه العناصر الزائفة يتم وضعها تمامًا فيما يتعلق بالمربع المحيط. يتم تخفيض كل عنصر من العناصر الزائفة تدريجياً ببضع وحدات بكسل لإعطائه شكل ورق مكدس.
 4. حقول الإدخال
 في علامة HTML ، أضفنا فئة من "إدخال النص" إلى كل من حقل البريد الإلكتروني وكلمة المرور للسماح لنا باستهداف هذه العناصر بسهولة من خلال إعلانات CSS الخاصة بنا. إليك إعلان CSS المطبق على كلا الحقلين.
  form input.text-input outline: 0؛ العرض محجوب؛ العرض: 330 بكسل ؛ الحشو: 8px 15px. الحدود: 1px رمادي صلب ؛ حجم الخط: 16 بكسل ؛ وزن الخط: 400 ؛ -Wkkit-border-radius: 25px؛ -Moz-border-radius: 25px ؛ نصف قطر الحدود: 25 بكسل ؛ صندوق الظل: أقحم 0 2px 8px rgba (0،0،0،0.3) ؛ 
 هنا ، مرة أخرى ، استفدنا من إعلانات حدود دائرة نصف قطرها وظل مربعها. في حالة حقول النص ، يتم إعطاء نصف قطر الحدود قيمة أعلى لضمان مزيد من الانحناء. في حالة إعلان box-shadow ، تم استخدام الكلمة الأساسية inset لتحديد أن الظل سيكون داخل حقل النص. هنا ، الإزاحة الرأسية للظل هي 2px ولها طمس 8px ، اللون الذي يتم الإعلان عنه باستخدام تنسيق rgba.
 لإضافة بعض التفاعل إلى حقول الإدخال ، سنقوم بتغيير خاصية box-shadow لحقل الإدخال في حالة "التحويم". يحتوي إعلان box-shadow الجديد على إزاحة صفر x و y ولكنه يحتوي على تمويه 5px ، مع الإعلان عن اللون بتنسيق rgba.
 5. تقديم زر
 الجزء الأخير من هذا النموذج الذي يتعين علينا إكماله هو زر الإرسال. على غرار حقل الإدخال ، سنمنح زر الإرسال نصف قطر 25 بكسل باستخدام خاصية نصف القطر. تمت إضافة خاصية box-shadow مع إزاحة y بمقدار 1px لإعطاء الزر “الداخلية الظل” تأثير.
  إدخال النموذج [type = 'submit'] float: right؛ الحشو: 10px 20px. العرض محجوب؛ المؤشر: المؤشر ؛ حجم الخط: 16 بكسل ؛ وزن الخط: 700 ؛ اللون: # ff؛ text-shadow: 0 1px 0 # 000؛ لون الخلفية: # 0074CC؛ الحدود: 1px الصلبة # 05C ؛ -Wkkit-border-radius: 25px؛ -Moz-border-radius: 25px ؛ نصف قطر الحدود: 25 بكسل ؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # 08C ، # 05C) ؛ background-image: -ms-linear-gradient (top، # 08C، # 05C)؛ خلفية الصورة: -تدرج خطي-التدرج (أعلى ، # 08C ، # 05C) ؛ خلفية الصورة: التدرج الخطي (أعلى ، # 08C ، # 05C) ؛ -webkit-box-shadow: inset 0 1px 0px rgba (255، 255، 255، 0.5)؛ -moz-box-shadow: inset 0 1px 0px rgba (255، 255، 255، 0.5)؛ box-shadow: inset 0 1px 0px rgba (255، 255، 255، 0.5)؛ 
 الشيء المهم أن نلاحظ هنا هو إعلان لإضافة التدرج اللوني على هذا الزر. تدرجات CSS3 هي موضوع كبير إلى حد ما وسنقوم فقط بخدش السطح. بالنسبة إلى زر الإرسال هذا ، سنضيف تدرجًا خطيًا يمتد من # 08C إلى # 05C. كما هو الحال مع جميع خصائص CSS3 الأخرى التي استخدمناها حتى الآن ، سنضيف بادئات بائع "-moz" و "webkit" و "ms" لضمان عمل التدرج اللوني عبر متصفحات مختلفة.
 6. عرض وتحميل
 نموذج تسجيل الدخول الخاص بنا اكتمل الآن. تحقق من العرض التوضيحي لمعرفة كيف يبدو النموذج المكتمل. إذا فقدت في أي وقت أو لم تتمكن من المتابعة باستخدام البرنامج التعليمي ، فلا تقلق ، فقط قم بتنزيل الملفات على سطح المكتب الخاص بك وعبث برمز CSS الحالي لفهم كيفية عمله.
 آمل أن تستمتع هذا البرنامج التعليمي. لا تتردد في تجربة هذه الميزات ولا تنس مشاركة أفكارك.
 عرض
 تحميل ملفات
 
ملحوظة المحرر: هذا هو مكتوب من قبل بهاراني م ل Hongkiat.com. بهاراني مصمم / مطور من نيودلهي ، الهند. يعمل حاليًا على موقع Resumonk.com - منشئ استئناف على الإنترنت يساعدك في إنشاء سيرة ذاتية احترافية وجميلة في غضون دقائق. تحقق أيضًا من مشروعه الجانبي - Quotescube.com - الجرعة اليومية من عروض الأسعار.