البحث في الموقع

سنتعلم طريقة تصميم علبة حليب ثلاثية الأبعاد وسنعتمد على أداة 3d box tool والخطوط الوهمية التي تسمى بالأدلة Guide مع بعض الأدوات الأخرى لنحصل في النهاية على هذه النتيجة. أداة الصندوق ثلاثي الأبعاد 3d box tool هناك عدة طرق لنحصل على رسومات ثلاثية الأبعاد في إنكسكيب دون الحاجة فعليا لهذه الأداة، إلا أن هناك الكثير من زوايا النظر التي يصعب تنفيذها بغير هذه الأداة. لو رسمت صندوقا عن طريق الأداة، ستلاحظ أن الصندوق محاط بمجموعة من الخطوط، وما يهمنا معرفة في هذا المقال عن هذه الأداة ما يلي: الخطوط الملوّنة المحيطة بالشكل يمثل كلا منها بعدا ويرمز لكل بعد بالرمز (X, Y, Z) بتحريكنا لهذه الأبعاد الثلاثة يمكن أن نحصل على زوايا وأشكال مختلفة ومتعددة للصندوق. في الشريط العلوي للأداة سنلاحظ خانات للأبعاد الثلاثة لكتابة زاوية كل بعد وبجانب كل خانة علامة التناظر || ، عند تفعيل هذه العلامة فإن الخطين التابعين للبعد لن يلتقيا، وعند إلغائها سنلاحظ نقطة تدعى بنقطة التلاشي حيث يلتقي خطّا البعد عند نقطة معينة. خطوات رسم علبة الحليب ارسم صندوقا بأداة 3d box tool وستلاحظ مجموعة من الخطوط التي تحيط به بتحريكها سنصل للشكل المطلوب. إن لم تكن حصلت على الشكل المبدئي الذي حصلنا عليه فتأكد من كون البعد Y بزاوية 90 وأن خيار التناظر مفعّلا فيه فقط وليس مفعّلا مع البعدين الآخرين، وأن الخطوط الصفراء تقع يمين الصندوق وتمتد من حافته اليمنى، بينما تمتد الخطوط الحمراء من الحافة اليسرى لجهة اليسار. تحريك العقدة التي تمثل نقطة التلاشي أو الالتقاء لكل بُعْد تؤدي لتغيير زاوية الرؤية للصندوق، بينما تحريك العقد المحيطة بالصندوق نفسه اليمنى يمينا أو يسارا أو للأعلى والأسفل يؤدي لتغيير حجم الصندوق (ستحتاج للقليل من التجارب في بداية استخدامك للأداة لذا لا تقلق إذا لم تصل سريعا للشكل المطلوب). لا تجعل الصندوق بطول علبة الحليب التي نرغب برسمها بل يكفي تكوين الجزء العلوي منه والباقي سنكمله بطريقة أخرى لتسهيل عملية الحصول على الشكل المطلوب. إذا وصلنا للزاوية والشكل المناسب للجزء العلوي من علبة الحليب سنحول الصندوق لمسار عن طريقة خيار Object to Path من قائمة المسار Path من الشريط العلوي للقوائم، ثم نفك التجميع عن الصندوق، وبهذا لا يكون بالإمكان التعديل على الشكل بنفس الآلية السابقة إذ ستختفي تلك الخطوط الملوّنة المحيطة بالصندوق. نختار أداة التحرير Node tool بينما ما زالت قطع الصندوق محدّدة، ثم نسحب مؤشر السهم حول العقد السفلية للصندوق لتحديدها. نسحب العقد للأسفل مع الضغط على Ctrl للمحافظة على محاذاتها إلى أن نصل للطول الذي نرغب به للعلبة. نعود لأسهم التحديد ثم من الشريط العلوي نعكس العلبة أفقيا. من الشريط العلوي فعّل خيار Snap cusp Nodes للالتقاط العقد الحادة. من المسطرة العلوية لشاشة الرسم نضع مؤشر الفأرة ثم نسحب منه خطا وهميا يسمى دليل. نسحب الدليل للأسفل إلى أن تلتقط العقدة الموجودة فيه العقدة بين المضلعين وسط العلبة. اضغط على زر Shift لتظهر علامة التدوير عند المرور على الدليل وقم بتدوير الخط إلى أن يلتقط العقدة اليسرى للعلبة، وذلك بتقريب مؤشر الفأرة أثناء التدوير عند الحافة اليسرى للعلبة. كرّر نفس الأمر مع الجهة السفلية اليسرى للصندوق، بسحب دليل جديد وتدويره بما يتناسب مع الحافة السفلية اليسرى للصندوق، ليتشكل لنا دليلان يمتدان من يسار الصندوق ويلتقيان عند نقطة معينة. كرّر الخطوات نفسها مع جهة اليمنى، ولتميز الأدلة الجديدة؛ سنلوّنها بلون مختلف عن طريق الضغط على الدليل مرتين متتاليتين، ومن النافذة المنبثقة نغير اللون للأحمر. لو قمنا بتصغير الشاشة عن طريق زر – من لوحة المفاتيح للاحظنا التقاء الخطوط عند نقطة معينة، ويمكننا اعتبار الجهة اليمنى ممثلة للبعد z والجهة اليسرى ممثلة للبعد x ، وسبب قيامنا بهذا هو مساعدتنا على رسم بقية التفاصيل بسهولة وبأبعاد مناسبة للعلبة. أضف دليلا جديدا واسحب عقدته لنقطة التقاء الخطين الأحمرين، ولوّنه باللون الأخضر لتمييزه، ثم قم بتدويره إلى أعلى الدليل الأحمر العلوي إلى أن تصل للارتفاع الذي ترغب أن يكون عليه الشكل المثلث أو الشبيه بالخيمة أعلى علبة الحليب. استخدم أداة الرسم المنحني Bezier tool لرسم المضلع المشكل لرأس العلبة بالاستعانة بالدليلين الأحمر والأخضر. بأداة الرسم المنحني ارسم مثلثا في طرف الصندوق الأيسر بالاستعانة بالشكل الذي رسمناه توًا. أضف دليلا جديدا فوق الدليل الأخضر السابق مع جعله بارتفاع أقل، لنرسم مضلعا جديدا تمثل القطعة التي تقع أعلى علبة الحليب. يمكنك التعديل على العقد عن طريق أداة التحرير بتحريكها لتنطبق مع العقد التي تقع أسفلها لضبط الشكل. كرّر المثلث مجددا واسحب عقدته العلوية إلى الأسفل واجعلها ملاصقة لضلع المثلث الأصل الأيمن. قم بإخفاء الأدلة مؤقتا عن طريق قائمة العرض View ثم أزل علامة صح عند خيار الأدلة Guide. لوّن العلبة باللون الذي ترغب به مع تغيير الدرجة لكل قطعة للحصول على التأثير المناسب. ستظهر بعض الزوائد للقطع الخلفية للصندوق، والتي تستطيع الوصول لها عن طريق الضغط على زر Alt بتحديد الشكل الذي يتقدمها ثم تحديدها مجددا في الجهة التي تقع فيها إلى أن تصل لها ثم احذفها. أعد الأدلة من قائمة العرض مجددا بوضع علامة صح عندها، وقم بالتخلص من الألة الخضراء التي رسمناها سابقا من أجل رأس العلبة لأننا لم نعد بحاجتها. أضف دليلا جديدا لوّنه باللون الأصفر، وبنفس الطريق السابقة اجعله ينطلق من نقطة التقاطع للأدلة الحمراء وقم بتدويره إلى داخل العلبة حيث المكان الذي ترغب أن تضع فيه الشريط الورقي لبيانات الحليب. أضف دليلا أصفر آخر بنفس الطريقة وقم بتدويره إلى أن تصل للارتفاع الذي ترغب أن يكون عليه الشريط الورقي. من المسطرة اليسرى التي تقع يسار مساحة الرسم اسحب دليلا جديدا وضعه في منتصف العلبة ولوّنه باللون الأخضر لتمييزه. أضف دليلين جديدين وليكونا باللون البنفسجي يمتدان من نقطة الالتقاء x للخصوص الزرقاء مع مراعاة التقاء كل دليل مع الدليل الأصفر الذي يقابله عند نقطة التقائهما مع الدليل الأخضر عند تدويرهما. ارسم بأداة الرسم المنحني مضلعا في الجهة اليمنى مستعينا بالخطوط الوهمية الصفراء اليمنى مع جعل حدوده اليسرى زائدة عن العلبة لترتيبها بطريقة أسهل في الخطوة القادمة. كرّر المضلع الأصل الرمادي الذي رسمنا الشكل الجديد فوقه، ثم حدّده هو والمضلع الجديد، ومن قائمة المسار Path اختر أمر التقاطع Intersection. لوّن الشكل الناتج باللون المناسب، واخترنا هنا درجة من درجات اللون الوردي، ثم أعد نفس الخطوات مع الجهة اليسرى ولوّن القطعة بدرجة أقتم، ثم أخفي الأدلة مجددا. ارسم في رأس العلبة دائرة كاملة الاستدارة بالضغط على Ctrl أثناء الرسم، لتتكون منها فتحة الحليب. اضغط على الدائرة بأسهم التحديد مرتين لتظهر أسهم التدوير، ثم مع الضغط على Ctrl اسحب السهم الأيمن المتوسط خطوة للأسفل، ولونها باللون الوردي القاتم. كرّر الدائرة مجددا ولونها باللون الفاتح وصغّرها قليلا واسحبها لليمين وللأعلى قليلا حيث ارتفاع الغطاء. فعّل من الشريط العلوي خيار التقاط المسار Snap to Path ثم بأداة الرسم المنحني ارسم مضلعا يصل بين الدائرتين من عند الحواف الجانبية التي لا يظهر معها انثناءات الدائرة عند توحيد المضلع مع الدائرة السفلية. في الخطوة الأخيرة نقوم بتوحيد المضلع مع الدائرة السفلية القاتمة لتكتمل غطاء فتحة الحليب. النتيجة النهائية

