יצירת מעבר בין ליניארי ליניארי עם CSS3
מחלקות לינאריות
הסוג הנפוץ ביותר של שיפוע תראה הוא שיפוע ליניארי של שני צבעים. פירוש הדבר כי שיפוע ינוע בקו ישר המשתנה בהדרגה מן הצבע הראשון השני לאורך אותו קו. התמונה בעמוד זה מציגה שיפוע שמאלי-ימני של # 999 (אפור כהה) ל- #fff (לבן).
ליניארי gradients הם הכי קל להגדיר, ויש להם את התמיכה ביותר בדפדפנים. גרסאות CSS לינאריות נתמכות ב- Android 2.3+, Chrome 1+, Firefox 3.6 ואילך, Opera 11.1+ ו- Safari 4+. Internet Explorer יכול להוסיף שיפוע באמצעות מסנן ותומך בהם בחזרה ל- IE 5.5. זה לא CSS3, אבל זה אופציה עבור תאימות בין דפדפן.
כאשר אתה מגדיר שיפוע אתה צריך להגדיר כמה דברים שונים:
- איזה סוג של שיפוע זה -
ליניאריאורדיאלי - איפה שיפוע צריך להתחיל
- איפה שיפוע צריך להפסיק
- מה הם צבעים ב שיפוע שבו הם צריכים להתחיל ולעצור
כדי להגדיר הדרגתיים ליניארי באמצעות CSS3, אתה כותב:
שיפוע ליניארי (זווית או בצד או בפינה, להפסיק צבע, להפסיק צבע)
- תחילה אתה מגדיר את סוג הדרגתי עם השם
ליניארי - משכיל. - לאחר מכן, אתה מגדיר את נקודות ההתחלה והסיום של מעבר הצבע באחת משתי דרכים:
זוויתשל הקו במעלות מ 0 עד 359, עם 0 מעלות הצבעה ישר למעלה. או עם הפונקציה "צד או פינה", כגוןשמאלה,ימין,בתחתית, וחלק עליון. אלה יוסברו בפירוט רב יותר בעמוד הבא. אם אתה משאיר אותם החוצה, שיפוע יזרמו מלמעלה למטה אל תחתית האלמנט. - לאחר מכן אתה מגדיר את עצירות הצבע. אתה מגדיר את עצירות הצבע עם קוד הצבעים ואחוז אופציונלי. האחוז אומר לדפדפן היכן על הקו להתחיל או לסיים עם צבע זה. ברירת המחדל היא למקם את הצבעים באופן שווה לאורך הקו. תוכלו ללמוד עוד על עצירות צבע בעמוד 3.
לכן, כדי להגדיר את שיפוע לעיל עם CSS3, אתה כותב:
שיפוע ליניארי (משמאל, # 999999 0%, #ffffff 100%);
וכדי להגדיר את זה כרקע של DIV אתה כותב:
divתמונת רקע: ליניארי-שיפוע (משמאל, # 999999 0%, #ffffff 100%;} הרחבות דפדפן עבור
כדי שה- Gradient יעבוד בדפדפנים שונים, עליך להשתמש בהרחבות דפדפן עבור רוב הדפדפנים ו- a מסנן עבור Internet Explorer 9 ומטה (למעשה 2 מסננים). כל אלה לוקחים את אותם מרכיבים כדי להגדיר את שיפוע (אלא שאתה יכול להגדיר רק 2 צבע gradients ב IE).
מסננים ותוספים של Microsoft-Internet Explorer הוא הכי מאתגר לתמוך, כי אתה צריך שלושה קווים שונים כדי לתמוך בגירסאות דפדפן שונות. כדי לקבל את צבע אפור עד שיפוע לבן היית כותב:
/ * IE 5.5-7 * /מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 9999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);
הרחבת מוזילה-ה -Moz- הארכה עובד כמו המאפיין CSS3, רק עם -Moz- סיומת. כדי לקבל את שיפוע לעיל עבור Firefox, לכתוב:
-Moz-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);
הרחבת אופרה-ה - הרחבה מוסיף הדרגתיים אופרה 11.1+. כדי לקבל את שיפוע לעיל, לכתוב:
- ליניארי-שיפוע (שמאל, # 999999 0%, #ffffff 100%);
הרחבת Webkit-ה -webkit- הארכה עובד הרבה כמו המאפיין CSS3. כדי להגדיר את מעבר הצבע שלמעלה עבור Safari 5.1+ או Chrome 10+, אתה כותב:
-webkit-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);
יש גם גרסה ישנה יותר של תוסף Webkit שעובד עם Chrome + 2 ו- Safari 4+. בו אתה מגדיר את סוג שיפוע כערך, ולא את שם המאפיין. כדי לקבל את שיפוע אפור עד לבן עם תוסף זה, לכתוב:
-webkit-gradient (ליניארי, שמאל למעלה, ימין למעלה, צבע להפסיק (0%, # 999999), צבע (100%, # ffffff)); מלא CSS3 ליניארית
לקבלת תמיכה מלאה בדפדפנים שונים כדי לקבל את שיפוע אפור עד לבן מעל תחילה עליך לכלול צבע מוצק חזרה עבור דפדפנים שאינם תומכים gradients, ואת הפריט האחרון צריך להיות בסגנון CSS3 עבור דפדפנים כי הם תואמים לחלוטין. אז, אתה כותב:
רקע: # 999999;רקע: -Moz-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);רקע: -webkit-gradient (לינארי, משמאל למעלה, ימין למעלה, צבע להפסיק (0%, # 999999), צבע (100%, # ffffff));רקע: -webkit-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);רקע: ליניארי-שיפוע (משמאל, # 999999 0%, #ffffff 100%);רקע: -ms-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms- מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);רקע: שיפוע לינארי (משמאל, # 999999 0%, #ffffff 100%);
הדפים הבאים במדריך זה מסבירים את החלקים של שיפוע ביתר פירוט, ואת הדף האחרון מצביע לך על כלי זה היא דרך מצוינת ליצור gradients CSS3 באופן אוטומטי.
ראה שיפוע לינארי בפעולה באמצעות CSS בלבד.
02 מתוך 04יצירת מעברים אלכסוניים - הזווית של מעבר הצבע
נקודות ההתחלה והעיכוב קובעות את זווית המעבר. רוב הליניארי ליניארי הם מלמעלה למטה או משמאל לימין. אבל אפשר לבנות שיפוע שזז על קו אלכסוני. התמונה בעמוד זה מציגה מעבר צבע פשוט שזז בזווית של 45 מעלות לאורך התמונה מימין לשמאל.
זוויות כדי להגדיר את קו הדרגתי
הזווית היא קו על מעגל דמיוני במרכז האלמנט. 0deg מציין, 90deg מצביע ימינה, 180 מעלות נקודות למטה, ו 270deg מצביע שמאלה. ניתן להגדיר כל זווית בין 0 ל 359 מעלות.
יש לציין כי בכיכר, זווית של 45 מעלות זזה מהפינה השמאלית העליונה לימין למטה, אבל במלבן נקודות ההתחלה והסיום נמצאות מעט מחוץ לצורה, כפי שניתן לראות בתמונה.
הדרך הנפוצה יותר להגדיר שיפוע אלכסוני היא להגדיר פינה, כגון למעלה מימין ואת שיפוע יעברו מן הפינה אל הפינה הנגדית. ניתן להגדיר את הפוסט ההתחלתי עם מילות המפתח הבאות:
- חלק עליון
- ימין
- בתחתית
- שמאלה
- מרכז
והם יכולים להיות משולבים להיות ספציפיים יותר, כגון:
- למעלה מימין
- שמאלי עליון
- מרכז הדף
- למטה מימין
- שמאל תחתון
- מרכז תחתון
- ימין למרכז
- במרכז השמאלי
הנה CSS עבור שיפוע דומה לזה בתמונה, אדום ללבן זז מהפינה הימנית העליונה לתחתית השמאלית:
רקע: ## 901A1C;background-image: -Moz-linear-gradient (מימין למעלה, # 901A1C 0%, # FFFFFF 100%);תמונת רקע: -webkit-gradient (ליניארי, ימין למעלה, שמאל למטה, צבע-להפסיק (0, # 901A1C), color-stop (1, #FFFFFF));רקע: -webkit-linear-gradient (מימין למעלה, # 901A1C 0%, #ffffff 100%);רקע: ליניארי-שיפוע (מימין למעלה, # 901A1C 0%, #ffffff 100%);רקע: -ms-linear-gradient (מימין למעלה, # 901A1C 0%, #ffffff 100%);רקע: ליניארי-שיפוע (ימין למעלה, # 901A1C 0%, #ffffff 100%);
ייתכן שיהיה שם לב כי אין מסנני IE בדוגמה זו. הסיבה לכך היא כי IE מאפשר רק שני סוגים של מסננים: מלמעלה למטה (ברירת המחדל) ומשמאל לימין (עם GradientType = 1 החלף).
ראה שיפוע ליניארי אלכסוני בפעולה באמצעות CSS בלבד.
03 מתוך 04צבע מפסיק
עם CSS3 ליניארי gradients, אתה יכול להוסיף צבעים מרובים על מעבר צבע שלך כדי ליצור אפילו fancier אפקטים. כדי להוסיף צבעים אלה, אתה מוסיף צבעים נוספים לסוף הנכס, מופרד באמצעות פסיקים. אתה צריך לכלול היכן על הקו הצבעים צריך להתחיל או לסיים גם כן.
מסנני Internet Explorer תומכים בשתי עצירות צבע בלבד, לכן בעת בניית שיפוע זה, עליך לכלול רק את הצבעים הראשונים והשני שברצונך להציג.
הנה CSS עבור מעל 3 צבע צבע:
רקע: #ffffff;רקע: -Moz-linear-gradient (משמאל, #ffffff 0%, # 901A1C 51%, #ffffff 100%);רקע (: 0%, # ffffff), Color-stop (51%, # 901A1C), color-stop (100%, # ffffff));רקע: -webkit-linear-gradient (שמאל, #ffffff 0%, # 901A1C 51%, # ffffff 100%);רקע: ליניארי-שיפוע (משמאל, #ffffff 0%, # 901A1C 51%, # ffffff 100%);רקע: -ms-linear-gradient (משמאל, #ffffff 0%, # 901A1C 51%, # ffffff 100%);מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = 'ffffff', endColorstr = '# ffffff', GradientType = 1);רקע: ליניארי-שיפוע (שמאל, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ראה שיפוע לינארי זה עם שלוש עצירות צבע בפעולה תוך שימוש ב- CSS בלבד.
04 מתוך 04הפוך שיפוע בניין קל יותר
ישנם שני אתרים אני ממליץ על מנת לעזור לך לבנות gradients, יש להם כל היתרונות והחסרונות להם, לא מצאתי בונה שיפוע שעושה הכל עדיין.
CSSזה מחולל הדרגתי הוא מאוד פופולרי כי זה מבצע בצורה דומה בוני שיפוע בתוכניות כמו Photoshop. אני גם אוהב את זה כי זה נותן לך את כל הרחבות CSS, לא רק Webkit ו מוזילה. הבעיה בגנרטור זה היא שהיא תומכת רק במעברי צבע אופקיים ואנכיים. אם אתה רוצה לעשות gradients אלכסוני, אתה צריך ללכת גנרטור אחרים אני ממליץ. מחוללגנרטור זה לקח לי קצת יותר להבין מאשר הראשון, אבל זה תומך לשנות את הכיוון אל אלכסוני. אם ידוע לך על מחולל CSS נוסף של Gradient שאתה אוהב יותר מאלה, הודע לנו על כך.
