מדריך בסיסי | CSS - חלק ד' | רקעים עם מעבר צבע.
-
ב"ה.
#guide(רקעים עם מעבר צבע.)
היום אסביר על רקעים של מעבר צבע.
יש שלושה סוגים של מעבר צבע:
לינארי (linear-gradient)
מעבר של קו ישר.
ככה זה נראה:
רדיאלי (radial-gradient)
מעבר של עיגול.
ככה זה נראה:
חָרוּטִי (conic-gradient)
מעבר בצורת חרוט.
אפשר לעשות איתו המון דברים, ארחיב עליו בל"נ בהמשך.
ככה זה נראה:
איך עובדים איתם?
כדי ליצור מעבר צבע לינארי ורדיאלי, הכי קל להשתמש באתר הזה.כדי ליצור מעבר צבע בצורת חרוט, נעשה כך:
background-image: conic-gradient(from 90deg /*רמת סיבוב, אפשר להוריד*/, #000000 /*צבע 1*/, #ffffff /*צבע 2*/ )
אפשר לשים כמה צבעים שרוצים, הם צריכים להיות מופרדים בפסיקים.
אפשר לראות דוגמא שעשיתי בשביל המדריך כאן.
בהצלחה!
-
עשיתי כאן דוגמא לאתר שנעשה רק באמצעות מה שלמדנו.
בעז"ה בפרק הבא אסביר על ה-Box model, ואז האתר שלנו כבר יראה ממש אתר אמיתי…