גרדיאנט, או מעבר צבע, הוא אחת הדרכים הפשוטות לתת לכפתור, לבאנר או לרקע של אזור באתר עומק ותחושה מעוצבת, בלי תמונה ובלי לפגוע במהירות הטעינה. את הקוד אפשר לכתוב ביד, אבל הרבה יותר קל לבנות אותו בעין: מחולל גרדיאנט CSS מציג את התוצאה בזמן אמת ונותן קוד מוכן להעתקה, כולל גרסה לאלמנטור.
שלושה סוגים של גרדיאנט ב-CSS
- ליניארי (linear-gradient): מעבר בקו ישר לפי זווית. 90 מעלות זה משמאל לימין, 180 מלמעלה למטה. הסוג הנפוץ ביותר, לרקעים ולכפתורים.
- רדיאלי (radial-gradient): הצבע מתפשט מנקודה החוצה, בעיגול או באליפסה. מתאים לאפקט של זוהר או תאורה רכה מאחורי מוצר.
- קוני (conic-gradient): הצבעים מסתובבים סביב נקודה, כמו מחוגי שעון. משמש לגלגל צבעים, לתרשים עוגה פשוט ולמסגרות צבעוניות.
לכל אחד מהם יש גם גרסה חזרתית (repeating), שחוזרת על הדוגמה ויוצרת פסים. מסמנים ״חזרתי״ ומקרבים את הצבעים זה לזה, למשל ב-0% וב-10%.
איך יוצרים גרדיאנט CSS בכלי
- מתחילים מאחד הגרדיאנטים המוכנים, או מהברירה הראשונה.
- בוחרים סוג: ליניארי, רדיאלי או קוני. בליניארי ובקוני קובעים זווית בסרגל. ברדיאלי בוחרים צורה (עיגול או אליפסה) ומיקום מרכז.
- עורכים את הצבעים: לכל צבע יש בורר, שדה לקוד HEX, מיקום באחוזים ואטימות. אפשר גם לגרור את הסמנים על הפס, וללחוץ על הפס כדי להוסיף צבע במקום מסוים.
- כפתור ״היפוך״ הופך את הכיוון, ו״אקראי״ מציע שילוב צבעים חדש להשראה.
- בוחרים פורמט קוד, CSS רגיל או אלמנטור, ומעתיקים.
הקוד כולל שתי שורות: background-color עם הצבע הראשון, כגיבוי, ו-background-image עם הגרדיאנט עצמו.
היתרון על פני תמונת רקע: הדפדפן מצייר את הגרדיאנט בעצמו, ולכן הוא חד בכל מסך ושוקל כמה עשרות תווים בלבד, לעומת תמונה של מאות קילובייטים. גם שינוי צבע לוקח שנייה, בלי לחזור לתוכנת עיצוב ובלי להעלות קובץ חדש.
גרדיאנט באלמנטור: מתי מספיקה ההגדרה המובנית
בלשונית העיצוב של רוב הווידג׳טים והקונטיינרים באלמנטור יש ברקע אפשרות ״גרדיאנט״. היא נוחה, אבל מוגבלת לשני צבעים, ליניארי או רדיאלי בלבד. כשרוצים שלושה צבעים ומעלה, צבע עם שקיפות באמצע, גרדיאנט קוני או פסים, משתמשים בקוד:
- בכלי בוחרים בפורמט ״אלמנטור״. הקוד מתחיל במילה selector.
- באלמנטור בוחרים את האלמנט, עוברים ללשונית מתקדם ופותחים את CSS מותאם אישית (זמין באלמנטור פרו).
- מדביקים. אלמנטור מחליף את selector באלמנט שבחרתם, והגרדיאנט מופיע מיד בעורך.
מי שעובד בלי אלמנטור פרו יכול להדביק את הקוד בהגדרות העיצוב של התבנית, תחת CSS נוסף, עם מחלקה (class) שמוסיפים לאלמנט.
טיפים לגרדיאנט שנראה טוב
- צבעים קרובים עובדים טוב יותר. שני גוונים שכנים בגלגל הצבעים (כחול וטורקיז, כתום וורוד) יוצרים מעבר נקי. צבעים מנוגדים, כמו אדום וירוק, נוטים ליצור אמצע עכור.
- טקסט על גרדיאנט: בודקים שהטקסט קריא גם בצד הבהיר וגם בצד הכהה. אם לא, מוסיפים שכבה כהה שקופה למחצה.
- שכבת הצללה מעל תמונה: גרדיאנט מצבע כהה באטימות 70% לשקוף לגמרי, מלמטה למעלה, עוזר לכותרת לבנה לבלוט על תמונת רקע.
- לא להגזים: גרדיאנט אחד בולט לעמוד מספיק בדרך כלל. בשאר המקומות עדיף צבע אחיד.
מתלבטים איזה שילוב צבעים מתאים למותג? בסטודיו טליה שלוש מעצבים אתרי אלמנטור ושפה גרפית שלמה, כך שהגרדיאנט משתלב בעיצוב ולא רק מקשט אותו.
עוד כלים שיעזרו
- המרת קודי צבע: ממירים בין HEX, RGB ו-HSL, למשל כדי להעתיק צבע מותג מדויק.
- יצירת Favicon: מכינים אייקון לאתר באותם צבעים.
- המרה ל-WebP: כשבכל זאת צריך תמונת רקע, מקטינים אותה כדי שהאתר יישאר מהיר.
הכלים מהמדריך