يتم التفاف منطقة الكتلة الأولى في علامة قسم حتى نتمكن من طرح المخطط جنبًا إلى جنب. يحتوي العمود الأيسر على كل هذه المدخلات: النص والبريد الإلكتروني وعنوان URL ورقم الهاتف. أثناء قيامك بالتبديل على هاتفك ، يجب أن تتكيف شاشة لوحة المفاتيح المحمولة بناءً على نوع الإدخال. هناك العديد من الأسباب الجيدة لدعم هذه الميزات للجوال نظرًا لأن الجميع يعمل على التنقل في هذه الأيام.
يمكن أن يحتوي عنصر textarea أيضًا على نص عنصر نائب معرف على الصفحة. يشبه هذا التصنيف الذي يختفي بمجرد قيام المستخدم بإدخال نص في الحقل. السمة التي لم يتم ترحيلها هي الإكمال التلقائي لأن textareas لا تملأ عادة المحتوى ذي الصلة.
ضوابط الشريط الجانبي أردت إنشاء هذا النموذج بحيث يستجيب بشكل مناسب لتغيير حجم نافذة العرض. عندما تكون النافذة ممتلئة بما فيه الكفاية ، فإن كلا من أعمدة الإدخال تطفو بجانب بعضها البعض. ولكن إذا تم تقليل العرض قليلاً ، فإن الشريط الجانبي الأيمن يسقط أسفل المحتوى الرئيسي.
وإليك HTML لمنطقة الشريط الجانبي:
مستلم: العاملين في الموقع رئيس تحرير قسم التقنية علاقات عامة الدعم العام هذا الكود في الواقع ليس مربكا للغاية. مجرد خيار بسيط حدد القائمة وبعض أزرار الاختيار. بالإضافة إلى ذلك ، بعد هذه الكائنات ، قمت بوضع زر إعادة التعيين وإرساله في نهاية القسم.
كل هذا يبدو جيدًا وجيدًا ، لذا دعنا ننتقل الآن إلى بعض خصائص CSS. هناك العديد من التخصيصات التي يمكنك تطبيقها عند العمل على عناصر النموذج. حاول ألا تغرق في التفكير أكثر من اللازم واستمتع!
الرسوم المتحركة مربع الظلال ستلاحظ أثناء قيامك بالبحث في كل عنصر من عناصر الإدخال الرئيسية التي قمت بتنشيط ظل خارجي ملون. يحتوي Google Chrome على خاصية مخطط تفصيلي تؤدي شيئًا مماثلاً ، ولكن ليس بشكل باهظ. هذا الجزء الصغير من الواجهة جذاب للزوار لأول مرة.
/ ** عناصر النموذج ** / # hongkiat-form box-sizing: border-box؛ # hongkiat-form .txtinput display: block؛ font-family: "Helvetica Neue"، Arial، sans-serif؛ نمط الحدود: الصلبة. عرض الحدود: 1px ؛ لون الحدود: الهامش السفلي: 20 بكسل ؛ حجم الخط: 1.55em ؛ الحشو: 11px 25px. الحشوة إلى اليسار: 55 بكسل ؛ العرض: 90 ٪ ؛ اللون: # 777 ؛ مربع الظل: 0 1px 3px rgba (0 ، 0 ، 0 ، 0.1) أقحم ؛ -moz-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset؛ -webkit-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset؛ انتقال: حدود 0.15 ثانية خطية 0 ثانية و 0 × 0 مربع خطية 0 ثانية ولون 0.15 ثانية خطية 0 ثانية ؛ -webkit-الانتقالية: حدود 0،15 ثانية خطية 0 ثانية و 0 0 ثانية من مربع-الظل 0 ثانية و 0 ثانية لونية 0 ثانية ؛ -moz-الانتقالية: 0.15 ثانية حدية 0 ثانية ، 0xs box-shadow 0.15s الخطية ، 0.15 ثانية خطية 0 ثانية ؛ -o-Transition: حد 0.15 ثانية خطية 0s ، 0xs box-shadow 0.15s خطية ، 0.15 ثانية خطية 0 ثانية ؛ # hongkiat-form .txtinput: focus color: # 333؛ لون الحدود: rgba (41 ، 92 ، 161 ، 0.4) ؛ box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset، 0 0 8px rgba (41، 92، 161، 0.6)؛ -moz-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset، 0 0 8px rgba (41، 92، 161، 0.6)؛ -webkit-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset، 0 0 8px rgba (41، 92، 161، 0.6)؛ الخطوط العريضة: 0 لا شيء ؛ من أجل استهداف كل عنصر نصي قمت باستخدام الفصل .txtinput. كل من خصائص الانتقال تعمل على الحدود ، وصندوق الظل ، واللون. أنا استخدم التحجيم مربع: الحدود مربع. في حاوية النموذج حتى لا تفسد الحشو تصميمنا المتجاوب.
اضطررت إلى نسخ هذه الأنماط نفسها وتعديلها قليلاً للنصوص. لقد غيرت بعض الحشو والهوامش ، وألقت أيقونة خلفية فريدة.
# hongkiat-form textarea display: block؛ font-family: "Helvetica Neue"، Arial، sans-serif؛ نمط الحدود: الصلبة. عرض الحدود: 1px ؛ لون الحدود: الهامش السفلي: 15 بكسل ؛ حجم الخط: 1.5em ؛ الحشو: 11px 25px. الحشوة إلى اليسار: 55 بكسل ؛ العرض: 90 ٪ ؛ الارتفاع: 180 بكسل ؛ اللون: # 777 ؛ مربع الظل: 0 1px 3px rgba (0 ، 0 ، 0 ، 0.1) أقحم ؛ -moz-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset؛ -webkit-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset؛ انتقال: حدود 0.15 ثانية خطية 0 ثانية و 0 × 0 مربع خطية 0 ثانية ولون 0.15 ثانية خطية 0 ثانية ؛ -webkit-الانتقالية: حدود 0،15 ثانية خطية 0 ثانية و 0 0 ثانية من مربع-الظل 0 ثانية و 0 ثانية لونية 0 ثانية ؛ -moz-الانتقالية: 0.15 ثانية حدية 0 ثانية ، 0xs box-shadow 0.15s الخطية ، 0.15 ثانية خطية 0 ثانية ؛ -o-Transition: حد 0.15 ثانية خطية 0s ، 0xs box-shadow 0.15s خطية ، 0.15 ثانية خطية 0 ثانية ؛ # hongkiat-form textarea: focus color: # 333؛ لون الحدود: rgba (41 ، 92 ، 161 ، 0.4) ؛ box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset، 0 0 8px rgba (40، 90، 160، 0.6)؛ -moz-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset، 0 0 8px rgba (40، 90، 160، 0.6)؛ -webkit-box-shadow: 0 1px 3px rgba (0، 0، 0، 0.1) inset، 0 0 8px rgba (40، 90، 160، 0.6)؛ الخطوط العريضة: 0 لا شيء ؛ # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-تكرار؛ مدخلات الشريط الجانبي تم تصميم أزرار الاختيار وعناصر القائمة بطريقة أبسط. يمكنك تطبيق تأثيرات التوهج الخارجي والظلال المسقطة المشابهة على هذه العناصر ، لكنها لا تبدو جيدة دائمًا. بدلاً من ذلك ، سيقوم المصممون بإنشاء واجهات مستخدم مخصصة وإرفاقها كصور خلفية. ولكن هذا قد يتطلب حلاً jQuery للحفاظ على الخيارات المعروضة بشكل صحيح.
span.radiobadge display: block؛ الهامش السفلي: 8 بكسل ؛ span.radiobadge label font-size: 1.2em؛ الحشو أسفل: 4px. select.selmenu font-size: 17px؛ اللون: # 676767 ؛ الحشو: 9px! الحدود: 1px صلب #aaa ؛ العرض: 200 بكسل ؛ لم أفعل الكثير لدفع هذه العناصر بعيدًا عن عناصر الإدخال الرئيسية. الكثير من الحشوات الإضافية مهمة لذا يشعر المستخدمون بالراحة من التفاعل مع النموذج. عندما يكون النص صغيرًا جدًا ، فقد يكون الأمر صراعًا فقط لملء كل جزء. احتفظ بخطك كبيرًا ، لكن ليس بحجمه الكبير بحيث يغمر الصفحة.
أزرار مخصصة تم تصميم أزرار إعادة الضبط وإرسال في فئة خاصة بهم. لقد بنيت مجموعة من التدرجات الضوئية لتتناسب بشكل جيد مع النقاط الزرقاء في حقول النموذج.
فيما يلي رمز CSS الخاص بي لزر الإرسال في الحالة القياسية وحالة التحويم.
#buttons #submitbtn display: block؛ تعويم: اليسار؛ الارتفاع: 3 م ؛ الحشو: 0 الحدود: 1px الصلبة. الخطوط العريضة: 0؛ وزن الخط: غامق ؛ حجم الخط: 1.3em ؛ اللون: # ff؛ text-shadow: 0px 1px 0px # 222؛ الفضاء الأبيض: nowrap. كلمة التفاف: عادي. محاذاة رأسية: وسط المؤشر: المؤشر ؛ -Moz-border-radius: 2px ؛ -Webkit-border-radius: 2px؛ نصف قطر الحدود: 2 بكسل ؛ لون الحدود: # 5e890a # 5e890a # 000؛ -moz-box-shadow: inset 0 1px 0 rgba (256،256،256، .35)؛ -ms-box-shadow: inset 0 1px 0 rgba (256،256،256، .35)؛ -webkit-box-shadow: inset 0 1px 0 rgba (256،256،256، .35)؛ box-shadow: inset 0 1px 0 rgba (256،256،256، .35)؛ لون الخلفية: rgb (226،238،175) ؛ خلفية الصورة: - التدرج الخطي (أعلى ، rgb (226،238،175) 3٪ ، rgb (188،216،77) 3٪ ، rgb (144،176،38) 100٪) ؛ صورة خلفية: -تدرج ويب (خطي ، أعلى اليسار ، أسفل اليسار ، توقف لون (3٪ ، rgb (226،238،175)) ، توقف ألوان (3٪ ، rgb (188،216،77)) ، توقف ألوان (100 ٪، RGB (144،176،38)))؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، rgb (226،238،175) 3٪ ، rgb (188،216،77) 3٪ ، rgb (144،176،38) 100٪)؛ خلفية الصورة: -o-linear-gradient (top، rgb (226،238،175) 3٪، rgb (188،216،77) 3٪، rgb (144،176،38) 100٪)؛ خلفية الصورة: -ms-linear-gradient (top، rgb (226،238،175) 3٪، rgb (188،216،77) 3٪، rgb (144،176،38) 100٪)؛ صورة خلفية: التدرج الخطي (أعلى ، rgb (226،238،175) 3٪ ، rgb (188،216،77) 3٪ ، rgb (144،176،38) 100٪)؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf"، endColorstr = "# 90b026"، GradientType = 0)؛ #buttons #submitbtn: hover، #buttons #submitbtn: active border-colour: # 7c9826 # 7c9826 # 000؛ اللون: # ff؛ -moz-box-shadow: inset 0 1px 0 rgba (256،256،256،0.4)، 0 1px 3px rgba (0،0،0،0.5)؛ -ms-box-shadow: inset 0 1px 0 rgba (256،256،256،0.4)، 0 1px 3px rgba (0،0،0،0.5)؛ -webkit-box-shadow: inset 0 1px 0 rgba (256،256،256،0.4)، 0 1px 3px rgba (0،0،0،0.5)؛ box-shadow: inset 0 1px 0 rgba (256،256،256،0.4)، 0 1px 3px rgba (0،0،0،0.5)؛ الخلفية: rgb (228،237،189) ؛ الخلفية: - التدرج الخطي (أعلى ، rgb (228،237،189) 2٪ ، rgb (207،219،120) 3٪ ، rgb (149،175،54) 100٪) ؛ الخلفية: - التدرج اللوني (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (2٪ ، rgb (228،237،189)) ، توقف اللون (3٪ ، rgb (207،219،120)) ، توقف اللون (100٪ ، rgb ( 149،175،54)))؛ الخلفية: - تدرج خطي-الويب (أعلى ، rgb (228،237،189) 2٪ ، rgb (207،219،120) 3٪ ، rgb (149،175،54) 100٪) ؛ الخلفية: - التدرج الخطي (أعلى ، rgb (228،237،189) 2٪ ، rgb (207،219،120) 3٪ ، rgb (149،175،54) 100٪) ؛ الخلفية: -ms-linear-gradient (top، rgb (228،237،189) 2٪، rgb (207،219،120) 3٪، rgb (149،175،54) 100٪)؛ الخلفية: التدرج الخطي (أعلى ، rgb (228،237،189) 2٪ ، rgb (207،219،120) 3٪ ، rgb (149،175،54) 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd"، endColorstr = "# 95af36"، GradientType = 0)؛ يكاد يكون من المستحيل الحفاظ على هذا النوع من المحدد نظيفًا! هناك العديد من الخصائص التي تحتاج إلى سردها ودعم العديد من المتصفحات القديمة القديمة. يمكن لـ Internet Explorer تقديم هذه التدرجات مع عامل التصفية المناسب. لاحظ بصرف النظر عن تدرجات الخلفية التي قمت بتضمينها أيضًا لون حدود جديدًا وزوايا مستديرة وظل صندوقي على التحويم.
يبدو زر إعادة الضبط مشابهاً لكني سلكت طريقًا مختلفًا تمامًا باستخدام نظام الألوان. يميل اللون الرمادي الفاتح إلى الانخفاض في الخلفية مقارنة بالألوان الخضراء الزاهية. من المحتمل ألا يستخدم زر إعادة الضبط كثيرًا ، لذا فهو لا يحتاج إلى كل الاهتمام.
#buttons #resetbtn display: block؛ تعويم: اليسار؛ اللون: # 515151 ؛ text-shadow: -1px 1px 0px #fff؛ الهامش الأيمن: 20 بكسل ؛ الارتفاع: 3 م ؛ الحشو: 0 الخطوط العريضة: 0؛ وزن الخط: غامق ؛ حجم الخط: 1.3em ؛ الفضاء الأبيض: nowrap. كلمة التفاف: عادي. محاذاة رأسية: وسط المؤشر: المؤشر ؛ -Moz-border-radius: 2px ؛ -Webkit-border-radius: 2px؛ نصف قطر الحدود: 2 بكسل ؛ لون الخلفية: #fff؛ خلفية الصورة: - التدرج الخطي (أعلى ، rgb (255،255،255) 2٪ ، rgb (240،240،240) 2٪ ، rgb (222،222،222) 100٪) ؛ خلفية الصورة: - التدرج اللوني (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (2٪ ، rgb (255،255،255)) ، توقف اللون (2٪ ، rgb (240،240،240)) ، توقف اللون (100٪ ، RGB (222222222)))؛ خلفية الصورة: - التدرج اللوني بخفة الويب (أعلى ، rgb (255،255،255) 2٪ ، rgb (240،240،240) 2٪ ، rgb (222،222،222) 100٪) ؛ خلفية الصورة: - الانحدار الخطي (أعلى ، rgb (255،255،255) 2٪ ، rgb (240،240،240) 2٪ ، rgb (222،222،222) 100٪) ؛ خلفية الصورة: -ms-linear-gradient (top، rgb (255،255،255) 2٪، rgb (240،240،240) 2٪، rgb (222،222،222) 100٪)؛ صورة خلفية: التدرج الخطي (أعلى ، rgb (255،255،255) 2٪ ، rgb (240،240،240) 2٪ ، rgb (222،222،222) 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff"، endColorstr = "# dedede"، GradientType = 0)؛ الحدود: 1px صلب # 969696 ؛ box-shadow: 0 1px 2px rgba (144، 144، 144، 0.4)؛ -moz-box-shadow: 0 1px 2px rgba (144، 144، 144، 0.4)؛ -webkit-box-shadow: 0 1px 2px rgba (144، 144، 144، 0.4)؛ text-shadow: 0 1px 1px rgba (255، 255، 255، 0.75)؛ #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255، 255، 255، 0.75)؛ اللون: # 818181 ؛ لون الخلفية: #fff؛ خلفية الصورة: - التدرج الخطي (أعلى ، rgb (255،255،255) 2٪ ، rgb (244،244،244) 2٪ ، rgb (229،229،229) 100٪)؛ الخلفية - الصورة: - التدرج اللوني (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (2٪ ، rgb (255،255،255)) ، توقف اللون (2٪ ، rgb (244،244،244)) ، توقف اللون (100٪ ، RGB (229229229)))؛ صورة خلفية: - تدرج خطي -Webkit (تدرج ، rgb (255،255،255) 2٪ ، rgb (244،244،244) 2٪ ، rgb (229،229،229) 100٪) ؛ خلفية-الصورة: -o-linear-gradient (top، rgb ( 255،255،255) 2٪ ، rgb (244،244،244) 2٪ ، rgb (229،229،229) 100٪)؛ خلفية الصورة: -ms-linear-gradient (top، rgb (255،255،255) 2٪، rgb (244،244،244) 2٪، rgb (229،229،229) 100٪)؛ صورة خلفية: التدرج الخطي (أعلى ، rgb (255،255،255) 2٪ ، rgb (244،244،244) 2٪ ، rgb (229،229،229) 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff"، endColorstr = "# e5e5e5"، GradientType = 0)؛ لون الحدود: #aeaeae ؛ box-shadow: inset 0 1px 0 rgba (256،256،256،0.4)، 0 1px 3px rgba (0،0،0،0.5)؛ يمكنك أيضًا إسقاط نوع إعادة الضبط واستخدام نظام الألوان الأبيض / الرمادي كزر إرسال رئيسي. لقد استخدمت العديد من نفس أنماط التدرج وتأثيرات الظل المسقطة ، جنبًا إلى جنب مع نص الظل للتسمية الداخلية. بالتأكيد يوفر شعور مختلف لتجربة المستخدم.
تغييرات تخطيط الاستجابة عند الانتقال إلى ملف CSS الآخر الخاص بي ، يمكننا إلقاء نظرة على استفسارات الوسائط المتجاوبة البسيطة التي أعددتها. ستواجه أي نافذة متصفح أعلى من 800 بكسل واجهة الشريط الجانبي الكاملة. عندما تحصل على أقل من هذا الحد ، يتوسع العمود الأيسر إلى عرض 100٪ وترى عناصر الشريط الجانبي منسدلة أدناه.
media screen و (max-width: 800px) body padding: 10px 15px؛ #container width: 100٪؛ # hongkiat-form #aligned width: 100٪؛ تعويم: لا شيء ؛ العرض محجوب؛ # hongkiat-form #aside width: 100٪؛ العرض محجوب؛ تعويم: لا شيء ؛ # hongkiat-form .txtinput ، # hongkiat-text textarea width: 85٪؛ #prioritycase float: left؛ العرض محجوب؛ #recipientcase float: left؛ العرض محجوب؛ الهامش الأيمن: 55 بكسل ؛ كلما اقتربنا من الحجم ، أحاول تكييف كل نموذج من أشكال المدخلات. يمكن أن تنتهي خاصية العرض لفترة أطول من صفحة الويب نفسها ومن ثم لدينا نماذج للإدلاء بها على الحافة. يحدث هذا في حوالي 550 بكسل وهو المكان الذي أقوم فيه باستعلام الاستعلام التالي ، إلى جانب كل من دقة شاشة عرض iPhone للصورة والمناظر الطبيعية.
/ * شاشة أصغر للإسقاط ******* /media فقط الشاشة و (الحد الأقصى للعرض: 550 بكسل) # hongkiat-form .txtinput، # hongkiat-form textarea width: 80٪؛ / * iPhone Landscape ******** /media فقط الشاشة و (الحد الأقصى للعرض: 480 بكسل) body padding: 10px 0px؛ select.selmenu width: 190px؛ / * iPhone portrait ******* /media فقط الشاشة و (الحد الأقصى للعرض: 320 بكسل) body padding: 10px 0px؛ # hongkiat-form .txtinput ، # hongkiat-text textarea width: 70٪؛ # hongkiat-form #aligned overflow: hidden؛ select.selmenu width: 160px؛ #recipientcase margin-right: 30px؛ وضع أفقي أفقي لا يزال يحمل كل شيء معا بشكل جيد للغاية. لقد جعلت قائمة الاختيار المنسدلة أرق قليلاً لتوفير مساحة لأزرار الاختيار. في عرض الصورة ، قمت بتغيير حجم جميع العناصر إلى عروض أصغر بكثير. الآن لن يتم كسر الكود الخاص بنا حتى في نوافذ المتصفح التي تم تغيير حجمها. لكن من الجيد أن يكون لديك دعم للهواتف الذكية iOS / Android أيضًا.
استنتاج آمل أن يكون هذا البرنامج التعليمي مفيدًا في شرح مقدار ما يمكن القيام به على نماذج الويب الخاصة بك. تعد خصائص CSS3 الجديدة قوية بدرجة تكفي لإنشاء رسوم متحركة تعمل بكاملها مع بضعة أسطر من التعليمات البرمجية. إنه حقًا وقت مثير للعمل في تطوير الويب واتباع هذه الاتجاهات.
إذا كانت لديك أفكار أو اقتراحات بشأن الكود التعليمي ، فلا تتردد في مشاركتها معنا عبر مربع التعليقات أدناه.
