01 מתוך 04
יצירת מעבר בין ליניארי ליניארי עם 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 יעבוד בדפדפנים שונים, עליך להשתמש בהרחבות דפדפן עבור רוב הדפדפנים ובמסנן עבור 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%);
Mozilla Extension -The-Mozoz- הרחבה עובד כמו המאפיין CSS3, רק עם -Moz- הרחבה. כדי לקבל את שיפוע לעיל עבור Firefox, לכתוב:
-Moz-linear-gradient (משמאל, # 999999 0%, #ffffff 100%);
הרחבת האופרה -ההרחבה מוסיפה הדרגות ל- Opera 11.1 ומעלה. כדי לקבל את שיפוע לעיל, לכתוב:
- ליניארי-שיפוע (שמאל, # 999999 0%, #ffffff 100%);
Webkit Extension -The -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 נקודות ימינה, 180deg נקודות למטה, ו 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 שאתה אוהב יותר מאלה, הודע לנו על כך .