#main width: 400px؛ الارتفاع: 50 بكسل ؛ الخلفية: # f2f2f2؛ الحشو: 6px 10px ؛ الحد: 1 بكسل × # b5b5b5 ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 #dfdede؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 #dfdede؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 # dfdede.  

الجزء المهم من الكود هنا هو الحدود بين دائرة نصف قطرها إعلان و مربع الظل إعلان. لإنشاء زوايا مستديرة ، استخدمنا إعلان نصف قطر CSS3 ، "-moz-" و "-webkit-" بادئات المتصفح استخدمت لضمان أن هذا يعمل في المتصفحات المستندة إلى gecko و webkit. قد تبدو إعلانات الظل المربع مربكة بعض الشيء ولكنها في الواقع بسيطة للغاية.

 box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 # dfdede. 

تفسير: هنا ، تحدد الكلمة الأساسية الداخلية ما إذا كان الظل سيكون داخل المربع. يشير أول صفرين إلى الإزاحة x والإزاحة y والإشارة 3px إلى التمويه. التالي هو إعلان اللون. لقد استخدمت قيم rgba هنا ؛ rgba لتقف على أحمر أخضر أزرق وألفا (التعتيم). وبالتالي ، فإن القيم الأربعة الموجودة داخل الأقواس تشير إلى مقدار اللون الأحمر والأخضر والأزرق وألفا (عتامة). ستلاحظ أن 5 مجموعات من إعلانات الظل تم ارتيادها معًا. يمكن القيام بذلك عن طريق فصلهم بفاصلة. يعرّف الظلالان الأوليان تأثير "التوهج الداخلي" الأبيض وتعطي التصريحات التالية المربع مظهرًا صلبًا / مكتنزة.

العب مع هذه القيم لفهم كيف يعمل.

معاينة

3. تصميم حقل الإدخال

الآن وبعد اكتمال الصندوق ، دعنا ننتقل إلى تصميم حقل الإدخال.

 input [type = "text"] float: left؛ العرض: 230 بكسل ؛ الحشو: 15px 5px 5px 5px ؛ أعلى هامش: 5 بكسل ؛ الهامش الأيسر: 3px ؛ الحدود: 1px صلب # 999999 ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ -moz-box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛ -webkit-box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛ box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛  

الأنماط المعلنة لحقل الإدخال متشابهة إلى حد كبير مع تلك المربعات للمربع الكبير #الأساسية. لقد استخدمنا نفس دائرة نصف قطرها الحدود (5px). مرة أخرى ، تم ارتجاج الظلال المتعددة.

 box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛ 

تفسير: ستلاحظ أنه في هذه المرة ، تم الاحتفاظ بطمس الظل عند 0 للحصول على ظل حاد ويستخدم إزاحة رأسية قدرها 5 بكسل. في التصريحات المتعاقبة ، تم الاحتفاظ بالتمويه عند 0px ولكن تم تغيير اللون والإزاحة y. مرة أخرى ، العب حول هذه القيم للحصول على نتائج مختلفة.

معاينة

4. تصميم زر الإرسال

دعونا نمط زر البحث.

 المدخلات [type = "submit"]. solid float: left؛ المؤشر: المؤشر ؛ العرض: 130 بكسل ؛ الحشو: 8px 6px ؛ الهامش الأيسر: 20 بكسل ؛ لون الخلفية: # f8b838 ؛ اللون: rgba (134 ، 79 ، 11 ، 0.8) ؛ تحويل النص: أحرف كبيرة ؛ وزن الخط: غامق ؛ الحدود: 1px صلب # 99631d ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ text-shadow: 0 1px 2px rgba (255، 255، 255، 0.7)، 0 -1px 0 rgba (64، 38، 5، 0.9)؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 5px 0 # b8882a، 0 6px 0 # 593a11، 0 13px 0 #ccc؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 5px 0 # b8882a، 0 6px 0 # 593a11، 0 13px 0 #ccc؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 5px 0 # b8882a، 0 6px 0 # 593a11، 0 13px 0 # مجلس التعاون الجمركي. -webkit- الانتقال: الخلفية 0.2s التخفيف.  

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

 text-shadow: 0 1px 2px rgba (255، 255، 255، 0.7)، 0 -1px 0 rgba (64، 38، 5، 0.9)؛ 

تفسير: في ال نص الظل الإعلان ، والقيم الرقمية الثلاثة الأولى هي إزاحة x ، إزاحة ص ، وطمس على التوالي. تشير قيم rgba إلى لون الظل. في المجموعة التالية من الإعلان (مفصولة بفاصلة) ، يتم إعطاء الإزاحة y قيمة -1. ويتم ذلك لإعطاء النص “الظل الداخلي” تأثير. تحتوي حالة التحويم / التركيز لزر الإرسال على قيم مختلفة من لون الخلفية والظلال.

