بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
تصادفك أثناء تصفح المواقع على الأنترنت بعض الخلفيات اللونية المتدرجة من لون إلى آخر ، في السابق كان المصممون يصنعون صورة بها تدرج لوني عن طريق برنامج الفوتوشوب ثم يضعونها كخلفية ، أما الآن فقد أغنتنا css3 عن ذلك بإضافة القيمة linear-gradient للخاصية background .
وهذا مثال عملي للتعرف على التدرج في أبسط حالاته:
وهذا هو التنسيق:
وهذه هي النتيجة:
كما تلاحظ وضعنا أولا خلفية عادية باللون الأحمر حتى تظهر في حالة كان المتصفح لا يدعم التدرج ، ثم وضعنا قاعدة التدرج باستخدام القيمة linear-gradient وهي مثل الدالة تأخذ بارامترات وهي قيم الألوان نفصل بينها بالفاصلة الأجنبية العادية ، ويمكننا وضع أكثر من لونين.
افتراضيا يأتي التدرج من الأعلى إلى الأسفل ، ويمكننا بإضافة الإتجاه تحديد الإتجاه ونقطة البداية.
linear-gradient
moz-linear-gradient-
webkit-linear-gradient-
ms-linear-gradient-
o-linear-gradient-
ليكن كود html التالي:
سنبدأ أولا بتنسيقات عادية ثم نوضح كيف تكتب البادئات فقط مع الديف block1 ، ومع بقية البلوكات سنكتفي بالبادئة -moz- ، وهذا هو التنسيق:
كما ترى يمكن استخدام عدة ألوان ، كما يمكننا تحديد نقطة البداية ، ولا حظ ماذا سيحدث عند استخدام نسب مائوية إلى جانب الألوان ، وهذه هي النتيجة :
نكتفي بهذا القدر ، وموعدنا في الدرس القادم مع شرح Media Queries والتصميمات المتوافقة مع الشاشات المختلفة ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.