CSS3 ליניארי Gradients [CSS3 טיפים]

מעבר צבע היא תוספת צבע נהדר תכונה CSS3. במקום להוסיף צבע אחד בלבד, אנו יכולים כעת להוסיף שילובי צבעים מרובים בבלוק הכרזה אחד ללא הסתמכות על תמונות, מה שעשוי להקטין את בקשת ה- HTTP באתר שלנו, המאפשר לטעון את האתר מהר יותר.

אם יש לך שיחק עם gradients ב CSS3 אתה כנראה מכיר את שתי השיטות: שיפוע רדיאלי ליניארי. פוסט של היום יהיה על האחרון.

יצירת Gradients

כמו המפרט אומר gradients ב CSS3 היא תמונה, אין לו תכונה מיוחדת כמו תוספת תכונה חדשה אחרת, ולכן הוא הכריז באמצעות תמונת רקע במקום זאת.

אם נסתכל על התחביר המלא עבור שיפוע, זה נראה קצת מרופדים, אשר עלול לגרום לבלבול עבור אנשים מסוימים.

 div background-image: -webkit-linear-gradient (למעלה, # FF5A00 0%, # FFAE00 100%); background-image: -Moz-linear-gradient (למעלה, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (למעלה, # FF5A00 0%, # FFAE00 100%); תמונת רקע: ליניארי-שיפוע (למעלה, # FF5A00 0%, # FFAE00 100%); תמונת רקע: ליניארי-שיפוע (למעלה, # FF5A00 0%, # FFAE00 100%);  

אז בואו לחפור לתוך כל חלק של התחביר אחד אחד כדי להפוך את הדברים ברורים יותר.

קודם כל, שיפוע לינארי הוא הכריז עם שיפוע לינארי () פונקציה. הפונקציה כוללת שלושה ערכים עיקריים. הערך הראשון מגדיר את נקודת המוצא של מעבר הצבע. תוכל להשתמש במילת מפתח תיאורית, כגון חלק עליון כדי להתחיל את מעבר הזרימה מן חלק עליון;

 div background-image: שיפוע לינארי (למעלה, # FF5A00, # FFAE00);  

קטע הקוד לעיל הוא הגרסה הרשמית מ- W3C ליצירת מעברי צבע. זה פשוט יותר די מובן מאליו וזה גם ליצור את שיפוע הבא.

אתה יכול גם להשתמש בתחתית לעשות את ההפך, או אחר ימין ו שמאלה.

אנחנו יכולים גם ליצור שיפוע אלכסוני באמצעות תואר כמו המיקום החל מדרג. הנה דוגמה:

 div background-image: שיפוע ליניארי (45deg, # FF5A00, # FFAE00);  

קטע הקוד שלמעלה ייצור את שיפוע הצבע הבא:

הערך השני של הפונקציה יספר צבע ראשון מידע שלה להפסיק את המיקום אשר כאמור באחוזים. עמדת עצירה למעשה הוא אופציונלי; הדפדפן חכם מספיק כדי לקבוע את המיקום הנכון, ולכן כאשר אנו לא מציינים את הצבע הראשון לעצור את הדפדפן ייקח 0% כמו ברירת המחדל.

בנוסף, הערך הבא הוא צבע שני שילוב. זה עובד כמו הערך הקודם, רק אם זה הצבע האחרון להחיל, ואנחנו לא ציין את להפסיק את המיקום, ערך 100% יילקח כברירת המחדל. עכשיו, בואו נסתכל על הדוגמה הבאה:

 div background-image: שיפוע לינארי (למעלה, # FF5A00 0%, # FFAE00 100%);  

את קטע מעל תיצור Gradient כמו שראינו קודם לכן (אין הבדל), אבל עכשיו אנו מציינים את הצבע להפסיק את המיקום;

עכשיו בואו לשנות את להפסיק צבע, והפעם נציין 50% עבור הצבע הראשון 51% עבור הצבע השני, ונראה איך זה מתברר;

 div background-image: שיפוע לינארי (למעלה, # FF5A00 50%, # FFAE00 51%);  

שקיפות

יוצר שקיפות ב שיפוע הוא גם אפשרי. כדי ליצור את האפקט שאנחנו צריכים לתרגם את הצבע hex לתוך rgba מצב ולהוריד את ערוץ אלפא.

 div background-image: שיפוע ליניארי (top, rgba (255,90,0,0.2), rgb (255,174,0,0.2));  

הקטע שלמעלה יפחית את עוצמת הצבע על ידי 20%, ואת שיפוע יסתדר ככה:

צבעים מרובים

אם אתה רוצה צבעים נוספים כדי להוסיף, פשוט להוסיף את הצבעים ליד אחר עם מפריד פסיק ולתת הדפדפן לקבוע כל מיקום להפסיק צבע.

 div background-image: שיפוע ליניארי (למעלה, אדום, כתום, צהוב, ירוק, כחול, אינדיגו, סגול);  

קטע הקוד לעיל ייצור את קשת הקשת הבאה.

תאימות לדפדפן

למרבה הצער, בזמן כתיבת שורות אלה, כל הדפדפנים הנוכחיים עדיין לא תומכים בתחביר הסטנדרטי. הם עדיין צריכים את הקידומת של הספק (-WebKit-, -moz-, -גברת- ו -o-). לכן, כך התחביר המלא מופיע כך:

 div background-image: -webkit-linear-gradient (למעלה, # FF5A00 0%, # FFAE00 100%); background-image: -Moz-linear-gradient (למעלה, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (למעלה, # FF5A00 0%, # FFAE00 100%); תמונת רקע: ליניארי-שיפוע (למעלה, # FF5A00 0%, # FFAE00 100%); תמונת רקע: ליניארי-שיפוע (למעלה, # FF5A00 0%, # FFAE00 100%);  

מצד שני, Internet Explorer, במיוחד גרסה 9 ומטה, רחוק מהתקן. מעבר הצבע IE9 ומתחת עם מסנן, אז אם אנחנו רוצים להוסיף שיפוע על הדפדפנים האלה, אנחנו צריכים לכתוב משהו כזה;

 div מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);  

ה מסנן יש מגבלות: ראשית, הוא אינו מאפשר יותר משלושה צבעים הוסיף, ויצירת אפקט השקיפות הוא גם קצת מסובך - זה לא מאפשר rgba, אבל ה- IE מסנן שימו #ARGB;

 div מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);  

הנה כלי כדי לעזור לך להמיר rgba ל #ARGB.

• הדגמה
• הורד מקור

כתיבת תחביר מהר יותר

כפי שניתן לראות לעיל, על מנת לשמור על תאימות מדורג בין דפדפנים, אנחנו צריכים להוסיף חמישה קווים נוספים של קודים אשר אינו יעיל.

ישנן דרכים רבות שאנו יכולים לעשות כדי לפשט את המשימה; כגון שימוש בקידומת ללא קידומת, Prefixr, LESS או Sass כדי לעזור לעבד את הקודים, אך מעל לכל, אנו ממליצים להשתמש בכלי זה, ColorZilla Gradient. כלי זה פשוט ליצור את כל הקודים הדרושים עבור gradients לעבוד בכל הדפדפנים.

מילים סופיות

היום דנו די הרבה על יצירת gradients, יש לנו הסתכל לתוך כל חלק של התחביר, יצירת אפקטים שקופים ושמירה על תאימות הדפדפן. אז, בשלב זה, אנו מקווים כי יש לך כבר הבנה טובה יותר בנושא.

יש עדיין הרבה דברים שאנחנו מתכננים לחקור על גרסאות CSS ב הודעות העתיד שלנו, אז להישאר מנגינה Hongkiat.com. לבסוף, תודה על קריאת הודעה זו, אנו מקווים שנהנית ממנה.

לקריאה נוספת

• קליפ דפדפן קרוס RGBA רקעים - לאה Vero
• תמונה CSS3 - W3.org
• מתי אוכל להשתמש ב- CSS3 Gradients - CanIUse.com