تحريك شخصية كريم في بلوك 8 ... MAKING OF BLOCK8 FILM

making of backgrounds of #block8

راديو ستار... كل يوم خميس - 2-2-2017

همسات الأصدقاء

OmarStar: Electronic snap circuits project001

OmarStar: Electronic snap circuits project002

التعامل مع الألوان والظلال والخلفيات

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

ألوان الشاشة:

ألوان الشاشة تتكون من ثلاث ألوان رئيسية هي الأحمر ويشار له بـ (R) واللون الأخضر ويشار له بـ (G) واللون الأزرق ويشار له بـ (B) وعند خلط هذه الألوان مع بعضها البعض بأي نسبة كانت فإنها ستعطينا ما يعرف بالألوان الفرعية، ولتحديد لون خلفية باستخدام قيمة كل لون مع ملاحظة أن أدنى قيمة هي الصفر وأعلى قيمة هي 255:

Background-color: rgb(20,20,30);

كما يمكن أن نحدد عن طريق HEX code حيث أن لكل لون مهما كانت قيمه وشكله كود خاص به:

Background-color: # 14141E

وللتعرف على مزيد من الألوان وأكوادها يمكنك الاطلاع على موقع http://html-color-codes.info/

تدريج الخلفيات:

الخلفية المتدرجة هي خلفية تحتوي على أكثر من لون حيث تبداء بلون وتنتهي بآخر وفي المعتاد عندما نستخدم هذا التوصيف فإنه يقصد جعل الخلفية متدرجة من أعلى إلى أسفل؛ فمثلاً لو أردنا أن نجعل اللون في أعلى أحمر وفي أسفل أخضر يكون الوصف هكذا:

Background: linear-gradient (red,green);

أما إذا أردنا أن نحدد اتجاه التدريج كما نريد فإننا نضيف هذا الاتجاه داخل الكود هكذا:

Background: linear-gradient (to top, red, green);

كما يمكن أن نحدد زاوية الميل إذا أردنا ذلك هكذا:

Background: linear-gradient (120deg, red,green);

من المهم أن نفهم أن الخلفيات المتدرجة لا تقف أعداد ألوانها عند لونين بل من الممكن أن تزيد أكثر من ذلك، كما أننا من الممكن أن نجعل التدريج يأخذ الشكل الدائري وليس الخطي وذلك باستبدال كلمة linear بكلمة radial.

إضافة صورة في الخلفية:

لإضافة صورة في الخلفية بدلاً من اللون:

Background-image: url(“نضع هنا اسم الصورة وامتدادها”);

لمنع تكرار الصورة، نكتب أصفل التوصيف السابق التوصيف التالي:

Background-repeat: no-repeat;

لعمل تكرار للصورة من أعلى إلى أسفل نستبدل كلمة no-repeat بكلمة repeat-y ولو أردنا التكرار من اليسار إلى اليمين نستبدلها بكلمة repeat-x، أما إذا كان لدينا صورة ونريد أن نحدد مكانها نستخدم التوصيف التالي:

Background: 30px, 30px;

حيث أن الرقم الأول هو رقم مكان الصورة على محور الـ Y أما الرقم الثاني فهو على محور الـ X.

عمل إنحناءات في زوايا الإطار الخارجي:

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

Border-radius: 30px;

لحظ أننا كتبنا هنا رقم واحد أما إذا كتبنا رقمين فإن الرقم الأول سيؤثر على الزاوية العليا من جهة اليسار والمقابلة لها أسفل يمين، أما الرقم الثاني فسوف يؤثر على أعلى اليمين وأسفل اليسار هكذا:

Border-radius: 100px, 30px;

أما إذا أضفنا رقم ثالث فسيؤثر على الزاوية التي في أسفل يمين الإطار، ولو أضفنا رقم رابع فسيؤثر على الزاوية المتبقية.

تصميم الظل:

نستخدم التوصيف التالي لتصميم ظل خاص بمقطع محدد أو صورة محددة:

Box-shadow: black 10px 30px 10px;

سنلاحظ في هذا التوصيف وجود لون وثلاثة أرقام ولاحظ أن الفاصل المستخدم هنا هيا المسافة؛ سبق وأن قلنا أن اللون يمكن كتابه بأكثر من وصف، أما الرقم الأول يشير إلى بعد الظل من جهة اليمين والرقم الثاني يشير إلى بعده من جهة أسفل، أما الرقم الثالث فيشير إلى ضبابية الظل فكلما زاد كلما كان خفيفًا وكان منتشرًا.