דוגמה לחצן עם גלגול 1 ב-CSS

Rollover 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 ורוחב 100px שהם המידות של תמונות הרקע שלנו.
בלוק תצוגה;
כך שהוא מייצר ומכבד קופסה עם המידות שהצבנו לפני.

צבע: #990000
עם זה אנחנו נותנים רק צבע לטקסט שנמצא בתוך הקופסה שלנו.
קישוט טקסט: אין;
זה כדי להימנע מהקו שנמצא מתחת לקישורים.
ריפוד העליון: 5 פיקסלים;
כך שאני חוסך מקום של 5px בחלק העליון של הקישור שלנו ועם זה הוא מוריד את המיקום למרכז התיבה שלנו.
מודגש;
עושה את האותיות מודגשות
אז אתה רק צריך להוסיף מחלקות עבור האלמנטים הפסאודו "רחף" ו"פוקוס"
קוד:

# bot1 a: hover {
רקע-תמונה: url (bg_menu_2.jpg);
}
# bot1 to: focus {
רקע-תמונה: url (bg_menu_3.jpg);
}
אבל כפי שאנו מבינים, רק שינינו את הנתיב של תמונות הרקע שלנו כדי להשיג את האפקט שחיפשנו.
הקוד שלנו דוגמה לגלגול ב-CSS מוצג להלן:
קוד:








התחלה


ואת התמונות ניתן להוריד מעמוד זה, על ידי לחיצה ימנית על התמונה ושמירה בשם.