אלמנטים בסגנון אתרים עם שיפוע רקע של CSS

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

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

מהו שיפוע CSS?

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

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

תחביר הדרגתי של CSS

תמונת רקע: סוג שיפוע (כיוון, צבע 1, צבע 2);

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

קָשׁוּר: כיצד להגדיר תמונת רקע ב- CSS

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

מהו שיפוע לינארי?

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

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

תמונת רקע: שיפוע לינארי (# 00A4CCFF, # F95700FF);

הקוד לעיל יפיק את שיפוע ה- CSS הבא:

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

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

שימוש בדוגמת שיפוע לינארית תחתונה

תמונת רקע: שיפוע ליניארי (לתחתית, # 00A4CCFF, # F95700FF);

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

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

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

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

• למטה מימין
• משמאל למטה
• למעלה מימין
• למעלה משמאל

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

תמונת רקע: שיפוע לינארי (בצד ימין למטה, # 00A4CCFF, # F95700FF);

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

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

שיפוע לינארי רב צבעוני

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

דוגמא לשיפוע לינארי צבעוני

תמונת רקע: שיפוע לינארי (מימין, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

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

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

מהו שיפוע רדיאלי?

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

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

תמונת רקע: שיפוע רדיאלי (מעגל, # 00A4CCFF, # F95700FF);

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

שינוי מרכז שיפוע רדיאלי

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

שינוי הדוגמה למיקום ההתחלה ברדיאלי

תמונת רקע: שיפוע רדיאלי (עיגול בצד ימין למעלה, # 00A4CCFF, # F95700FF);

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

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

• שמאלי עליון
• למטה מימין
• שמאל תחתון

מעבר צבעים רדיאלי צבעוני

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

דוגמא לשיפוע רדיאלי צבעוני

תמונת רקע: שיפוע רדיאלי (מעגל, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

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

התאמה אישית של מעבר צבעים

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

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

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

התאמה אישית של דוגמא לשיפוע לינארי 1

תמונת רקע: שיפוע לינארי (מימין, # 00A4CCFF, # F95700FF 30%);

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

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

אם היית מציב את 30% בקוד שלמעלה בסוף הצבע הראשון הדברים צריכים להתבהר.

התאמה אישית של דוגמא לשיפוע לינארי 2

תמונת רקע: שיפוע לינארי (מימין, # 00A4CCFF 30%, # F95700FF);

הקוד לעיל יפיק את הפלט הבא.

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

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

צור מעברי CSS מעולם לא היה קל יותר

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

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

27 דוגמאות מסוגננות של CSS לרקעים מסוגננים

צבעים אחידים הם כל כך בשנה שעברה. שיפועים נמצאים! אבל איך יוצרים אותם ב- CSS?

קרא הבא

על הסופר

הרחב לקריאת הסיפור המלא