درس اليوم عباره عن كيفيه عمل التدرجات في css3 والتي ممكن ان تكون بديله للصور
وسوف نتعرف علي الخاصيه التي تقوم بعمل تدرجات في css

كما أن في هذا الدرس سوف تتعرف على الخاصية التي تقوم بعمل التدرجات في CSS وتكتب الخاصية بأكثر من طريقة بسبب دعم المتصفحات لها مثل تطبيق خاصية التدرجات في متصفح Firefox الذي يستخدم محرك Gecko وفي متصفح Safari الذي يستخدم محرك Webkit. علماً بأن خاصية التدرجات Gradient تكتب في كقيمة في خاصية background-image، ومدعومة في المتصفحات التي تستخدم محرك Webkit و Gecko.

الخاصية في محرك Gecko/Mozilla

في المتصفحات التي تستخدم محرك Gecko مثل متصفح Firefox يتم إستخدام خاصية –moz-linear-gradient لعمل التدرج. قيم هذه الخاصية تشاهدها على هذه الشفرة:

[html] -moz-linear-gradient([positions angle], colors);
[/html]

positions: لتحديد من مناطق بدء وإنتهاء التدرج ويتم تحديدها بالنسبة أو بإستخدام مسميات المواقع مثل Left, Center, Right , Top, Bottom.
angle: لتحديد زاوية التدرج ويتم كتابتها بإستخدام درجة الزاوية Degree أي تكتب مثل 90deg (درجة °90) وعن طريقها تحدد إتجاه التدرج.
colors: الألوان ويمكن إضافة أكثر من لونين، كما يمكن إستخدام مسميات الألوان مثل red,green,blue، كذلك يمكن تحديد نسبة إمتداد كل لون مثل red 80% و green 20% هنا يكون إستحواذ اللون الأحمر أكثر من اللون الأخضر وهكذا.
لو أردنا عمل تدرج يبدأ باللون الأصفر ثم البرتقالي ثم الأحمر وبدرجات مختلفة قليلاً كما تبين هذه الصورة:

نكتب خاصية –moz-linear-gradient ونحدد القيم في الشفرة التالية:

[html] background-image: -moz-linear-gradient(100% 100% 90deg, yellow, orange, red 80%);
[/html]

كما تلاحظ في الشفرة السابقة حددنا درجة الزاوية وهي 90 درجة وبذلك تكون أفقية إضافةً إلى الألوان الرئيسية كقيم أخيرة Yellow و Orange و Red مع تحديد نسبة إستحواذ بنسبة 80% مقارنةً بالألوان البقية.

الخاصية في محرك Webkit

اما في المتصفحات التي تستخدم محرك Webkit مثل متصفح Chrome و Safari فيتم إستخدام خاصية -webkit-gradient لعمل التدرج، قيم هذه الخاصية تشاهدها على الشفرة التالية:

[html] -webkit-gradient(type, [positionX], [positionY], from(first color), to(last color) );
[/html]

type: شكل التدرج ويمكن أن يكون على شكل خطي linear أو على شكل مدور rotate.
positionX: تحديد منطقة بدء وإنتهاء التدرج من المستوى الأفقي.
positionY: تحديد منطقة بدء وإنتهاء التدرج من المستوى العمودي.
from: تحديد اللون الأول في البداية.
to: تحديد اللون الثاني في النهاية.
لو أردنا عمل تدرج مثل المثال السابق مع محرك Webkit يبدأ باللون الأصفر ثم البرتقالي ثم الأحمر وبدرجات مختلفة قليلاً كما تبين هذه الصورة:

نكتب خاصية –webkit-gradient ونحدد القيم في الشفرة التالية:

[html] background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(60%,orange), to(yellow));
[/html]

كما ترى حددنا في القيمة الأولى شكل التدرج وهو إخترنا أن يكون تدرج خطي linear ثم قيم مناطق التدرج كما هي على المستوى الأفقي وعلى المستوى العمودي 100%، بعد ذلك حددنا اللون الأول وهو اللون الأحمر Red مع اللون الأخير yellow.
تلاحظ إضافةً اللون البرتقالي عن طريق قيمة color-stop، يمكن إضافةً أكثر من لون بإستخدام هذه القيمة بحيث تكون بين ألوان قيم from و to، مثال آخر لتوضيح كيفية إضافة عدة ألوان بإستخدام color-stop:

[html] background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(60%,orange), color-stop(blue), color-stop(white), to(yellow));
[/html]

د تكون كتابة الخاصية في محرك Mozilla/Gecko أسهل لكن الخاصية –webkit-gradient توفر إختيار شكل التدرج فيمكن أن يكون دائري أو خطي.

مثال عملي: عمل قائمة روابط بإستخدام التدرجات
سيكون المثال على الدرس عبارة عن قائمة بثلاثة روابط وسأضع التدرجات في خلفية كل قائمة لكي تكون مثل الأزرار، هذه الصورة توضح المثال المطروح:

في البداية نضع شفرة HTML العادية مع القوائم الروابط معاً وهي سهلة جداً:

[html] <ul id="buttons">
<li><a href="#">سلسلة تطبيقات على CSS3</a></li>
<li><a href="#">العودة إلى الدرس</a></li>
<li><a href="#">العودة إلى المدونة</a></li>
</ul>
[/html]

ثم شفرة CSS:

[html] body {
direction: rtl;
text-align: center;
}
#buttons {
margin: 0 auto;
text-align: right;
width: 50%;
}
#buttons li {
background-color: #E9E8DD;
border: 1px solid #a5a5a5;
display: block;
height: 48px;
list-style: none;
margin: 10px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

}
#buttons li a {
display: block;
color: #414038;
font: bold 22px Simplified Arabic,Arial;
padding: 4px 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #fff
}
[/html]

الآن نضع خاصية -webkit-gradient و -moz-linear-gradient في الصنف #buttons li:

[html] #buttons li {
background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD, #d1cfc6 95%, #d1cfc6 97%,#E9E8DD 98%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(2%,#E9E8DD), color-stop(2%,#d1cfc6), color-stop(80%,#E9E8DD), to(#E9E8DD));
}
[/html]

ظ في الشفرة السابقة إختلاف نسب الإسحتواذ في الخاصية بين المحركين (mozilla و webkit) وذلك لإختلاف طريقة البدأ وظهور الألوان في متصفحات كلا المحركين.
إضافةً إلى عكس التدرج عند تمرير الفأرة على القائمة، لتصبح خاصية -moz-linear-gradient و -webkit-gradient في الصنف #buttons li:hover بهذه الطريقة، علماً بأن الإنعكاس قمت بعمله بناءاً على ما شاهدته (عن طريق إضافة firebug):

[html] #buttons li:hover {
background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD 3%, #d8d6ce 3%, #d8d6ce 5%, #E9E8DD);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(30%,#E9E8DD), color-stop(95%,#d8d6ce),to(#E9E8DD));
}
[/html]