مثال زر مع تمرير 1 في CSS

تمرير 1 CSS
في هذا المثال ، يجب أن يكون لدينا 3 صور تعمل على النحو التالي ؛
راحة

على

تم القبض عليه

ثم في جسم موقعنا لدينا هذا
شفرة:


البدء

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

# bot1 {
الحد: 0 0 0 0 ؛
حشوة: 0 ؛
محاذاة النص: مركز ؛
}
حيث نقول إننا لا نريد الهامش الخارجي والداخلي ، نقوم بمحاذاة النص إلى المركز ، نواصل الآن هذا الكود:
شفرة:

# bot1 إلى {
صورة الخلفية: url (bg_menu_1.jpg) ؛
موضع الخلفية: أعلى الوسط ؛
الارتفاع: 30 بكسل ؛
العرض: 100 بكسل ؛
العرض محجوب؛
اللون: # 990000 ؛
زخرفة النص: لا شيء ؛
أعلى الحشو: 5 بكسل ؛
تكرار الخلفية: لا تكرار ؛
وزن الخط: عريض ؛
}
إنه عمليا الشخص الذي يفعل كل شيء ، دعنا نرى سطرا سطرا
صورة الخلفية: url (bg_menu_1.jpg) ؛
بهذا نقول إننا نريد صورة خلفية ونعطي مسار هذا
موضع الخلفية: أعلى الوسط ؛
بهذا نشير إلى أن موضع صورة الخلفية سيتركز وأعلى.
تكرار الخلفية: لا تكرار ؛
بحيث لا تتكرر الخلفية وكأنها نمط.
الارتفاع: 30 بكسل ؛
العرض: 100 ؛
نقول له أن الارتفاع سيكون 30 والعرض 100 بكسل وهما أبعاد صور الخلفية لدينا.
العرض محجوب؛
بحيث يولد ويحترم صندوقًا بالإجراءات التي وضعناها من قبل.

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

# bot1 a: مرر {
صورة الخلفية: url (bg_menu_2.jpg) ؛
}
# bot1 إلى: التركيز {
صورة الخلفية: url (bg_menu_3.jpg) ؛
}
ولكن كما ندرك ، قمنا فقط بتغيير مسار صور الخلفية لتحقيق التأثير الذي كنا نبحث عنه.
رمز مثال التمرير في المغلق ظاهر أدناه:
شفرة:








البدء


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