מדריך בסיסי | CSS - חלק ד' | רקעים עם מעבר צבע.

Men770

ב"ה.

#guide(רקעים עם מעבר צבע.)

היום אסביר על רקעים של מעבר צבע.

יש שלושה סוגים של מעבר צבע:

לינארי (linear-gradient)

מעבר של קו ישר.
ככה זה נראה:

רדיאלי (radial-gradient)

מעבר של עיגול.
ככה זה נראה:

חָרוּטִי (conic-gradient)

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

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

כדי ליצור מעבר צבע בצורת חרוט, נעשה כך:

background-image: conic-gradient(from 90deg /*רמת סיבוב, אפשר להוריד*/,
                                #000000 /*צבע 1*/,
                                #ffffff /*צבע 2*/
                                )

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

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

בהצלחה!

Men770

עשיתי כאן דוגמא לאתר שנעשה רק באמצעות מה שלמדנו.
בעז"ה בפרק הבא אסביר על ה-Box model, ואז האתר שלנו כבר יראה ממש אתר אמיתי…