Radial Gradients in CSS3

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

Illustration of Radial Gradient

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

דוגמאות קוד לשימוש ב -  Radial Gradient

 הגדרת צבע רקע למקרה שהדפדפן אינו תומך בתכונה
#element { background: #000000;

Chrom 10+ Safari 5.1+
background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));

Safari 4+ Chrom 2+
background-image:-webkit-radial-gradient(center center,circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);

Firefox 3.6+
background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);

 IE10+
background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);

Opera (13+)
background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);}

תחביר הפקודה Radial Gradient

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

background-image: radial-gradient(60px 45px1, circle2 closest-side3, red4,


blue5 60%6, green7)

הסברים לפרמטרים השונים עפ"י המספרים מעל כל פרמטר:

  1. אופציונאלי - מיקום הנקודה שממנה יתבצע ה - gradient. בדוגמה שלנו מדובר ב - 60 פיקסלים מצד שמאל ו - 45 פיקסלים מלמעלה. ניתן להעביר כאן גם ערכים אחוזיים.
  2. אופציונאלי - צורת ה - gradient יכולה להיות עיגול (circle) או אליפסה (ellipse). ערך ברירת המחדל הוא אליפסה.
  3. אופציונאלי - גודל ה - gradient יכול להיות מוגדר באמצעות אחת ממילות המפתח הבאות: closest-side, closest-corner, farthest-side, farthest-corner או באמצעות ערכים מספריים שבאמצעות הראשון שבהם נגדיר את רוחב ה - gradient
    ואילו באמצעות השני את גובהו. ברירת המחדל היא farthest-side.
  4. חובה - הצבע ההתחלתי של ה - gradient.
  5. אופציונאלי - צבע ביניים בין הצבע ההתחלתי לצבע הסופי המוגדר בפרמטר מספר 7.
  6. אופציונאלי - נקודת עצירה, המגדירה כי נקודת הביניים לעצירה בין צבע הביניים (כחול בדוגמה שלנו) לצבע הסופי תהיה לא באמצע הדרך (ברירת המחדל) בין שני הצבעים אלא לאחר 60 אחוזים מהדרך.
  7. חובה - הצבע הסופי שאליו על ה - gradient להגיע בסופו של דבר.


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש