CSS

#subscribe, #login( الموضع: مطلق؛ الأعلى: 0px; العرض: 88%; الحشو: 18px 6% 60px 6%; الهامش: 0 0 35px 0; الخلفية: rgb(247, 247, 247); الحدود: 1px صلب rgba(147, 184, 189,0.8); فهرس z: 22)

هنا سنقوم بتعيين خصائص للرأس:

/**** نص ****/ #wrapper h1( حجم الخط: 48px; اللون: rgb(6, 106, 117); الحشو: 2px 0 10px 0; عائلة الخط: "FranchiseRegular"، "Arial Narrow" ",Arial,sans-serif; حجم الخط: غامق; محاذاة النص: المركز; الحشو السفلي: 30px; ) / ** حاليًا يدعم webkit فقط مقطع الخلفية: النص; **/ #wrapper h1( الخلفية: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color:transparent; -webkit-background-clip: text) #wrapper h1:after( content: " "؛ عرض: كتلة؛ العرض: 100%؛ الارتفاع: 2 بكسل؛ الخلفية: تدرج خطي (يسار، rgba(147,184,189,0) 0%، rgba(147,184,189,0.8) 20% 147,184,189,1) 147,184,189,0.8) 79%، rgba(147,184,189,0) 100%);

لاحظ أن المتصفحات التي تدعم webkit اليوم هي فقط مقطع الخلفية: النص، لذلك سنقوم بإنشاء خلفية مخططة لمجموعة الويب فقط وربطها برأس H1. منذ المعلمة مقطع الخلفية: النصيعمل فقط في متصفحات Webkit، قررت العمل فقط مع خصائص webkit. لهذا السبب قمت بتقسيم CSS إلى قسمين واستخدمت تدرج webkit فقط. ومع ذلك، لا يجب عليك فقط استخدام webkit على مواقع الويب الخاصة بك! لذلك، على سبيل المثال، المعلمة -webkit-text-fill-color: شفافيسمح لنا بالحصول على خلفية شفافة، ولكن لمتصفحات webkit فقط، ستتجاهل جميع المتصفحات الأخرى هذه الخاصية.

لقد أنشأنا أيضًا خطًا رفيعًا أسفل العنوان باستخدام عنصر الفئة الزائفة :after. استخدمنا تدرجًا بارتفاع 2 بكسل وقمنا بتقليل العتامة عند الحواف إلى الصفر.

الآن دعونا نعتني بحقول الإدخال ونجعلها تبدو جميلة.

/**** تصميم الإدخال المتقدم ****/ /* العنصر النائب */ ::-webkit-input-placeholder ( اللون: rgb(190, 188, 188); نمط الخط: مائل; ) الإدخال:-moz- العنصر النائب، منطقة النص:-moz-placeholder( اللون: rgb(190, 188, 188); نمط الخط: مائل; ) الإدخال (المخطط التفصيلي: لا شيء;)

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

/* جميع الحقول تستبعد خانة الإرسال والاختيار */ #wrapper input:not())( width: 92%; حجم الصندوق: نصف قطر المحتوى: 3 بكسل؛ ظل الصندوق: 0 بكسل 1 بكسل 4 بكسل 0 بكسل rgba (168، 168، 168، 0.6) انتقال داخلي: كل 0.2 ثانية خطية؛ التركيز (الحدود: 1 بكسل rgba (91، 90، 90، 0.7)؛ الخلفية: rgba (238، 236، 240، 0.2)؛ ظل الصندوق: 0px 1px 4px 0px rgba (168، 168، 168، 0.9) داخلي)

استخدمنا هنا الفئة الزائفة: عدم تصميم جميع الحقول باستثناء مربعات الاختيار. بالإضافة إلى ذلك، قررت إزالة الحد وإضافة الخصائص:التركيز و:نشط.

حان الوقت الآن للاستمتاع: الخط مع الرموز. نظرًا لأننا لا نستطيع استخدام الفئات الزائفة:before و:after، فسنضيف الرمز إلى معلمة التسمية ثم نضعه في الحقل. سأستخدم مكتبة Fontomas. يمكنك مطابقة الرموز بالحرف المقابل بنفسك. تذكر السمة رمز البيانات؟ هذا هو المكان الذي تحتاج إلى إدخال الرسالة فيه. اعتدت رمز البيانات = 'u'لتسجيل الدخول، "e" للبريد الإلكتروني، "p" لكلمة المرور. بمجرد تحديد الحروف، قمت بتنزيل الخط واستخدمت منشئ الخطوط Fontsquirrel لتحويله إلى تنسيق مناسب لـ @font-face.

