שיפוע ליניארי CSS מוסבר בדוגמאות

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

תחביר

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

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

אם לא צוין כיוון, מעבר ברירת המחדל הוא מלמעלה למטה.

background: linear-gradient(red, yellow);

כדי השמאל r ight:

כדי להפוך אותו משמאל לימין, תוסיף פרמטר נוסף על תחילת linear-gradient()החל במילה כדי המציין את הכיוון:

background: linear-gradient(to right, red , yellow);

שיפוע אלכסוני :

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

הנה דוגמה לשיפוע החל משמאל למעלה:

 background: linear-gradient(to bottom right, red, yellow);

ניתן גם להשתמש בזוויות, כדי להיות מדויקים יותר בציון כיוון השיפוע:

background: linear-gradient(angle, colour-stop1, colour-stop2);

הזווית מוגדרת כזווית בין קו אופקי לקו השיפוע.

background: linear-gradient(90deg, red, yellow);

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

background: linear-gradient(red, yellow, green);

אתה יכול גם להשתמש בתחביר צבע אחר כמו RGB או קודי hex כדי לציין את הצבעים.

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

background: linear-gradient(to right,red 15%, yellow 15%);