فهم التدرجات الخطية CSS3

إن إنشاء صورة لعرض التدرج اللوني فقط هو أمر غير مرن ويمكن أن يصبح ممارسة سيئة بسرعة. لكن للأسف، حتى كتابة هذه السطور، ربما لا يزال الأمر كذلك، ولكن نأمل ألا يستمر الأمر لفترة أطول. بفضل Firefox وSafari/Chrome، يمكننا الآن تحقيق تدرجات قوية بأقل جهد. في هذه المقالة، سنعرض تنفيذًا بسيطًا لتدرجات CSS وكيف تختلف هذه الخاصية في متصفحات Mozilla وwebkit.

ملاحظة: النص الأصلي لهذه المقالة يحتوي على فيديو، ولكن لأسباب معروفة، لا يمكننا مشاهدة هذا الفيديو على يوتيوب. الطلاب الذين يرغبون في مشاهدته، يرجى العثور على طريقة لمشاهدته بأنفسهم (حتى 720 بكسل): http //www.youtube.com/ شاهد?v=9D2hyM5SSCE

ويبكيت

على الرغم من أن Mozilla وWebkit يعتمدان بشكل عام نفس بناء الجملة لخصائص CSS3، إلا أنهما للأسف لا يستطيعان الاتفاق على التدرجات. Webkit هو أول نواة متصفح تدعم التدرجات، وذلك باستخدام البنية التالية:

/* بناء الجملة مأخوذ من: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/* عملياً...*/
الخلفية: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));