@font-face ( عائلة الخط: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") تنسيق("embedded-" opentype")، url("fonts/fontomas-webfont.woff") تنسيق("woff")، url("fonts/fontomas-webfont.ttf") تنسيق("truetype")، url("fonts/fontomas-webfont" .svg#FontomasCustomRegular") format("svg"); وزن الخط: عادي; نمط الخط: عادي; ) /** خدعة سحرية! **/ :بعد ( المحتوى: attr(data-icon); عائلة الخط: "FontomasCustomRegular"; اللون: rgb(106, 159, 171); الموضع: مطلق; اليسار: 10px; الأعلى: 35px; العرض: 30px; )

هذا كل شيء. لا تحتاج إلى أن يكون لديك فئة منفصلة لكل رمز. استخدمنا المعلمة المحتوى: attr (رمز البيانات)للحصول على الرسالة من سمة رمز البيانات. وبالتالي، نحتاج فقط إلى تعيين خط واختيار لون ووضع رمز.

الآن دعونا نقوم بتعيين قواعد لزر إرسال النموذج.

/*نمط كلا الزرين*/ #wrapper p.button input (العرض: 30%؛ المؤشر: المؤشر؛ الخلفية: rgb(61, 157, 179); الحشو: 8px 5px; عائلة الخط: "BebasNeueRegular"، "Arial Narrow" "،Arial، sans-serif؛ اللون: #fff؛ حجم الخط: 24 بكسل؛ الحد: 1 بكسل rgb (28، 108، 122)؛ الهامش السفلي: 10 بكسل؛ ظل النص: 0 1 بكسل 1 بكسل rgba (0، 0) ، 0، 0.5)؛ نصف قطر الحدود: 3px؛ مربع الظل: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) داخلي، 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px rgb (210، 210، 210)؛ الانتقال: كل 0.2 ثانية خطية؛ ) #wrapper p.button input:hover( الخلفية: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. إدخال الزر: التركيز (الخلفية: rgb(40, 137, 154); الموضع: نسبي; الأعلى: 1px; الحدود: 1px Solid rgb(12, 76, 87); ظل الصندوق: 0px 1px 6px 4px rgba(0, 0) ، 0، 0.2) داخلي؛ ) p.login.button، p.signin.button( محاذاة النص: يمين؛ الهامش: 5 بكسل 0؛ )

الحيلة هي استخدام صندوق الظل لإنشاء إطارات متعددة. وبطبيعة الحال، يمكنك استخدام إطار واحد فقط، ولكن يمكنك أيضًا استخدام عدة إطارات. سوف نستخدم معلمة الطول لإنشاء حد أبيض ثانٍ "زائف" بعرض 3 بكسل، بدون تشويش.

لنقم الآن بتصميم مربع الاختيار، ولن نفعل أي شيء غير عادي هنا:

/* نمط مربع الاختيار "تذكرني"*/ .keeplogin( Margin-top: -5px; ) .keeplogin input, .keeplogin label(display: inline-block;font-size: 12px;font-style: italic; ) . keeplogin input#loginkeeping( الهامش الأيمن: 5px; ) .keeplogin label (العرض: 80%;)

تصميم تذييل النموذج باستخدام تدرجات خطية متعددة لإنشاء تدرج مخطط.

P.change_link( الموضع: مطلق؛ اللون: rgb(127, 124, 124); اليسار: 0px; الارتفاع: 20px; العرض: 440px; الحشو: 17px 30px 20px 30px; حجم الخط: 16px; محاذاة النص: يمين; الحدود العلوية: 1 بكسل صلب rgb (219، 229، 232)؛ نصف قطر الحدود: 0 0 5 بكسل 5 بكسل الخلفية: rgb (225، 234، 235)؛ 247، 247) ، rgb(247، 247، 247) 15 بكسل، rgb (225، 234، 235) 15 بكسل، rgb (225، 234، 235) 30 بكسل، rgb (247، 247، 247) 30 بكسل .change_link a ()؛ عرض: كتلة مضمنة؛ الخلفية: rgb(247, 248, 241); اللون: rgb(29, 162, 193); نصف قطر الحدود: 4 بكسل؛ الحدود: 1 بكسل rgb (203، 213، 214)؛ 198) #wrapper p.change_link أ:نشط (الموضع: نسبي؛ الأعلى: 1 بكسل؛)

يمكنك الآن أن ترى أن لدينا شكلين جميلين، ولكننا نريد عرض أحدهما فقط. حان الوقت للرسوم المتحركة!

إنشاء الرسوم المتحركة

#تسجيل (مؤشر z: 21؛ العتامة: 0؛)

تذكر أن نموذج تسجيل الدخول يحتوي على مؤشر z: 22؟ بالنسبة للنموذج الثاني، سنقوم بتعيين هذا المعلمة إلى 21 لوضعها "تحت" نموذج تسجيل الدخول.

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

#toregister:target ~ #wrapper #register، #tologin:target ~ #wrapper #login( z-index: 22; Animation-name: FadeInLeft; Animation-delay: .1s; )

