מעברים. יצירת אפקטים דהייה נחמד
מעצבי אתרים היו רוצים זמן רב יותר שליטה על הדפים שהם יוצרים כאשר CSS3 פגע בסצינה. סגנונות חדשים הציג ב CSS3 נתן מקצועני האינטרנט היכולת להוסיף Photoshop דמויי אפקטים לדפים שלהם. זה כולל מאפיינים כמו צללים נופלים וזוהר , פינות מעוגלות, ועוד. CSS3 גם הציג אנימציה דמוי אפקטים שניתן להשתמש בהם כדי ליצור אינטראקטיביות נחמד באתרים.
אחד האפקטים החזותיים נחמד מאוד אתה יכול להוסיף אלמנטים באתר האינטרנט שלך באמצעות CSS3 היא לגרום להם לדעוך פנימה והחוצה באמצעות שילוב של תכונות עבור אטימות ומעבר. זוהי דרך קלה נתמכת היטב כדי להפוך את הדפים שלך אינטראקטיביים יותר על ידי יצירת אזורים דהוי שמגיעים להתמקד כאשר מבקר באתר עושה משהו, כמו מרחף מעל אלמנט זה.
בואו נסתכל על כמה קל להוסיף את זה אפקט חזותי אינטראקציה אלמנטים שונים על דפי האינטרנט שלך ..
בואו לשנות את האטימות ב- Hover
נתחיל על ידי מבט כיצד לשנות את אטימות של תמונה כאשר הלקוח מרחף מעל אלמנט זה. בדוגמה זו (HTML מוצג למטה) אני משתמש בתמונה עם התכונה class של greydout.
כדי להפוך אותו לאפור, אנו מוסיפים את כללי הסגנון הבאים לגיליון הסגנונות של CSS:
.greydout {
-webkit- אטימות: 0.25;
-Moz-opacity: 0.25;
אטימות: 0.25;
}
הגדרות אטימות אלה מתורגמות ל -25%. פירוש הדבר שהתמונה תוצג כ 1/4 מהשקיפות הרגילה שלה. לגמרי אטום ללא שקיפות יהיה 100% בעוד 0% יהיה שקוף לחלוטין.
לאחר מכן, כדי להפוך את התמונה להתבהר (או ליתר דיוק, כדי להיות אטום לחלוטין), כאשר העכבר הוא מרחף מעל זה, היית מוסיף: רחף pseudo בכיתה:
.greydout: העבר {
-webקיט-אטימות: 1;
-Moz-opacity: 1;
אטימות: 1;
}
תבחין כי, עבור דוגמאות אלה, אני משתמש בגירסה prefixed גירסאות של הכלל כדי להבטיח תאימות לאחור עבור גרסאות ישנות יותר של דפדפנים אלה. אמנם זהו תרגול טוב, המציאות היא כי כלל אטימות נתמך כעת היטב על ידי דפדפנים וזה די בטוח ירידה אלה קווים ספקים הספק. עם זאת, אין גם סיבה שלא לכלול קידומות אלה אם ברצונך להבטיח תמיכה בגירסאות דפדפן ישנות יותר. רק כדי להיות בטוח בצע את הנוהג המקובל ביותר של סיום ההצהרה עם הרגיל, ללא קידומת גרסה של הסגנון.
אם אתה פורס את זה באתר, אתה תראה את זה הסתגלות אטימות הוא שינוי פתאומי מאוד. קודם זה אפור ואז זה לא, בלי מצבי ביניים בין שני אלה. זה כמו מתג אור - או כבוי. זה עשוי להיות מה שאתה רוצה, אבל ייתכן גם רוצה להתנסות עם שינוי כי הוא הדרגתי יותר.
כדי להוסיף אפקט נחמד באמת ולהפוך את זה לדעוך הדרגתית, אתה רוצה להוסיף את המאפיין המעבר בכיתה. גריידאוט:
.greydout {
-webkit- אטימות: 0.25;
-Moz-opacity: 0.25;
אטימות: 0.25;
-webkit- המעבר: כל הקלות 3;
-מעבר המעבר: כל הקלות 3;
-MS המעבר: כל הקלות 3;
- מעבר: כל הקלות 3;
המעבר: כל הקלות 3;
}
עם קוד זה, השינוי ישתנה בהדרגה ולא רק ישתנה בבת אחת.
שוב, אנו משתמשים במספר כללים מקודמים של הספק כאן. המעבר אינו נתמך היטב כמו אטימות, כך קידומות אלה לעשות הגיוני.
דבר אחד שכדאי לזכור כאשר אתם מתכננים אינטראקציות אלה הוא כי התקני מסך מגע אין מצב "לרחף", ולכן השפעות אלה הם איבדו לעתים קרובות על מישהו באמצעות מכשיר מסך מגע כמו טלפון סלולרי. המעבר יקרה לעתים קרובות, אבל זה קורה כל כך מהר, כי הם באמת לא ניתן לראות. זה בסדר אם אתה מוסיף את זה בתור אפקט בונוס נחמד, אבל למנוע כל שינוי שיש צורך לראות תוכן להיות מובן.
דהייה הוא אפשרי מדי
אתה לא צריך להתחיל עם תמונה דהוי, אתה יכול להשתמש מעברים ואטימות כדי לדעוך מתוך תמונה אטומה לחלוטין. שימוש באותה תמונה, רק עם מחלקה של withfadeout:
class = "withfadeout">
בדיוק כמו קודם, אתה משנה את האטימות באמצעות: בורר בריחוף:
.withfadeout {
-webkit- המעבר: כל 2-הקלות- out;
-מעבר המעבר: כל 2-הקלות- out;
-MS המעבר: כל 2-הקלות- out;
- מעבר: כל 2 הקלות- out;
מעבר: כל 2-in-out;
}
.withfadeout: העבר את העכבר {
-webkit- אטימות: 0.25;
-Moz-opacity: 0.25;
אטימות: 0.25;
}
בדוגמה זו, התמונה תעבור מאטום מלא לשקוף קצת - ההפך של הדוגמה הראשונה שלנו.
מעבר תמונות
זה מעולה כי אתה יכול ליישם אלה מעברים חזותיים דוהה לתמונות, אבל אתה לא מוגבל רק באמצעות תמונות עם אפקטים אלה CSS. אתה יכול בקלות להפוך לחצני CSS בסגנון כי לדעוך בעת לחיצה והחזיק. אתה פשוט להגדיר את אטימות באמצעות: pseudo בכיתה פעיל לשים את המעבר על הכיתה המגדיר את הכפתור. לחץ לחיצה ממושכת על לחצן זה כדי לראות מה קורה.
ניתן להפוך כל רכיב ויזואלי בעצם לדעוך כאשר מרחף מעל או לחץ על. בדוגמה זו אני משנה את האטימות של div ואת צבע הטקסט כאשר העכבר הוא מעל זה. הנה CSS:
#myDiv {
width: 280px;
צבע רקע: # 557A47;
צבע: #dfdfdf;
ריפוד: 10px;
-webkit- מעבר: כל 4s הקלות 0s;
-מעבר המעבר: כל הקלות 4s 0s;
-MS- מעבר: כל 4s הקלות 0s;
-המעבר: כל 4s הקלות 0s;
המעבר: כל הקלות של 4s 0s;
}
#myDiv: העבר {
-webkit- אטימות: 0.25;
-Moz-opacity: 0.25;
אטימות: 0.25;
צבע: # 000;
}
תפריטים ניווט יכול להפיק תועלת רקע דהייה צבעים
בתפריט ניווט פשוט זה, צבע הרקע נמוג לאט פנימה והחוצה כאשר אני מעביר את העכבר מעל לפריטי התפריט. הנה HTML:
- בית
- CSS3 הדרכות
- תכונות CSS3
והנה CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
הצג: inline;
צף: משמאל;
ריפוד: 5px 15px;
שוליים: 0 5px;
-webkit- מעבר: כל 2 ליניארי;
-מעבר המעבר: כל 2 ליניארי;
-מעבר-מעבר: כל 2 ליניארי;
- מעבר: כל 2 ליניארי;
מעבר: כל 2 ליניארי;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: העבר את העכבר {
צבע רקע: # DAF197;
}
תמיכה בדפדפן
כפי שכבר נגעתי כמה פעמים, סגנונות אלה יש תמיכה דפדפן טוב מאוד, אז אתה צריך להרגיש חופשי להשתמש בהם ללא חשש כלשהו. היוצא מן הכלל היחיד הוא גרסאות ישנות בהרבה של Internet Explorer, אך עם החלטת מיקרוסופט האחרונה לסיים את התמיכה בכל גירסאות IE מתחת ל -11, דפדפנים ישנים אלה הופכים פחות ופחות לבעיה - ובאופן מציאותי, אם דפדפן ישן יותר לראות את המעבר לדעוך, זה לא צריך להיות בעיה רצינית. כל עוד אתם מגבילים השפעות מסוג זה לאינטראקציות מהנות ואינכם מסתמכים עליהן על מנת להניע פונקציונליות או לחשוף תוכן מפתח, דפדפנים ישנים יותר שאינם תומכים בהשפעות יקבלו חוויה פחות מהנה, אך משתמשים בדפדפנים אלה לא יהיו אפילו יודע את ההבדל, במיוחד אם הם יכולים להשתמש באתר כרגיל ולקבל את המידע שהם צריכים.
כיף נוסף: להחליף שתי תמונות
הנה דוגמה כיצד לדעוך תמונה אחת לאחרת. השתמש ב- HTML:
ו CSS אשר עושה אחד שקוף לחלוטין בעוד השני הוא אטום לחלוטין ולאחר מכן להחליף את חילופי שני:
.swapMe img {-webkit- מעבר: כל 1s-out-out; -מעבר המעבר: כל 1-הקלות- out; -MS המעבר: כל 1-הקלות- out; - מעבר: כל 1-in-out; מעבר: כל 1-in-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -Moz-opacity: 1; אטימות: 1; }. swapMe: העבר את העכבר. swap1, .swap2 {-webkit-opacity: 0; -Moz-opacity: 0; אטימות: 0; }