سنتعلم خطوات عمل صندوق مفتوح ومغلق من الورق المقوى بنموذجين مختلفين، مع توضيح خطوات كل نموذج. النموذج الأول ارسم مربعا بأداة المربع والمستطيل من شريط الأدوات يسار مساحة الرسم مع الضغط على Ctrl أثناء الرسم ليعطينا الشكل المربع. من تبويب رسم الحد Stroke paint في لوحة التعبئة والحدود Fill and Stroke أزل الحدود عن الشكل إن وُجِدَتْ. من قائمة المسار Path من الشريط العلوي اختر Object to Path لتحويل الشكل إلى مسار ليصبح الشكل محاطا بأربع عقد Nodes. بسهم التحديد الذي يقع أول شريط الأدوات حدّد الشكل مرتين لتظهر لنا أسهم التدوير، ثم من السهم الأيمن المتوسط اسحب السهم مرة للأسفل مع الضغط على Ctrl للتحكم بعملية السحب. لوّن القطعة باللون المناسب من شريط الألوان السفلي أو من لوحة التعبئة والحدود، ولتكن درجة من درجات اللون البرتقالي، يمكنك معرفة الدرجة التي اخترناها من لوحة التعبئة والحدود على يمين الشاشة. كرّر الشكل بالضغط عليه بالزر الأيمن للفأرة ثم اختيار الأمر Duplicate. من الشريط العلوي لأداة التحديد اعكس الشكل المكرر أفقيا. اجعل النسخة المكررة بدرجة أقتم من النسخة الأصل. من الشريط العلوي لخاصية الالتقاط والكبس فعل الخاصية من خيار Enable Snapping. اختر من نفس الشريط خيار Snap cusp Nodes ليتم التقاط الزوايا أو العقد الحادة، ثم حرّك الشكل المكرر جهة اليمين إلي أن يتم التقاطه من الشكل الأصل. نحدد كلا الشكلين بالاستعانة بزر Shift أثناء التحديد، ونكررهما، ثم من الشريط العلوي نعكسهما عاموديا ونلونهما بدرجات من درجات اللون البني على أن نجعل الأيسر أكثرهما قتامة. نعيد الشكلين إلى الخلف عن طريق خيار Page down من الشريط العلوي بحيث يكونا خلف الشكلين السابقين ونضعهما في المكان المناسب لاكتمال الصندوق. ملاحظة: لإلغاء تحديد أي شكل انقر في أي مكان في مساحة الرسم الفارغة. كرّر متوازي الأضلاع الأيمن الأمامي ولونه بدرجة مختلفة وبأداة التحرير Node tool حدد العقدتين السفليتين للشكل معا إما بسحب مؤشر الفأرة حولهما أو بالاستعانة بزر Shift لتحديدهما معا. نرفع العقدتين للأعلى إما بسحبهما بمؤشر الفأرة مع الضغط على Ctrl أثناء السحب، أو من السهم العلوي من أسهم التحكم في لوحة المفاتيح، إلى أن نصل للارتفاع المطلوب. نحرك العقدتين لجهة اليمين لتتشكل عندنا قطعة الصندوق العلوية والتي هي عبارة عن قطعة من غطاء الصندوق المفتوح. كرر القطعة وحركها للأعلى عند متوازي الأضلاع البني الأيسر في الجهة المقابلة ليتم التقاط العقد السفلية لقطعة الغطاء من العقد العلوية للقطعة البنية. كرر الشكل مرة أخرى واعكسه أفقيا من الشريط العلوي، ثم أعد تكرار النسخة المعكوسة توًا وضع كلا من القطعتين في طرف من أطراف الصندوق المتبقية، بحيث تكون جميع القطع ممتدة خارج الصندوق. عد للقطعة التي أنشأناها أولا وأعد تكرارها ولونها بلون قاتم من تبويب التعبئة Fill في لوحة التعبئة والحدود من خلال شريط L. حدّد العقدتين السفليتين للشكل المكرر واسحبها للأسفل وحركها قليلا اتجاه اليسار بغرض إنشاء ظل للقطعة الأصل. احذف الزوائد للظل بتكرار متوازي الأضلاع الذي يقع عليه الظل ثم حدد الظل مع الشكل المكرّر ومن قائمة المسار اختر أمر التقاطع Intersection. من تبويب التعبئة لوّن الظل بتدرج خطي Linear gradient واختر من أسفل التبويب زر Edit gradient لتعديل التدرج. ستظهر عقدتين حول خط التدرج تمثل كل عقدة لون من ألوان التدرج، سنبقي ألوان العقد كما هي، لكننا سنحرك العقدة الأولى للأعلى لجهة اليسار، بينما الأخرى الشفافة للأسفل لجهة اليمين ليبدأ الظل بالاختفاء كلما اتجهنا للأسفل. كرر الظل واعكسه أفقيا وضعه في الطرف المقابل وأرسله خطوة للخلف. أكملنا الصندوق الأول المفتوح يمكننا أن نقوم بتجميعه عن طريق تحديد جميع أجزائه ثم بالزر الأيمن نختار Group ثم نغير حجمه عن طريق أسهم التحديد مع الضغط على Ctrl+Shift أثناء التصغير للمحافظة على أبعاده. لإنشاء الصندوق الثاني المغلق قم بتكرار الصندوق المفتوح واسحبه لجهة اليسار مع الضغط على Ctrl أثناء السحب ليبقى بنفس المحاذاة. قم بفك التجميع عن الصندوق عن طريق خيار Ungroup من الزر الأيمن ثم احذف القطع الصغيرة الممتدة أعلى الصندوق لعدم الحاجة لها كون الصندوق مغلق. استخدم أداة الرسم المنحني Bezier tool لرسم شكل شبيه بالمعين أعلى الصندوق مع التأكد من كون خيار الالتقاط ما زال مفعّلا لمساعدتنا في التقاط الحواف العلوية للصندوق. ملاحظة: إن لم يسبق لك استخدام أداة الرسم المنحني، فكل ما عليك هو الاقتراب من العقدة الأولى التي ستبدأ منها ليتم التقاطها ثم تضغط عليها بمؤشر الفأرة؛ لتنشأ العقدة الأولى ثم تتجه إلى العقدة الثانية وتضغط بالمؤشر لتنشأ العقدة الثانية وهكذا عند الثالثة ثم نتجه للعقدة الأولى ليتم إغلاق الشكل. إذا أخطأنا لأي سبب قبل الانتهاء من رسم الشكل يمكننا اختيار زر الهروب Esc لإعادة الرسم من جديد. لو كنّا نرسم شكلا غير مغلق يمكننا الضغط على زر الإدخال Enter لإنهاء الشكل كما سيمر علينا في الخطوات القادمة. كبّر الشاشة عند الصندوق الثاني عن طريق زر + من لوحة المفاتيح (وعند الرغبة بالتصغير اضغط زر – من لوحة المفاتيح). ارسم شريطا لاصقا فوق الصندوق ليكون محكم الإغلاق، ولتتمكن من رسمه فعّل من شريط الالتقاط والكبس العلوي خيار Snap to Path لالتقاط المسار. ارسم بأداة الرسم المنحني Bezier مضلعا متوازي الأضلاع، ينطلق من حافة المعين العلوية اليمنى ثم يحط على الحافة السفلية اليسرى للمعين حيث سيتم التقاطه من الحافتين، مع الضغط على Ctrl أثناء الرسم لمساعدتنا على الحصول على خط متوازٍ مع المعين. ثم مع الاستمرار بالضغط على Ctrl اتجه بالخط للأسفل بمقدار يسير حيث الارتفاع الذي سيبدو عليه الشريط اللاصق ثم اتجه إلى اليسار حيث العرض الذي سيكون عليه، ثم عد بالاتجاه المعاكس بخطوط متوازية مع الخطوط السابقة وأغلق المضلع من الأعلى. حدد المضلع الذي رسمناه أولا ثم حدد المعين تاليا، ومن لوحة المحاذاة والاصطفاف Align and distribute حاذهما عاموديا ليصبح الشريط اللاصق في منتصف المساحة العلوية للصندوق. من تبويب رسم الحد أزل الحدود للشريط اللاصق، ومن تبويب التعبئة لوّن الشريط بدرجة من درجات اللون البرتقالي واجعل شفافيته Opacity للمنتصف. ارسم بأداة الرسم المنحني خطًا فوق الشريط اللاصق على المساحة العلوية للصندوق ولإنهائه اضغط على زر الإدخال Enter. قم بمحاذاة الخط عاموديا مع الشريط اللاصق ولوّنه باللون المناسب. حدّد الطرف السفلي للشريط اللاصق (المساحة بين العقدتين) ثم أضف ثلاث عقد عن طريق الضغط مرتين على خيار Insert new Nodes من الشريط العلوي بعد اختيار أداة التحرير. أزل تحديد العقد الثلاثة عن طريق النقر على أي مكان في مساحة العمل الفارغة ثم حدد العقدة الثانية والرابعة من جهة اليمين وارفعهما للأعلى بشكل مستقيم عن طريق أسهم التحكم أو بزر الفأرة مع الضغط على Ctrl. حدد جميع أجزاء الصندوق المغلق وقم بتجميعه؛ ليكتمل عندنا النموذج الأول من الصندوقين. النموذج الثاني كرر صندوقي النموذج الأول واسحب النسخة المكررة للأسفل مع الضغط على Ctrl أثناء السحب ثم قم بفك تجميعها. لون جميع الأشكال باللون الأبيض بينما ما زالت محددة، ومن تبويب رسم الحد أضف لها حدودا باللون الأسود. من تبويب سمة الحد Stroke style اجعل عرض الحد 6 أو ضع القيمة التي ترغب بها. ألغ تحديد أجزاء الصندوقين المكررين، ثم لوّن الشريط اللاصق بعد إزالة حدوده بدرجة من درجات اللون الرمادي، واجعل عرض الخط المرسوم فوقه أقل من عرض الصندوق. لوّن المضلع الأيمن الخلفي للصندوق باللون الأسود. ارسم بأداة الرسم المنحني خطًا مائلا في مساحة الرسم الفارغة وليكن عرض الحد 6 كعرض حدود الصندوقين. كرر الخط واسحبه للأسفل لجهة اليسار بحيث تكون هناك مساحة بين الخطين. من شريط القوائم العلوية اختر قائمة الإضافات Extensions ثم من القائمة اختر الإنشاء من المسار Generate from Path ومنها اختر أمر التوليد Interpolate . في نافذة التوليد Interpolate فعّل خيار العرض المباشر Live preview لتظهر لك التغيرات بشكل مباشر. في خانة خطوات التوليد Interpolate steps ضع العدد الذي ترغب بتوليده بين الخطين واخترنا هنا العدد 30 . إذا كانت النتيجة مرضية فاختر زر Apply لتطبيق التأثير ثم أغلق النافذة. حصلنا على مجموعة من الخطوط ستكون موجودة في مجموعة لذا سنحدّدها ونفك التجميع عن طريق اختيارها بالزر الأيمن ثم اختيار Ungroup. نحدد جميع الخطوط بما فيها الخطوط التي رسمناها في البداية، ثم من قائمة المسار Path نختار Stroke to Path لتحويل هذه الحدود لمسار. من نفس القائمة نختار Union لتوحيدها معا بعد التأكد من كونها ما زالت محدّدة ثم نسحبها فوق الصندوق المفتوح على متوازي الأضلاع الأيسر الخلفي. نكرّر متوازي الأضلاع الذي وضعنا الخطوط فوقه؛ ولكي نصل إليه بين الخطوط نضغط على Alt ونضغط عليه إلى أن يتم تحديده، ثم نحدد الخطوط مع الشكل المكرّر ومن قائمة المسار نختار Intersection. نعيد الخطوط التي حصلنا عليها للخلف عن طريق خيار Page down. نكرر الخطوط التي حصلنا عليها مجددا ونعكسها أفقيا ونضعها على متوازي الأضلاع الأيسر الأمامي للصندوق، ثم نكرره مرة أخرى لنضعه في جهة اليمين دون الحاجة لعكسه، ونعطيه تدرجا بحيث تمتد الخطوط أعلى الصندوق فقط. نكرر الخطوط مرتين مجددا ونضعها على القطعة الصغيرة اليمنى التي تمتد خارج الصندوق بحيث تغطيها النسختين المكررتين بشكل مرتب حيث نتأكد من تطابق خطوط المجموعتين معا، ثم نوحدهما وبتكرار القطعة الأصلية وتحديدها هي والخطوط المحددة واختيار أمر التقاطع Intersection نحصل على الشكل المطلوب. ملاحظة: يمكن تسهيل هذه الخطوة بترك نسخة من الخطوط الموحدة الأولى قبل تطبيق أمر التقاطع عليها، بحيث نكتفي بأخذ التقاطع مجددا دون الحاجة لتكرار الخطوط مرتين. قم بتكرار خطوط الصندوق المفتوح للمتوازيات الأمامية واسحبها على الصندوق المغلق، مع إزالة التدرج عن الخطوط اليمنى أو حذف الخطوط اليمنى إن رأيت ذلك مناسبا. اجعل الشريط اللاصق أقتم ليكون أوضح من خلال الخطوط أو ارفع من قيمة الشفافية، ليكتمل النموذج الثاني من الصندوقين. النتيجة النهائية

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS للتحكّم بالمساحة الّتي تحتلّها العناصر عندما تُعرض في الصّفحة، وسنتدرّب على ذلك بتغيير المساحة وإضافة بعض القواعد الّتي تؤثر على هيئة العناصر. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. (هذا الدرس) رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. الصناديق (Boxes) عندما يعرض متصفّح عنصرًا، فإنّ هذا العنصر يحتلّ مساحة معيّنة من الصّفحة، وتتكوّن هذه المساحة من أربعة أجزاء. في وسط المساحة هناك جزء يحتاجه العنصر لعرض محتواه، وحوله مساحة نُسمّيها الحشوة (padding) وتحيط بها الحدود (border)، وحول هذه الأخيرة نجد الحوافّ (margin) الّتي تفصل العنصر عمّا يجاوره من العناصر. يظهر اللون الرمادي الفاتح أجزاء التّخطيط: هذا ما تراه في المتصفّح: توزع اللون تكون الحشوة دومًا من لون خلفيّة العنصر، فعندما يُطبّق لون الخلفيّة على العنصر، فإنّك ستشاهد العنصر وحشوته يكتسبان اللون نفسه، أمّا الحوافّ فهي شافّة دومًا. للعنصر خلفيّة خضراء: هذا ما تراه في المتصفّح: الحدود يمكن استخدام الحدود لتزيين العناصر بخطوط أو صناديق. لتعيين الخطوط ذاتها حول كامل العنصر، استخدم الخاصّة border. عيّن العرض (عادة بالبكسل للعرض على الشّاشات)، والتنسيق واللّون. فيما يلي التنسيقات المُتاحة: يمكن أيضًا تعيين التنسيق إلى none أو hidden للنّص صراحة على إزالته، أو تعيينه إلى transparent لجعله غير مرئيّ رغم شغله للمساحة المخصّصة له. لتعيين الحدود لكلّ جانب على حدة، استخدم الخصائص border-top و border-right و border-bottom و border-left. يمكن استخدام إحدى الخواص لتعيين الحدّ على الجانب الموافق فقط، أو استخدامها معًا لتعيين حدود مختلفة التنسيق على الجوانب المختلفة. مثال هذه القاعدة تحدّد لون خلفيّة العناوين وتنسيق حدودها العلويّة: h3 { border-top: 4px solid #7c7; /* mid green */ background-color: #efe; /* pale green */ color: #050; /* dark green */ } هكذا تبدو النّتيجة: هذه القاعدة تجعل الصّور أسهل تمييزًا بإحاطتها بحدود رماديّة: img {border: 2px solid #ccc;} النّتيجة: الحواف والحشوات استخدم الحوافّ والحشوات للتأثير على مواضع العناصر وخلق مساحة حولها. استخدم الخاصّة margin أو padding لتعيين عرض الحوافّ والحشوات (على التّرتيب). إن قمت بتعيين قيمة مفردة للخاصّة، فإنّ هذا يٌطبّق على كلّ جوانب العنصر (فوق، يمين، تحت، يسار). إن قمت بتعيين قيمتين للخاصّة، فإنّ الأولى تطبّق على الجانبين العلوي والسّفليّ، والثّانية تُطبّق على الجانبين اليمين واليسار. إن قمت بتعيين 4 قيم، فإنّها تطبّق بهذا التّرتيب: فوق، يمين، تحت، يسار. مثال القاعدة التاليّة تجعل الفقرات ذات الصّنف remark مُميّزة بإعطاءها حوافّ حمراء محيطة بها بالكامل. تفصل الحشوة الحدود عن محتوى العنصر قليلًا. تدفع الحوافّ على الجانب الأيسر الفقرة بعيدًا قليلًا عن النّص المجاور. p.remark { border: 2px solid red; padding: 4px; margin-left: 24px; } تفاصيل أكثر عند استخدام الحوافّ والحشوات للتأثير على مواضع العناصر، فإنّ ذلك قد يعقّد من طريقة تفاعل الأنماط مع الإعدادات المبدئيّة للمتصفّح، فالمتصفّحات المختلفة قد ترتّب العناصر بصورٍ مختلفة، وقد تبدو النتائج متشابهة إلى أن تغيّر شيئًا ما في ورقة الأنماط، ممّا يؤدّي إلى نتائج غير متوقّعة. للحصول على النّتيجة المرغوبة، قد تضطر إلى تغيير رماز المستند، وهذا ممّا سنناقشه في الدّرس القادم. تمرين: إضافة الحدود عدّل ملف CSS المٌسمّى style2.css، مُضيفًا هذه القاعدة لرسم خطّ في الصفحة فوق كلّ عنوان: h3 {border-top: 1px solid gray;} إن كنت قد أتممت التّمرين في الدّرس السابق، فغيّر القاعدة الّتي أنشأتها، وإلّا فأضف قاعدة جديدة تضيف مساحة تحت كلّ عنصر قائمة: li { list-style: lower-roman; margin-bottom: 8px; } حدّث المتصفّح لمشاهدة النّتيجة: تمرين أضف قاعدة واحدة إلى ورقة الأنماط تضيف حدودًا عريضة حول كامل المُحيطات بلون يذكر بالبحر، كهذا: (ليس عليك مطابقة الأبعاد والألوان بحذافيرها). شاهد الحل القاعدة التّالية تحقّق التأثير المطلوب: ul { border: 10px solid lightblue; } ما التالي؟ غيّرنا تخطيط بالمستند بتعيين الحوافّ والحشوات، سنتعلّم في الدّرس القادم كيف نغيّر تخطيط المستندات بطرق أخرى. ترجمة -وبتصرف- للمقال Boxes من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.