تلميح على شبكة الإنترنت : إنشاء قابلة لاعادة الاستخدام "زر" من الدرجة الاولى

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

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

التدرج خلفية لزر

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

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

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

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

حفظ المستند إلى (الغريب ، بابوا غينيا الجديدة - 24 غالبا ما يكون أفضل مسبقا لمثل هذه الصور. اعلى جودة ، أدنى حجم الملف). باستخدام اصطلاح التسمية الذكية مثل "الزر - bg.png". تأكد من حفظ لهذه الشعبة ، الذي يعرف متى قد ترغب في الانتقال للعودة الى هناك وتغيير الألوان ، وتحديد المواقع في الانحدار ، أو أي تفاصيل أخرى خفية.

المغلق لزر

الآن سنحتاج لاقامة بعض المغلق لطبقتنا عامة الزر الذي يستخدم هذه الخلفية الجديدة. سنستخدم فئة ". الزر". بسيطة ، واضحة ، وعامة. ان رمز ذكية. نحن لا نريد أن نفعل أي شيء لمحددة مثل "# # mainContent قيمة الأصول الصافية لى a.button" ، وذلك لأن بيت القصيد من هذا هو أن الطبقة هو عام وreseable أي مكان في الصفحة.

هنا هو كيف ستقيم هذه الفئة :

.button { background: url(images/button-bg.png) repeat-x top center #650606; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; color: white; font-weight: bold; font-size: 12px; text-align: center; } .button:hover { background: white; border: 1px solid red; color: black; } 

نجاح باهر أن قليلا من الفم المغلق لبيان هاه؟ كل شيء من المهم على الرغم من. دعنا نذهب من خلال كل سمة.

• خلفية : هذا هو المكان الذي نطبق صورة متدرجة أنشأنا. لاحظت "كبار" الإعداد ، والذي يحافظ عليه عموديا محاذاة إلى أعلى الزر وأن يكرر الصورة أفقيا مع "تكرار العاشر". تلاحظ أيضا أن هناك عرافة رمز أعلن للون الخلفية. يتم تعيين هذه القيمة لنفس لون القاع جدا من الصورة الانحدار. فقط في حالة هذا الزر ينمو اطول من الصور ، سوف يكون لطيف واصلت اللون.
• الحدود : وحيد بكسل الحدود بيضاء يطبق هنا. اذا كان لدينا أكثر من الزر الأبيض ، وهذا سيكون غير مرئي ، ولكن منذ أن كنت تريد استخدام لون الحدود على الدولة تحوم ، فإن الدولة بحاجة الى الحدود العادية جدا. على خلاف ذلك ، سيكون هناك طفيف "القفزة" التي تحوم حول أمر غير مرغوب فيه. الأنماط المقبلتين هي لجولة زوايا على زر. الأولى هي محددة لمتصفحات موزيلا القائم (فايرفوكس ، فلوك...) ، والثاني هو محددة لبكت ومقرها المتصفحات (سفاري ، كونكيورر...). المتصفحات الأخرى (أي) لن ترى تدوير الزاوية ، ولكن لا ضرر ولا وجود مؤامرة.
• الحشو : وهذا أمر حيوي للحفاظ على النص بعيدا عن حواف زر. يعطي زر بعض الجسم. يجعل من مثل زر وأسهل من فوق.
• اللون : لدينا خلفية داكنة اللون الأحمر ، وذلك لجعل النص حتى تظهر ، والأبيض هو جيد. فقط في حالة الصور يتم إيقاف على المتصفح ، فإن الخلفية لدينا زر لا يزال احمر داكن بسبب وضعناها في هذا الزر كذلك ، حتى بيضاء هنا هي آمنة تماما.
• Font-size/weight/text-align : جذاب النفس كثيرا تفسيرية هنا. عادة أنا لا يمكن أن حجم النص في مقصف القيم ، ولكن في حالة وجود زر ، مما يجعل أن لا تغيير حجم المقبل ، قادرة في أي 6 قد تكون مثالية من أجل التناسق.
• تحوم : هذا هو ما هو ضروري لجعل الزر في الواقع يشعر وكأنه زر. أزرار تفعل شيئا عندما يتم ترحيلها. إرادتنا على الفور التبديل إلى خلفية بيضاء مع نص أسود وأحمر مع الحدود. صارخ جدا ، ومن الواضح جدا زر واحدة.

باستخدام مفتاحنا في القانون

لأن لدينا طبقة وذلك هو عام ، يمكننا استخدامه في أي مكان!

رأ العادية 'التشعبي :

 <a href="/home" class="button">Go Back Home</a> 

حقا ارتباط طويل :

 <a href="/contact" class="button">Visit The General Contact Form Page</a> 

زر :

 <input type="submit" class="button">Submit</input>