تتيح التدرجات CSS3 قمت بعرض الانتقال السلس بين اثنين أو أكثر محددة الألوان.
وفي وقت سابق، كان لديك لاستخدام الصور لهذه الآثار. ومع ذلك، باستخدام التدرجات CSS3 يمكنك تقليل وقت التحميل واستخدام عرض النطاق الترددي. وبالإضافة إلى ذلك، العناصر مع التدرجات تبدو أفضل عند التكبير، ليتم إنشاء التدرج من قبل المتصفح.
ويعرف 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- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 الخطية التدرجات
لإنشاء التدرج الخطي يجب تعريف اثنين على الأقل توقف اللون. توقف اللون هي الألوان التي تريد أن تجعل الانتقال السلس بين. يمكنك أيضا تعيين نقطة البداية واتجاه (أو زاوية) جنبا إلى جنب مع تأثير الانحدار.
بناء الجملة
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );الخطي التدرج - أعلى إلى أسفل (وهذا هو الافتراضي)
يوضح المثال التالي الانحدار الخطي الذي يبدأ في الجزء العلوي. ويبدأ الأحمر والانتقال إلى الأصفر:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} انها محاولة لنفسك » الخطي التدرج - من اليسار إلى اليمين
يوضح المثال التالي الانحدار الخطي الذي يبدأ من اليسار. ويبدأ الأحمر والانتقال إلى الأصفر:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} انها محاولة لنفسك » الخطي التدرج - قطرية
يمكنك جعل التدرج قطريا لتحديد كل من مواقع انطلاق الأفقية والعمودية.
يوضح المثال التالي الانحدار الخطي الذي يبدأ في أعلى اليسار (ويذهب إلى أسفل اليمين). ويبدأ الأحمر والانتقال إلى الأصفر:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} انها محاولة لنفسك » باستخدام الزوايا
إذا كنت تريد المزيد من السيطرة على اتجاه الانحدار، يمكنك تحديد زاوية، بدلا من الاتجاهات المحددة مسبقا (إلى أسفل، إلى أعلى، إلى اليمين، إلى اليسار، إلى اليمين السفلي، وما إلى ذلك).
بناء الجملة
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
يتم تحديد زاوية كزاوية بين الخط الأفقي والخط التدرج.
يوضح المثال التالي كيفية استخدام الزوايا على التدرجات الخطية:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} انها محاولة لنفسك » باستخدام توقف اللون متعددة
يوضح المثال التالي الانحدار الخطي (من الأعلى إلى الأسفل) مع نقاط متعددة الألوان:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} انها محاولة لنفسك » يوضح المثال التالي كيفية إنشاء الانحدار الخطي (من اليسار إلى اليمين) مع لون قوس قزح وبعض النصوص:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
/* 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);
} انها محاولة لنفسك » باستخدام الشفافية
كما تدعم التدرجات CSS3 الشفافية، والتي يمكن استخدامها لخلق تأثيرات التلاشي.
لإضافة الشفافية، ونحن نستخدم rgba() وظيفة لتحديد نقاط اللون. المعلمة الأخيرة في rgba() وظيفة يمكن أن تكون قيمة 0-1، وأنها تحدد شفافية اللون: يشير 0 إلى الشفافية الكاملة، 1 يشير اللون الكامل (أي الشفافية).
يوضح المثال التالي الانحدار الخطي الذي يبدأ من اليسار. ويبدأ شفافة تماما والانتقال إلى اللون الأحمر الكامل:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
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*/
} انها محاولة لنفسك » تكرار الخطية التدرج
و repeating-linear-gradient() يتم استخدام الدالة لتكرار التدرجات الخطية:
مثال
وتكرار الانحدار الخطي:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} انها محاولة لنفسك » CSS3 شعاعي التدرجات
ويعرف شعاعي الانحدار من وسطها.
لإنشاء تدرج شعاعي يجب أيضا تحديد اثنين على الأقل توقف اللون.
بناء الجملة
background: radial-gradient( shape size at position, start-color, ..., last-color );افتراضيا، الشكل البيضوي، وحجم هو أبعد الزاوية، والموقف هو المركز.
شعاعي الانحدار - بالتساوي مباعد توقف اللون (هذا هو الافتراضي)
يوضح المثال التالي شعاعي الانحدار مع نقاط اللون متباعدة بشكل متساو:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} انها محاولة لنفسك » شعاعي الانحدار - بشكل مختلف توقف اللون مباعد
يوضح المثال التالي شعاعي الانحدار مع نقاط اللون متباعدة بشكل مختلف:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} انها محاولة لنفسك » مجموعة الشكل
تحدد المعلمة شكل الشكل. يمكن أن يستغرق دائرة قيمة أو القطع الناقص. القيمة الافتراضية هي القطع الناقص.
يوضح المثال التالي شعاعي الانحدار مع شكل دائرة:
مثال
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} انها محاولة لنفسك » استخدام حجم مختلفة كلمات
تحدد المعلمة حجم حجم الانحدار. يمكن أن يستغرق أربع قيم:
- الجانب الأقرب
- الجانب الأبعد
- أقرب الزاوية
- أبعد الزاوية
مثال
وتدرج شعاعي مع كلمات مختلفة الحجم:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} انها محاولة لنفسك » تكرار التدرج شعاعي
و repeating-radial-gradient() يتم استخدام الدالة لتكرار التدرجات شعاعي:
مثال
وتكرار التدرج شعاعي:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6» ممارسة 7 »