ה סגנונות חדשים שהוצגו ב- CSS3 נתן למקצוענים ברשת את האפשרות להוסיף לדפים שלהם אפקטים דמויי פוטושופ. אפקט חזותי אחד שתוכל להוסיף באמצעותו CSS3 זה להפוך דפי אינטרנט לאינטראקטיביים על ידי יצירת אזורים דהויים שנכנסים למוקד כאשר מבקר באתר עושה משהו, כמו לרחף מעל אותו אלמנט. אפקט זה משתמש בשילוב של אֲטִימוּת ומעבר.
שנה אטימות ברחף
אלמנט אינטראקטיבי אחד הוא שינוי אטימות של תמונה כאשר לקוח מרחף מעל אלמנט זה. לדוגמא זו (ה- HTML מוצג למטה), אנו משתמשים בתמונה עם תכונת class של greydout.
כדי להפוך אותו לאפור, הוסף את כללי הסגנון הבאים לגליון הסגנונות של CSS:
.greydout {
-אטימות webkit: 0.25;
אטימות מוז: 0.25;
אטימות: 0.25;
}
הגדרות אטימות אלה מתורגמות ל -25 אחוזים. משמעות הדבר היא שהתמונה תוצג כ 1/4 מהשקיפות הרגילה שלה. אטום לחלוטין ללא שקיפות יהיה 100 אחוז, בעוד 0 אחוז יהיה שקוף לחלוטין.
לאחר מכן, כדי לגרום לתמונה להתבהר (או ליתר דיוק, כדי להיות אטום לחלוטין) כאשר העכבר מרחף מעליה, תוסיף את הדברים הבאים:
.greydout: רחף {
-אטימות webkit: 1;
אטימות מוז: 1;
אטימות: 1;
}
התאמות אטימות נוספות
תבחין כי, לדוגמאות אלה, אנו משתמשים בגרסאות המקדימות של הספק של הכלל כדי להבטיח תאימות לאחור לגרסאות ישנות יותר של אותם דפדפנים. אמנם זה נוהג טוב,
כלל האטימות נתמך היטב על ידי דפדפנים, ובטוח להוריד את השורות המקדימות לספק.ובכל זאת, אין סיבה שלא לכלול קידומות אלה אם ברצונך להבטיח תמיכה בגרסאות דפדפן ישנות יותר. רק הקפד לפעול לפי המקובל הטוב ביותר של סיום ההצהרה בגרסה הרגילה והלא קידומת של הסגנון.
כאשר הוא נפרס באתר, התאמת אטימות זו היא שינוי פתאומי. ראשית, הוא אפור, ואז לא, ללא מצבי ביניים בין שני אלה. זה כמו מתג אור - מופעל או כבוי. זה אולי מה שאתה רוצה, אך ייתכן שתרצה להתנסות בשינוי הדרגתי יותר.
כדי להוסיף אפקט נחמד ולהפוך את זה לדעוך בהדרגה, הוסף את מַעֲבָר תכונה:
.greydout
class: .greydout {
-אטימות webkit: 0.25;
אטימות מוז: 0.25;
אטימות: 0.25;
-Webkit-מעבר: כל 3s קלות;
-מוז-מעבר: כל 3s קלות;
-ms-מעבר: כל 3s קלות;
-מעבר: כל 3s קלות;
מעבר: כל 3s קלות;
}