1,403

في تدوينة سابقة تحدثنا عن إستخدام التدرجات و إستخدمنا خمسة ألوان

بعد عرضها بطريقة التدرج اصبحت 7 ألوان تمثل ألوان الطيف

يمكنك العودة للتدوينة لمعرفة صلب الموضوع 

 

التدرجات اللونية

 

 

نتذكر سابقاً حينما كنا صغار في المدرسة

كانت الحصة المحببة لنا هي حصة الرسم – نسميها في السعودية الفنية -

كنا نأخذ الألوان و نخلطها ببعض

كانت رسومنا عادة بيت و نهر و مزرعة و شمس  :grin:

لكن حينما نأخذ الألوان و نفتح صفحة جديدة و نقوم بخلط الألوان ببعضها البعض يتشكل لنا إبداع آخر

نرى حينها اننا رسمنا لوحة تشكيلية مبدئية

علاوة على ذلك تظهر لنا ألوان جديدة في غاية الروعة

 

لنتحدث الآن عن التدرجات اللونية

 

مثلاً لو خلطنا اللون الازرق مع الاخضر سينتج لنا لون جداً رائع

لكن ما هو الاروع من هذا كله ؟!

الأروع انك ترى مسار تغير اللون من لون الى لون 

عندما يختلط اللون شيأً فشيء ينتج لك لون فريد

حسناً سأريك ذلك  :wink:

سأستخدم هذا اللون #4fa6c2

 

 

لون هادىء و جميل

و سنستخدم ايضاً هذا اللون 80cbac#

 

 

الآن نريد أن نجعل اللون الازرق السابق يتدرج الى اللون الاخضر

كم سنرى لون على خط التدرج؟

 

لنرى لاني الآن و الله لا أعلم 

 

حسناً في السابق تعلمنا كيف نجعل الألوان تتدرج و كيف نجعل التدرج من اليمين او اليسار او اسفل او اعلى

بحسب تجربتي مع التدرجات أرى ان افضل منظر للتدرج هو التدرج الأفقي (أي من اليمين لليسار أو العكس)

سنستخدم الخصائص التالية لتطبيق التدرج على اللونين

 

لتصبح النتيجة

 

جميل حاولت عد الألوان التي ظهرت لم استطيع  :grin:

ظهرت لنا ألوان اقل ما يقال عنها انها صعبة

 

لماذا اخترت انا ألوان هادئة و بنفس الدرجات!

أولاً سيظر لك كما قلت الوان صعبة هادئة منتوجة من تدرج اللون الى الآخر

كذلك لا تستطيع بسهولة رؤية التدرج من اي نقطة بدأ 

و التدرج بدء من النصف تماماً – انظر إليها مرة أخرى

سترى إنسيابية ناعمة في التدرج 

 

في التدوينة التي اشرت اليها في البداية هناك تدرج 5 ألوان 

سنأخذ الآن تدرج بخمسة ألوان فريدة

سنستخدم الخصائص التالية

 

النتيجة

 

التدرج بشكل عام (عشوائي)

لكن إنظر للتدرج من اللون البرتقالي الى اللون الازرق

انظر بينهما

ستجد لون مبهر جداً جداً جداً

نتج لنا هذا اللون cc6b73#

 

أعجبني جداً اللون  :)

 

كما اسلفت بالبداية انه حينما كانا صغاراً و نلعب بالالوان و نخلطها ببعض

نحن هنا نلعب ايضاً بالألوان و لكن للإبداع بالتصميم

أظنك رأيت كيف هي الصعوبة بتطبيق التدرج على الفوتوشوب

و لكن بالـcss3 فهي سهلة 

فقط عليك ان تطلق العنان لمخيلتك و تختار الألوان و أنظر لنتيجتها

 

 

شاركها

3 تعليقات على فن التدرجات اللونية بالـcss3

  1. إبداع بلا حدود
    2012-01-30
    73

    جميل شكراا لك ناصر

  2. كيرلس ادوارد
    2012-02-01
    19

    درس مميز … شكراً لك

  3. Eslam
    2012-02-04
    1

    واااااااو درس جامد على كدة في حجات كتير في css3 منعرفش عنها حاجة

التعليقات مغلقة, إن كان لديك شيء مهم عن هذا الموضوع يمكنك دائماً الاتصال بي