معاينة

دولة "نشطة" لزر

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

 إدخال [نوع = "إرسال"]. صلب: نشط خلفية: # f6a000؛ الموقف: نسبي أعلى: 5px ؛ الحدود: 1px صلب # 702d00 ؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 3px 0 # b8882a، 0 4px 0 # 593a11، 0 8px 0 #ccc؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 3px 0 # b8882a، 0 4px 0 # 593a11، 0 8px 0 #ccc؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 3px 0 # b8882a، 0 4px 0 # 593a11، 0 8px 0 # مجلس التعاون الجمركي.  

كود (CSS) الكامل

هذا يكمل مجال البحث لدينا. لقد استخدمنا عددًا كبيرًا من ميزات CSS3 الجديدة. إليك CSS و HTML الكامل في حقل البحث هذا.

 #main width: 400px؛ الارتفاع: 50 بكسل ؛ الخلفية: # f2f2f2؛ الحشو: 6px 10px ؛ الحد: 1 بكسل × # b5b5b5 ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 #dfdede؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 #dfdede؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.8)، inset 0 2px 2px rgba (255، 255، 255، 1)، 0 5px 0 #ccc، 0 6px 0 # 989898، 0 13px 0 # dfdede.  الإدخال [type = "text"] float: left؛ العرض: 230 بكسل ؛ الحشو: 15px 5px 5px 5px ؛ أعلى هامش: 5 بكسل ؛ الهامش الأيسر: 3px ؛ الحدود: 1px صلب # 999999 ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ -moz-box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛ -webkit-box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛ box-shadow: inset 0 5px 0 #ccc، inset 0 6px 0 # 989898، inset 0 13px 0 #dfdede؛  الإدخال [type = "submit"]. solid float: left؛ المؤشر: المؤشر ؛ العرض: 130 بكسل ؛ الحشو: 8px 6px ؛ الهامش الأيسر: 20 بكسل ؛ لون الخلفية: # f8b838 ؛ اللون: rgba (134 ، 79 ، 11 ، 0.8) ؛ تحويل النص: أحرف كبيرة ؛ وزن الخط: غامق ؛ الحدود: 1px صلب # 99631d ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ text-shadow: 0 1px 2px rgba (255، 255، 255، 0.7)، 0 -1px 0 rgba (64، 38، 5، 0.9)؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 5px 0 # b8882a، 0 6px 0 # 593a11، 0 13px 0 #ccc؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 5px 0 # b8882a، 0 6px 0 # 593a11، 0 13px 0 #ccc؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 5px 0 # b8882a، 0 6px 0 # 593a11، 0 13px 0 # مجلس التعاون الجمركي. -webkit- الانتقال: الخلفية 0.2s التخفيف.  الإدخال [type = "submit"]. solid: hover، input [type = "submit"]. solid: focus background: # ffd842؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.9)، inset 0 2px 1px rgba (255، 250، 76، 0.8)، 0 5px 0 # d8a031، 0 6px 0 # 593a، 0 13px 0 #ccc؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.9)، inset 0 2px 1px rgba (255، 250، 76، 0.8)، 0 5px 0 # d8a031، 0 6px 0 # 593a11، 0 13px 0 #ccc؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.9)، inset 0 2px 1px rgba (255، 250، 76، 0.8)، 0 5px 0 # d8a031، 0 6px 0 # 593a11، 0 13px 0 # مجلس التعاون الجمركي.  إدخال [نوع = "إرسال"]. صلب: نشط خلفية: # f6a000؛ الموقف: نسبي أعلى: 5px ؛ الحدود: 1px صلب # 702d00 ؛ -moz-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 3px 0 # b8882a، 0 4px 0 # 593a11، 0 8px 0 #ccc؛ -webkit-box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 3px 0 # b8882a، 0 4px 0 # 593a11، 0 8px 0 #ccc؛ box-shadow: inset 0 0 3px rgba (255، 255، 255، 0.6)، inset 0 1px 2px rgba (255، 255، 255، 0.7)، 0 3px 0 # b8882a، 0 4px 0 # 593a11، 0 8px 0 # مجلس التعاون الجمركي.  

آمل أن تستمتع هذا البرنامج التعليمي. لا تتردد في تجربة هذه الميزات ولا تنس مشاركة أفكارك.

ملحوظة المحرر: هذا هو مكتوب من قبل بهاراني م ل Hongkiat.com. بهاراني مصمم / مطور من نيودلهي ، الهند.