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

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

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

מהו שיפוע CSS?

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

עם זאת, יש סוג שלישי של שיפוע שהוא פחות פופולרי וידוע בשם שיפוע החרוט.

תחביר CSS Gradients

Background-image: gradient-type (direction, color1, color2);

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

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

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

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

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

CSS דוגמה לינארית

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

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

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

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

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

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

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

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

איך זה נראה כשמישהו חוסם אותך בסנאפצ'ט

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

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

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

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

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

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

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

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

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

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

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

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

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

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

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

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

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

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

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

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

האייפון שלי תקוע בלוגו של אפל

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

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

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

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

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

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

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

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

  
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

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

התאמה אישית של מדריכי צבע

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

כיצד לברר מידע אישי על מישהו בחינם

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

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

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

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

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

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

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

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

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

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

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

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

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

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 27 דוגמאות מעולות לרקע CSS מסוגנן

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

קרא הבא נושאים קשורים

תִכנוּת
בניית אתרים
עיצוב אתרים
CSS

על הסופר קדישא קין(פורסמו 21 מאמרים)

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

עוד מ- Kadeisha Kean

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה