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

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

בואו נתחיל שוב ב- HTML מינימלי שמכיל רק כותרת ו- div:

<body>
   <h1>Gradients!</h1>
   <div id="div-grad">
      Here is a colorful div!
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
   </div>
</body>

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

גרדיאנט אנכי

כעת, נעבור ל-CSS. גם הפעם נגדיר את ה- property של background, כיוון שאנו רוצים לקבוע את צבע הרקע של ה- div, אבל הפעם, במקום להשתמש בצבע בודד, נשתמש בפונקציה linear-gradient:

#div-grad
{
   background: linear-gradient(green, red);
}

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

 

 

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

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

בואו נראה דוגמה נוספת, אבל הפעם נגדיר את הצבעים באמצעות הפונקציה rgb:

#div-grad
{
   background: linear-gradient(
      rgb(156, 255, 73),
      rgb(73, 156, 255));
}

והתוצאה:

 

 

ושוב, מקבלים גרדיאנט אנכי, מאוד עדין ונעים לעין.

קביעת הזווית של הגרדיאנט

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

חשוב להבין שהזווית נמדדת מציר ה- Y עם כיוון השעון. הנה כמה דוגמאות כדי להמחיש זאת:

 

 

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

#div-grad
{
   background: linear-gradient(
      180deg,
      rgb(156, 255, 73),
      rgb(73, 156, 255));
}

שימו לב שיש לכתוב את המילה deg מייד לאחר ערכה של הזווית. התוצאה:

 

 

קיבלנו בדיוק את הרקע אשר קיבלנו כאשר לא הגדרנו זווית כלל, וזה כיוון שהגדרנו זווית של 180°, שהוא הערך של ברירת המחדל.

בואו נשנה את הזווית ל- 0°:

#div-grad
{
   background: linear-gradient(
      0deg,
      rgb(156, 255, 73),
      rgb(73, 156, 255));
}

 

 

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

עבור זווית של 20°:

#div-grad
{
   background: linear-gradient(
      20deg,
      rgb(156, 255, 73),
      rgb(73, 156, 255));
}

מקבלים:

 

 

זוויות מוגדרות מראש

עבור הכיוונים הראשיים (למעלה, למטה, שמאלה וימינה), כמו גם עבור האלכסונים, לא חייבים להגדיר את הזווית בערך מספרי של מעלות, ואפשר להשתמש באחת מהזוויות המוגדרות מראש.
אם, למשל, נרצה שכיוון הגרדיאנט יהיה שמאלה, במקום להגדיר זווית של 90°- (או של 270°), נוכל להשתמש במילה to left, שהיא זווית שמוגדרת מראש:

#div-grad
{
   background: linear-gradient(
      to left,
      rgb(156, 255, 73),
      rgb(73, 156, 255));
}

והתוצאה:

 

 

באופן דומה, אפשר להשתמש גם בערכים: to right, to top, to bottom.

אם נרצה גרדיאנט בזווית של 45°, נוכל להשתמש בערכים הבאים:
to top right, to top left, to bottom right, to bottom left.

בואו נראה, למשל, גרדיאנט שכיוונו שמאלה ולמטה:

#div-grad
{
   background: linear-gradient(
      to bottom left,
      rgb(156, 255, 73),
      rgb(73, 156, 255));
}

ומקבלים:

 

 

גרדיאנט עם שקיפות

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

#div-grad
{
   background: linear-gradient(
      to top left,
      rgba(156, 255, 73, 0),
      rgba(156, 255, 73, 1));
}

ומקבלים:

 

 

אפשר אפילו לכסות תמונת רקע עם גרדיאנט בעל שקיפות. כדי לעשות זאת, ניתן שני ערכים ל- property של background:

  • הגרדיאנט
  • התמונה

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

#div-grad
{
   background: linear-gradient(
      to bottom right,
      rgba(156, 255, 73, 1),
      rgba(156, 255, 73, 0)),
      url("./backgrounds/pexels-jaime-reimer-2662116.jpg");
      background-size: contain;
      background-repeat: no-repeat;
}

והתוצאה שמתקבלת:

 

 

גרדיאנט של שלושה צבעים

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

#div-grad
{
   background: linear-gradient(
      to bottom,
      rgba(156, 255, 73, 0.5),
      rgba(73, 156, 255, 0.5),
      rgba(255, 73, 156, 0.5)),
      url("./backgrounds/pexels-jaime-reimer-2662116.jpg");

   background-size: contain;
   background-repeat: no-repeat;
}

והתוצאה:

 

 

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