דוגמה לכפתור עם גלגול 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);
}
אך כפי שאנו מבינים, שינינו רק את דרכם של תמונות הרקע שלנו כדי להשיג את האפקט שחיפשנו.
הקוד שלנו דוגמה להתהפכות ב- css מוצג להלן:
קוד:








התחלה


ואת התמונות ניתן להוריד מדף זה על ידי לחיצה ימנית על התמונה ושמירה כ.