مثال
يوضح المثال التالي الانحدار الخطي الذي يبدأ في الجزء العلوي. ويبدأ الأحمر والانتقال إلى الأصفر، ثم إلى اللون الأزرق:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
انها محاولة لنفسك » تعريف واستخدام
و linear-gradient() وظيفة يخلق "image" الذي يمثل الانحدار الخطي من الألوان.
لإنشاء التدرج الخطي يجب تعريف اثنين على الأقل توقف اللون. توقف اللون هي الألوان التي تريد أن تجعل الانتقال السلس بين. يمكنك أيضا تعيين نقطة البداية واتجاه (or an angle) جنبا إلى جنب مع تأثير الانحدار.
مثال الخطي التدرج:
| الإصدار: | CSS3 |
|---|
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل وظيفة.
أرقام تليها -webkit-، -moz-، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| وظيفة | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS بناء الجملة
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| القيمة | وصف |
|---|---|
| direction | يحدد نقطة البداية واتجاه (or an angle) جنبا إلى جنب مع تأثير الانحدار. |
| color-stop1, color-stop2,... | توقف اللون هي الألوان التي تريد أن تجعل الانتقال السلس بين. وتتألف هذه القيمة من قيمة اللون، يعقبه وقف موقف اختياري (a percentage between 0% and 100% or a length along the gradient axis) . |
مزيد من الأمثلة
مثال
والانحدار الخطي الذي يبدأ من اليسار. ويبدأ الأحمر والانتقال إلى اللون الأزرق:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} انها محاولة لنفسك » مثال
والانحدار الخطي الذي يبدأ في أعلى اليسار (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} انها محاولة لنفسك » مثال
والانحدار الخطي مع زاوية محددة:
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} انها محاولة لنفسك » مثال
والانحدار الخطي مع نقاط متعددة الألوان:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} انها محاولة لنفسك » مثال
والانحدار الخطي مع الشفافية:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} انها محاولة لنفسك » صفحات ذات صلة
درس CSS: CSS3 التدرجات
وظائف CSS المرجعي