מחולל מעברי צבע ב-CSS
עצבו מעברים ליניאריים ורדיאליים באופן חזותי, ואז העתיקו את ה-CSS המוכן לשימוש. הכול מתעדכן בזמן אמת בדפדפן.
איך ליצור מעבר CSS
- בחרו ליניארי או רדיאלי, ואז הגדירו את הזווית עבור מעבר ליניארי.
- בחרו צבעים לעצירות והגדירו לכל אחת מיקום בין 0 ל-100.
- הוסיפו או הסירו עצירות כדי לעצב את המעבר כרצונכם.
- העתיקו את ה-CSS שנוצר לגיליון הסגנון או למאפיין style.
שאלות נפוצות
מהו מעבר ליניארי?
מעבר ליניארי ממזג צבעים לאורך קו ישר בזווית שבחרתם, מ-0 עד 360 מעלות.
מהו מעבר רדיאלי?
מעבר רדיאלי ממזג צבעים החוצה מנקודה מרכזית בצורה מעגלית או אליפטית.
מה המשמעות של מספרי המיקום?
כל מיקום הוא אחוז לאורך המעבר, מ-0% בתחילתו ועד 100% בסופו. העצירות ממוינות אוטומטית לפי המיקום.
האם המעבר פועל בכל הדפדפנים?
כן. ה-CSS שנוצר משתמש בפונקציות הסטנדרטיות linear-gradient ו-radial-gradient, הנתמכות בכל דפדפן מודרני.
כלים קשורים
למה להשתמש במחולל מעברים?
השתמשו במחולל מעברי CSS כדי לעצב מעברי צבע חלקים באופן חזותי במקום לנחש ערכים בקוד, ולהעתיק CSS מוכן לפרודקשן מיד.
- ראו את המעבר משתנה בזמן אמת כשאתם מכוונים צבעים, זוויות ועצירות.
- העתיקו CSS מדויק ותקין בלי לחפש טעויות תחביר.
- בנו רקעים עם מספר עצירות לכפתורים, באנרים ומקטעים בתוך שניות.
טיפים ומגבלות
אפשר להוסיף כמה עצירות צבע שרוצים, והמחולל שומר על לפחות שתיים כדי שהמעבר תמיד יהיה תקין. העצירות ממוינות לפי המיקום לפני יצירת ה-CSS.