Linear Gradients in CSS3

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

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

דוגמאות קוד ל - Linear Gradient

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

מעבר הדרגתי של צבעים מלמעלה למטה

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

IE 5.5 - IE 9.0
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=0,startColorstr=#a8e9ff, endColorstr=#052afc);

Firefox 3.6+
background-image:-moz-linear-gradient(top, #a8e9ff 0%, #052afc 100%);

Chrom 10+ Safari 5.1+
background-image:-webkit-linear-gradient(top, #a8e9ff 0%, #052afc 100%);

IE 10.0
background-image:-ms-linear-gradient(top, #a8e9ff 0%, #052afc 100%);

W3C
background-image:linear-gradient(top, #a8e9ff 0%, #052afc 100%);

Opera 11.10+
background-image:-o-linear-gradient(top, #a8e9ff 0%, #052afc 100%);

Safari 4+ Chrom 2+
background-image:-webkit-gradient(linear, right top,
right bottom, color-stop(0%,#a8e9ff), color-stop(100%,#052afc));}

תוצאות הקוד שלמעלה הן:

Linear Gradient Example

מעבר הדרגתי של צבעים מלמטה למעלה

בדוגמה הבאה נגדיר את מעבר הצבעים כך שהצבע הכהה יהיה למעלה ואילו הבהיר יהיה למטה:

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

IE 5.5 - IE 9.0
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=0,startColorstr=#a8e9ff, endColorstr=#052afc);

Firefox 3.6+
background-image:-moz-linear-gradient(bottom, #a8e9ff 0%, #052afc 100%);

Chrom 10+ Safari 5.1+
background-image:-webkit-linear-gradient(bottom, #a8e9ff 0%, #052afc 100%);

IE 10.0
background-image:-ms-linear-gradient(bottom, #a8e9ff 0%, #052afc 100%);

W3C
background-image:linear-gradient(bottom, #a8e9ff 0%, #052afc 100%);

Opera 11.10+
background-image:-o-linear-gradient(bottom, #a8e9ff 0%, #052afc 100%);

Safari 4+ Chrom 2+
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#a8e9ff), color-stop(100%,#052afc));}

תוצאות הקוד שלמעלה הן:

Linear Gradient Example

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

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

IE 5.5 - IE 9.0
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=1,startColorstr=#a8e9ff, endColorstr=#052afc);

Firefox 3.6+
background-image:-moz-linear-gradient(right, #a8e9ff 0%, #052afc 100%);

Chrom 10+ Safari 5.1+
background-image:-webkit-linear-gradient(right, #a8e9ff 0%, #052afc 100%);

IE 10.0
background-image:-ms-linear-gradient(right, #a8e9ff 0%, #052afc 100%);

W3C
background-image:linear-gradient(right, #a8e9ff 0%, #052afc 100%);

Opera 11.10+
background-image:-o-linear-gradient(right, #a8e9ff 0%, #052afc 100%);

Safari 4+ Chrom 2+
background-image:-webkit-gradient(linear, right bottom, left bottom,
color-stop(0%,#a8e9ff), color-stop(100%,#052afc));}

תוצאות הקוד שלמעלה הן:

Linear Gradient Example

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

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

IE 5.5 - IE 9.0
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=1,startColorstr=#a8e9ff, endColorstr=#052afc);

Firefox 3.6+
background-image:-moz-linear-gradient(left, #a8e9ff 0%, #052afc 100%);

Chrom 10+ Safari 5.1+
background-image:-webkit-linear-gradient(left, #a8e9ff 0%, #052afc 100%);

IE 10.0
background-image:-ms-linear-gradient(left, #a8e9ff 0%, #052afc 100%);

W3C
background-image:linear-gradient(left, #a8e9ff 0%, #052afc 100%);

Opera 11.10+
background-image:-o-linear-gradient(left, #a8e9ff 0%, #052afc 100%);

Safari 4+ Chrom 2+
background-image:-webkit-gradient(linear, left bottom, right bottom,
color-stop(0%,#a8e9ff), color-stop(100%,#052afc));}

תוצאות הקוד שלמעלה הן:

Linear Gradient Example


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