وهذا ما يحدث: عندما نضغط على الزر ينضم، نحن نتجه إلى #للتسجيل. ثم تحدث الرسوم المتحركة وعندها فقط ننتقل إلى عنصر #register. نحن نستخدم الرسوم المتحركة تسمى FadeInLeft. نظرًا لأننا "نخفي" الشكل باستخدام الشفافية الصفرية، فسنطبق رسمًا متحركًا سيظهر تدريجيًا. وقمنا أيضًا بتغيير مؤشر z بحيث يظهر أعلى الشكل الآخر. ويحدث الشيء نفسه بالنسبة للنموذج الآخر.
هنا هو رمز الرسوم المتحركة. استخدمنا إطار الرسوم المتحركة CSS3 من Dan Eden وقمنا بتكييف هذا الإطار لبرنامجنا التعليمي.

تحريك (مدة الرسوم المتحركة: 0.5 ثانية؛ وظيفة توقيت الرسوم المتحركة: السهولة؛ وضع تعبئة الرسوم المتحركة: كلاهما؛) @keyframes FadeInLeft ( 0% ( العتامة: 0؛ التحويل: TranslateX(-20px); ) 100% ( العتامة : 1; تحويل: ترجمةX(0);

الشكل الذي "يختفي" سيكون له رسم متحرك للتلاشي على اليسار:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( Animation-name: FadeOutLeftBig; ) @keyframes FadeOutLeft ( 0% ( العتامة: 1; تحويل: ترجمة X(0); ) 100% ( العتامة : 0; تحويل: ترجمة X(-20px);

يمكنك الآن استخدام الرسوم المتحركة الأخرى لـ Dan Eden باستخدام ملف animate.css: ما عليك سوى تغيير فئة .animate وأسماء الرسوم المتحركة. ستجد أيضًا العديد من الرسوم المتحركة الأخرى في نهاية ملف animate-custom.css.

هذا كل شيء أيها الأصدقاء. أتمنى أن تستمتع بهذا البرنامج التعليمي!

الحيلة الصغيرة الثانية تتعلق باستخدام خط الأيقونة. سوف نستخدم سمة البيانات لعرض الرموز. عن طريق الإعداد في بداية النموذج. ستسمح هذه الخدعة الأنيقة لنموذجنا بالتصرف بشكل صحيح عند العمل مع المراسي.باستخدام الحرف المطابق في HTML، سنحتاج فقط إلى محدد سمة CSS واحد لتصميم جميع الرموز. اقرأ المزيد حول هذه التقنية في 24 طريقة: عرض الأيقونات مع الخطوط وسمات البيانات.

سي اس اس

من أجل وضوح الكود في هذا البرنامج التعليمي، سأحذف جميع بادئات البائع، ولكنك بالطبع ستجدها في الملفات. مرة أخرى، أستخدم بعض حيل CSS3 المتقدمة جدًا والتي قد لا تعمل في جميع المتصفحات. دعونا نبدأ.

تصميم كلا النموذجين باستخدام CSS3

أولًا، دعونا نعطي الشكلين بعض التصميم العام للحاوية.

#subscribe, #login( الموضع: مطلق؛ الأعلى: 0px; العرض: 88%; الحشو: 18px 6% 60px 6%; الهامش: 0 0 35px 0; الخلفية: rgb(247, 247, 247); الحدود: 1px صلب rgba(147, 184, 189,0.8); فهرس z: 22)

لقد أضفنا ظلًا مربعًا لطيفًا يتكون من ظلين: ظل داخلي لإنشاء التوهج الأزرق الداخلي، وظل خارجي. سنشرح مؤشر z بعد قليل.

فيما يلي، سنقوم بتصميم الرأس مع بعض قصاصات الخلفية:

/**** تصميم النص العام ****/ #wrapper h1( حجم الخط: 48px; اللون: rgb(6, 106, 117); الحشو: 2px 0 10px 0; عائلة الخط: "FranchiseRegular"،" Arial Narrow"،Arial، sans-serif؛ وزن الخط: غامق؛ محاذاة النص: المركز؛ الحشو السفلي: 30 بكسل؛) /** في الوقت الحالي، تدعم مجموعة الويب فقط مقطع الخلفية: النص؛ */ #wrapper h1( الخلفية: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb (64، 111، 118) 40 بكسل، rgb(18، 83، 93) 40 بكسل)؛ -webkit-text-fill-color:transparent؛ -webkit-background-clip: text) #wrapper h1:after( content:" "؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: 2 بكسل؛ الهامش العلوي: 10 بكسل؛ الخلفية: تدرج خطي (يسار، rgba(147,184,189,0) 0%، rgba(147,184,189,0.8) 20%، rgba(147,184,189) ,1) 53%، رغبا (147,184,189,0.8) 79%، رغبا (147,184,189,0) 100%))؛

لاحظ أنه في هذه اللحظة يتم دعم متصفحات webkit فقط مقطع الخلفية: النص، لذلك سنقوم بإنشاء خلفية مجردة فقط لـ webkit هنا، ونقوم بقصها إلى النص لإضافة الخطوط إلى عنوان H1. منذ مقطع الخلفية: النصتعمل الخاصية حاليًا فقط في متصفحات Webkit، فقررت استخدام بادئة webkit فقط. هذا هو السبب وراء قيامي بتقسيم إعلان CSS إلى جزأين، واستخدام التدرج البادئ لـ webkit فقط. يعد استخدام البادئة –webkit- فقط ممارسة سيئة، فهي مخصصة للأغراض التجريبية فقط، ويجب ألا تفعل ذلك أبدًا على موقع ويب حقيقي! وهذا هو أيضا حيث -webkit-text-fill-color: شفافمفيد: فهو يمكّننا من الحصول على خلفية شفافة فقط على متصفحات webkit، وستتجاهلها جميع المتصفحات الأخرى وتعطينا اللون الاحتياطي للنص المقدم.

لقد أنشأنا أيضًا خطًا متلاشيًا تحت العنوان بمساعدة الطبقة الزائفة:after. نستخدم تدرجًا بارتفاع 2 بكسل ونخفف الخلفية إلى 0 عتامة عند كلا الطرفين.

الآن دعونا نصمم مدخلاتنا ونمنحها مظهرًا أجمل.

/**** تصميم الإدخال المتقدم ****/ /* العنصر النائب */ ::-webkit-input-placeholder ( اللون: rgb(190, 188, 188); نمط الخط: مائل; ) الإدخال:-moz- العنصر النائب، منطقة النص:-moz-placeholder( اللون: rgb(190, 188, 188); نمط الخط: مائل; ) الإدخال (المخطط التفصيلي: لا شيء;)

أولاً نقوم بتصميم المدخلات وإزالة المخطط التفصيلي. ولكن كن حذرا هنا؛ يساعد المخطط التفصيلي المستخدم على معرفة المدخلات التي تم التركيز عليها، لذا إذا قمت بإزالتها، فيجب عليك توفير بعض: حالات التركيز و: النشطة للمدخلات.

/* جميع المدخلات باستثناء خانة الإرسال والاختيار */ #wrapper input:not())( width: 92%; الهامش العلوي: 4px; الحشو: 10px 5px 10px 32px; الحدود: 1px Solid rgb(178, 178, 178) حجم الصندوق: نصف قطر المحتوى: 3 بكسل؛ ظل الصندوق: 0 بكسل 1 بكسل 0 بكسل rgba (168، 168، 168، 0.6) داخلي؛ :التركيز (الحدود: 1 بكسل صلب rgba (91، 90، 90، 0.7)؛ الخلفية: rgba (238، 236، 240، 0.2)؛ ظل الصندوق: 0px 1px 4px 0px rgba (168، 168، 168، 0.9) داخلي )

استخدمنا هنا فئة: not pseudo، لتصميم جميع المدخلات، باستثناء مربع الاختيار. لقد قدمت: التركيز و: الحالة النشطة، منذ أن قررت إزالة المخطط التفصيلي.

والآن الجزء الممتع: خط الأيقونة. نظرًا لأننا لا نستطيع استخدام:before و:afterالفئات الزائفة على المدخلات، فسيتعين علينا الغش قليلاً: سنضيف الرمز إلى الملصق، ثم نضعه في الإدخال. أنا أستخدم مكتبة Fontomas التي تجمع بعض الرموز الرائعة. يمكنك إعادة ترتيبها لتعيين الرمز على حرف معين. تذكر رمز البياناتيصف؟ إنه المكان الذي يجب أن تضع فيه الرسالة. اعتدت رمز البيانات = 'u'للمستخدم، "e" للبريد الإلكتروني، "p" لكلمة المرور. بمجرد اختيار الحروف، قمت بتنزيل الخط واستخدم منشئ الخطوط Fontsquirrel لتحويله إلى تنسيق متوافق مع @font-face.

@font-face ( عائلة الخط: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") تنسيق("embedded-" opentype")، url("fonts/fontomas-webfont.woff") تنسيق("woff")، url("fonts/fontomas-webfont.ttf") تنسيق("truetype")، url("fonts/fontomas-webfont" .svg#FontomasCustomRegular") format("svg"); وزن الخط: عادي; نمط الخط: عادي;) /** خدعة الأيقونة السحرية! **/ :بعد ( المحتوى: attr(data-icon); عائلة الخط: "FontomasCustomRegular"; اللون: rgb(106, 159, 171); الموضع: مطلق; اليسار: 10px; الأعلى: 35px; العرض: 30px; )

نعم، هذا كل شيء يا رفاق، لست بحاجة إلى أن يكون لديك فصل دراسي لكل رمز. استخدمنا المحتوى: attr (رمز البيانات)لاسترداد الحرف من سمة data-icon، لذلك كل ما علينا فعله هو الإعلان عن الخط واختيار لون جميل ووضعه.

الآن لنقم بتصميم زر الإرسال لكلا النموذجين.

/*تصميم كلا زري الإرسال*/ #wrapper p.button input( width: 30%; cursor: pointer; الخلفية: rgb(61, 157, 179); الحشو: 8px 5px; عائلة الخط: "BebasNeueRegular"، "Arial" ضيق"، Arial، sans-serif؛ اللون: #fff؛ حجم الخط: 24 بكسل؛ الحد: 1 بكسل صلب rgb (28، 108، 122)؛ الهامش السفلي: 10 بكسل؛ ظل النص: 0 1 بكسل 1 بكسل rgba (0، 0، 0، 0.5)؛ نصف قطر الحدود: 3px؛ مربع الظل: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) داخلي، 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); .إدخال الزر: التركيز (الخلفية: rgb(40, 137, 154); الموضع: نسبي; الأعلى: 1px; الحدود: 1px Solid rgb(12, 76, 87); ظل الصندوق: 0px 1px 6px 4px rgba(0, 0، 0، 0.2) داخلي؛ ) p.login.button، p.signin.button( محاذاة النص: يمين؛ الهامش: 5 بكسل 0؛)

الحيلة هنا هي استخدام مربع الظل لإنشاء بعض الحدود الإضافية. يمكنك استخدام حد واحد فقط، ولكن يمكنك استخدام العديد من ظلال الصندوق التي تريدها. سنستخدم قيمة الطول لإنشاء حدود بيضاء ثانية "زائفة" بعرض 3 بكسل وبدون أي تمويه.

ثم سنقوم بتصميم مربع الاختيار، لا يوجد شيء مميز هنا:

/* تصميم مربع الاختيار "احتفظ بتسجيل الدخول"*/ .keeplogin( هامش أعلى: -5px; ) .keeplogin input, .keeplogin label(display: inline-block;font-size: 12px;font-style: italic; ) .keeplogin input#loginkeeping( الهامش الأيمن: 5px; ) .keeplogin input( width: 80%; )

سنقوم بتصميم الجزء السفلي من النموذج باستخدام التدرجات الخطية المتكررة لإنشاء خلفية مخططة.

P.change_link( الموضع: مطلق؛ اللون: rgb(127, 124, 124); اليسار: 0px; الارتفاع: 20px; العرض: 440px; الحشو: 17px 30px 20px 30px; حجم الخط: 16px; محاذاة النص: يمين; الحدود العلوية: 1 بكسل صلب rgb (219، 229، 232)؛ نصف قطر الحدود: 0 0 5 بكسل 5 بكسل الخلفية: rgb (225، 234، 235)؛ 247، 247) ، rgb(247، 247، 247) 15 بكسل، rgb (225، 234، 235) 15 بكسل، rgb (225، 234، 235) 30 بكسل، rgb (247، 247، 247) 30 بكسل .change_link a () عرض: كتلة مضمنة؛ الخلفية: rgb(247, 248, 241); اللون: rgb(29, 162, 193); نصف قطر الحدود: 4 بكسل؛ الحدود: 1 بكسل rgb (203، 213، 214)؛ 198) #wrapper p.change_link أ:نشط (الموضع: نسبي؛ الأعلى: 1 بكسل؛)

ستلاحظ الآن أن لدينا نموذجين جميلين، ولكننا نريد حقًا إظهار نموذج واحد فقط في كل مرة. والآن حان الوقت لبعض الرسوم المتحركة !!

إنشاء الرسوم المتحركة التبديل

أول شيء يجب فعله هو إخفاء النموذج الثاني عن طريق ضبط العتامة على 0:

#تسجيل (مؤشر z: 21؛ العتامة: 0؛)

هل تتذكر أن نموذج تسجيل الدخول الخاص بنا يحتوي على مؤشر z بقيمة 22؟ سنعطي النموذج الثاني مؤشر z بقيمة 21، لوضعه "تحت" نموذج تسجيل الدخول.

والآن الجزء الجيد حقًا: تبديل النماذج باستخدام الفئة الزائفة:target. ما عليك أن تفهمه حقًا حول: الهدف، هو أننا سنستخدم نقاط الارتساء لإجراء عملية النقل. السلوك الطبيعي للرابط الأساسي هو الانتقال إلى الهدف في الصفحة. لكننا لا نريد القفز إلى أي مكان، نريد فقط تبديل النماذج. وهنا تأتي حيلتنا باستخدام الرابطين الموجودين في أعلى الصفحة. بدلاً من الارتباط مباشرة بالنموذج الثاني، والمخاطرة بالحصول على تأثير "القفز"، فإننا في الواقع نضع الرابطين في أعلى الصفحة ونعطيهما العرض: لا يوجد. سيؤدي هذا إلى تجنب أي قفزة في الصفحة. الائتمان عند استحقاق الائتمان: لقد وجدت هذه الخدعة في إنشاء CSS3 (باللغة الفرنسية).

#toregister:target ~ #wrapper #register، #tologin:target ~ #wrapper #login( z-index: 22; Animation-name: FadeInLeft; Animation-delay: .1s; )

وهذا ما يحدث: عندما نضغط على انضم إليناالزر، نقوم بتشغيل #toregister. نقوم بعد ذلك بالرسوم المتحركة، باستخدام محدد الأخوة ~ للعثور على عنصر #register الخاص بنا. نحن نستخدم الرسوم المتحركة تسمى FadeInLeft. نظرًا لأننا "نخفي" النموذج باستخدام درجة التعتيم الصفرية، فسنستخدم رسمًا متحركًا يتلاشى لجعله يظهر. لقد قمنا أيضًا بتغيير الفهرس z، لجعله يظهر أعلى النموذج الآخر.
ويحدث الشيء نفسه بالنسبة للنموذج الآخر.

وهنا هو رمز الرسوم المتحركة. نحن نستخدم إطار الرسوم المتحركة CSS3 من Dan Eden وقمنا بتكييفه لهذا البرنامج التعليمي.

تحريك (مدة الرسوم المتحركة: 0.5 ثانية؛ وظيفة توقيت الرسوم المتحركة: السهولة؛ وضع تعبئة الرسوم المتحركة: كلاهما؛) @keyframes FadeInLeft ( 0% ( العتامة: 0؛ التحويل: TranslateX(-20px); ) 100% ( العتامة : 1; تحويل: ترجمةX(0);

النموذج الذي "يختفي" سيكون له رسم متحرك آخر سيجعله يتلاشى إلى اليسار:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( Animation-name: FadeOutLeftBig; ) @keyframes FadeOutLeft ( 0% ( العتامة: 1; تحويل: ترجمة X(0); ) 100% ( العتامة : 0; تحويل: ترجمة X(-20px);

يمكنك الآن استخدام الرسوم المتحركة الأخرى من animate.css الخاص بـ Dan Eden: ما عليك سوى ضبط فئة .animate واستبدال أسماء الرسوم المتحركة. ستجد أيضًا بعض الرسوم المتحركة المخصصة في نهاية ملف animate-custom.css.

حسنا، هذا كل شيء الناس. أتمنى أن تستمتع بالبرنامج التعليمي!

يرجى ملاحظة أنه في بعض المتصفحات مقطع الخلفية: النصغير معتمد. في Internet Explorer 9، لا تعمل التحولات والرسوم المتحركة، لذلك لن يكون هناك تبديل رائع للنماذج. في Internet Explorer 8 والإصدارات الأقدم، لا يتم دعم الفئة الزائفة:target، لذا لن تعمل على الإطلاق (سترى فقط نموذج تسجيل الدخول).

يمكن العثور على نماذج تسجيل الدخول في مواقع الويب التي تحتوي على المنتديات والمحلات التجارية وWordPress وفي الغالب يتطلب كل شيء على الإنترنت نموذج تسجيل دخول في مكان ما للوصول إلى شيء ما. شبكة الويب بأكملها غير مكتملة بدون نماذج تسجيل الدخول والتسجيل ونماذج الاشتراك.

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

حاول استخدام جميع قوالب نماذج تسجيل الدخول المجانية هذه نظرًا لأن معظمها يحتوي أيضًا على ميزات التحقق من صحة HTML المبنية مسبقًا بالإضافة إلى بعض التحقق من صحة jQuery أو HTML (مثل نموذج تسجيل الدخول/التسجيل مع مقياس النجاح أدناه).

هذه القائمة لم تنته بعد، أنا مهتم بالعثور على تصميمات جديدة لنماذج تسجيل الدخول، لذا سأستمر في تحديث هذه القائمة بقوالب نماذج تسجيل الدخول الجديدة عندما تظهر في عام 2017. تابعنا.

نموذج تسجيل الدخول باللون الأحمر

نموذج تسجيل دخول بسيط وفعال لموقعك على الويب والذي يتطلب حقول إدخال أساسية ولا يتطلب أي برمجة إضافية.

تصميم نموذج تسجيل دخول مسطح مصمم لموقع الويب الخاص بك وهو مسطح بالفعل. قم بتنزيل هذا القالب واستخدامه لأي غرض.

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

مع تزايد شعبية تصميم المواد من Google مقارنة بالتصميم المسطح، يمكننا رؤية نموذج تسجيل دخول عميق ومظلل بعناية ونموذج تسجيل في قالب CSS3 هذا.

هنا تحصل على نموذج تسجيل دخول رائع آخر لموقع الويب الخاص بشركتك مع خيار إخفاء/إظهار حقول تسجيل الدخول. سيمنحك تصميم Css/html/js المشفر جيدًا تحميلًا أفضل دون التلاعب بسرعة موقعك الحالية.

الحد الأدنى من نموذج تسجيل الدخول مع الرسوم المتحركة السائلة

رسم متحرك سلس لنموذج تسجيل الدخول يفتح قسم تسجيل الدخول عن طريق النقر على صورة أو زر حسب حاجتك.

نموذج تسجيل الدخول أضيق الحدود مع CSS

ستجد هنا واجهة مستخدم نموذج تسجيل الدخول غير الفاخرة والتي يتم وضعها على خلفية ملء الشاشة. سيوفر لك ملف التنزيل CSS وHTML لسهولة تنفيذ تسجيل الدخول هذا إلى موقع الويب الخاص بك.

نموذج تسجيل الدخول المتحركة

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

تسجيل دخول أنيق

هذه نسخة بسيطة من نموذج تسجيل الدخول يمكنك عرضها على موقع الويب الخاص بك حيث أن لها أيضًا تأثيرًا أقل على سرعة الموقع باستخدام الحد الأدنى من التعليمات البرمجية.

شاشة تسجيل الدخول هادئة

نموذج تسجيل دخول نظيف بخلفية متحركة مما يضفي إحساسًا بالاسترخاء على الصفحة بأكملها. قم بتنزيل القالب بأكمله بتنسيق ZIP من Codepen.

نموذج تسجيل الدخول والاشتراك

قم بدمج نموذج تسجيل الدخول والاشتراك المرن هذا في موقع الويب الخاص بك بسهولة. سيوفر لك الملف المضغوط مع هذا التنزيل قوالب CSS وHTML وJS. يتوفر أيضًا الاشتراك في وسائل التواصل الاجتماعي مع خيارات إظهار/إخفاء كلمة المرور لإدخال كلمة المرور بسهولة على الشاشة.

نموذج تسجيل الدخول مع إنشاء حساب

يعد نموذج تسجيل الدخول الذي يتم عرضه بتأثير التلاشي أمرًا ممتعًا للمشاهدة. لا يمكن رؤية هذا التأثير إلا في عدد قليل من نماذج تسجيل الدخول الحديثة. استخدم النقر فوقي لتغيير النموذج للتسجيل أو إنشاء النموذج.

يمكن تنزيل نموذج تسجيل الدخول البسيط ذو التصميم المسطح من الرابط أدناه. يتوفر التحقق من صحة HTML ويتم ضبطه في قالب تسجيل الدخول هذا.

الحد الأدنى من قالب النموذج لتسجيل الدخول

يتم التحقق من صحة البريد الإلكتروني وهذا القالب هو CSS وHTML خالص بدون وحدات jquery فاخرة.

نموذج الاشتراك/تسجيل الدخول

نموذج واحد لتسجيل الدخول إلى موقع الويب بالإضافة إلى خيار الاشتراك والتسجيل الذي يمكن قلبه بنقرة واحدة. على الرغم من أن منطقة الاشتراك تفتقد بعض الحقول المهمة، إلا أن هذا يعد نموذجًا أفضل مع جميع الميزات القوية.

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

يتم توفيره كملف PSD وكإصدار HTML/CSS مشفر بالكامل، حتى تتمكن من البدء في دمجه على الفور.

نموذج تسجيل الدخول (مشفر)

نموذج تسجيل دخول احترافي. يشتمل التنزيل على ملف PSD، وشعرت أيضًا برغبة في ترميزه، لذا قمت بتضمين ملفات xHTML وJs وCSS أيضًا.

نموذج تسجيل دخول بسيط باللون الأبيض

نموذج تسجيل دخول نظيف وبسيط مزود بزر إرسال دائري وحالات تركيز أنيقة.

ببساطة نموذج تسجيل الدخول

ببساطة، تم تصميم نموذج تسجيل الدخول باستخدام CSS3 فقط. يتم إنشاء النموذج باستخدام علامات بسيطة جدًا وتصميمه باستخدام خصائص CSS3 الأساسية جدًا.

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

قوالب تسجيل الدخول/التسجيل المجانية

نموذج تسجيل الدخول والتسجيل

اقتل عصفورين بحجر واحد... سيتحول النموذج من تسجيل الدخول للتسجيل والعودة، بناءً على ما إذا كان المستخدم "مسجلاً" بالفعل. ابحث عن المستخدمين "المسجلين" في لوحة js.

قالب نموذج تسجيل دخول بسيط مع واجهة مستخدم مسطحة...

Disqus مثل نموذج تسجيل الدخول

نموذج تسجيل دخول أنيق باستخدام HTML5 وCSS3

قالب نموذج تسجيل دخول نظيف وبسيط مع زر إرسال دائري وحالات تركيز أنيقة.

نموذج تسجيل دخول لطيف وبسيط

قالب نموذج تسجيل دخول HTML/CSS جميل وبسيط. يستخدم نظام تسجيل الدخول الخاص بـ WordPress.

قالب نموذج تسجيل الدخول CSS3

قالب نموذج تسجيل دخول Css3 مذهل مع استخدام ميزات html وcss فقط. قم بتنزيل واستخدام هذا كما تريد.

نموذج تسجيل الدخول لواجهة المستخدم المسطحة

تبديل النماذج المتحركة باستخدام jQuery

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

نموذج تسجيل دخول سهل باستخدام CSS3

قالب نموذج تسجيل دخول بسيط وسهل باستخدام HTML5 الأساسي وتحسينه باستخدام بعض تقنيات CSS3.

نموذج تسجيل الدخول النقي CSS

مربع تسجيل دخول منسدل بسيط وفعال

في هذه المقالة، ستتعلم كيفية إنشاء قالب نموذج تسجيل دخول منسدل ذو مظهر جيد باستخدام CSS3 وقليلًا من jQuery.

قالب نموذج تسجيل الدخول مع HTML وCSS

مجرد قالب نموذج تسجيل دخول بسيط ومسطح...

تسجيل الدخول

نموذج تسجيل الدخول لواجهة المستخدم المسطحة

تصميم نموذج تسجيل الدخول المخصص

في هذا البرنامج التعليمي، سنقوم بإنشاء بعض نماذج تسجيل الدخول الحديثة والإبداعية باستخدام بعض تقنيات CSS المثيرة للاهتمام وميزات HTML5.

نموذج تسجيل الدخول باستخدام PHP وJQuery وCSS3

إنشاء صفحة تسجيل دخول أنيقة باستخدام CSS3 وJquery + Ajax ومعالجتها بواسطة PHP.

نموذج تسجيل الدخول/التسجيل مع عداد المرور

نموذج تسجيل دخول يشبه Apple مع تحويلات CSS ثلاثية الأبعاد

سنرى في هذا البرنامج التعليمي كيف يمكننا استخدام التحويلات لإنشاء تأثير انعكاس مثير للاهتمام على نموذج مستوحى من Apple.

نموذج تسجيل الدخول (مشفر)

هذه الهدية الترويجية هي نموذج تسجيل دخول احترافي. يتضمن التنزيل ملف PSD وملفات xHTML وJs وCSS أيضًا. يمكنك استخدامه بأي طريقة تريدها. يتضمن بعض التأثيرات الرائعة باستخدام CSS3 وجافا سكريبت وآمل أن تستمتع به!

تسجيل الدخول

نموذج تسجيل الدخول باستخدام HTML5 وCSS3

هذا مثال لكيفية إنشاء نموذج تسجيل دخول بسيط باستخدام HTML5 وCSS3.

المرتجعات

الاستخدام

نمط الاستخدام

الافتراضي: الإعدادات الافتراضية

#2 اترك نفس الصفحة عند إدخال معلومات تسجيل دخول/كلمة مرور غير صحيحة

افتراضيًا، إذا تم إدخال سجل غير صحيح في مثل هذا النموذج، فسيتم إعادة توجيه المستخدم إلى صفحة التفويض الأساسية التي تشير إلى الخطأ.

لتغيير ذلك وإبقاء المستخدم على نفس الصفحة، حتى لو قام بإدخال بيانات غير صحيحة، يمكنك استخدام الخطاف wp_login_failed:

## يترك المستخدم في نفس الصفحة عند إدخال معلومات تسجيل دخول/كلمة مرور غير صحيحة في نموذج التفويض wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); الوظيفة my_front_end_login_fail($username) ( $referrer = $_SERVER["HTTP_REFERER"]; // من أين جاء الطلب // إذا كان هناك مُحيل وهذه ليست صفحة wp-login.php if(!empty($referrer ) && !strstr($إحالة،"wp-login") && !strstr($referrer،"wp-admin")) ( wp_redirect(add_query_arg("login"، "failed"، $referrer)); // إعادة التوجيه و إضافة معلمة استعلام؟ تسجيل الدخول = خروج فاشل ))

#3 نموذج التسجيل في ووردبريس

لا توجد وظيفة خاصة متوفرة لعرض استمارة التسجيل. لذلك، يمكن عرض النموذج عن طريق كتابة تعليمات HTML البرمجية الخاصة بك. فيما يلي مثال على كود HTML لنموذج التسجيل:

قائمة التغييرات

شفرة نموذج تسجيل الدخول Wp: wp-includes/general-template.php WP 5.2.3