التصميم باستخدام ال css

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

 

حجر الأساس لبناء الصور باستخدام CSS

إذا ماذا نعني بصور الـ CSS؟ في الحقيقه ما هي إلا مجموعة من عناصر ال divs في HTML مزخرفه بإستخدام CSS, لنأخذ صورة هذا المربع كمثال

هذا المربع مثال لصورة مصنوعة من css و التي هي عبارة عن مربع قمنا بعمله بعنصر div واحد في HTML الذي يحتوي على كلاس أو class square

و قمنا بزخرفته باستخدام قوانين الـ  CSS

 

في الاساس، صور الـ CSS ما هي إلا مجموعة من عناصر الـ div مزخرفه ب CSS ومجموعة معا لتنتج صورة متكاملة.

هناك اعدادات يمكننا اتباعها لتسهل لنا انتاج صور الـ css و هي

١. إنشاء صندوق مخفي يعمل كلوحة رسم لنا

٢. لكل شكل div خاص به

٣. كل div يحتوي على كلاس css مميز به

٤. قواعد CSS مخصصة لكل كلاس في div

 

من خلال هذا المقال ، سنقوم بإنشاء صورة مصممة لغلاف القرآن الكريم

هيكل بناء الشكل النهائي

أولاً سيتم بناء شكل القرآن بالكامل أعلى مربع غير مرئي.

لا ننسى أبدًا أنه سيكون هناك صندوق مستطيل الشكل غير مرئي أدناه. وهو بمثابة المساحة الخاص بك.

الآن دعونا نقسم الصورة إلى أبسط أشكالها.

يمكننا أن نرى ببساطة أن الصورة  تنقسم إلى ثلاثة أقسام مختلفة

• غلاف الكتاب
• الغلاف العامودي  للكتاب (العامود الفقري للكتاب)
• صفحات الكتاب

 

الجزء العمودي للكتاب:

يتضح لدينا في هذا الجزء أنه يحتوي في أحد أركانه على شكل مستدير.

الصفحات:

تنقسم الصفحات إلى 3 أشكال أساسية مختلفة و هي:

•       الشكل البيضاوي الذي بداخله الخط المستقيم و الدائرة .
•       الخط المستقيم في الوسط .
•       والدائرة في الطرف الأيمن من الشكل البيضاوي .

غلاف الكتاب:

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

في الغالب أنك تتساءل، ما الغرض من فصل الاشكال الى عناصرها الاساسية؟ وسبب ذلك ان كنت تتذكر ان احدى عناصر بنية صور الـ css هو div مزخرف ب CSS فكل من هذه العناصر الأساسية ستكون div. هناك شئ مهم يجب عليك ملاحظته و أخذه بعين الاعتبار وهي العلاقة بين الشكل الحاوي parent و الأشكال التي بداخله child. لنأخذ صفحات الكتاب كمثال، الشكل الحاوي او ال parent هو  الشكل البيضاوي و الاشكال التي بداخله او ال child هم الخط المستقيم و الدائرة.

هذه العلاقة مهمة لان طريقه وضعنا للأشكال مبنية على الشكل الحاوي.

و شئ آخر هو ترتيب الاشكال لكننا سنتطرق لهذا الموضوع لاحقا

 

الـ HTML

 

في هذا الجزء، طريقة عملي غالبا ما تكون اضافه div، زخرفته ب css، ثم اضافه div آخر حتى يكتمل الشكل لكن لتوضيح الهيكل او البنيه، لننظر الى الـ HTML بدفعه واحده

 

من المهم ملاحظة أن بعض  الـ div متداخله مع بعض كما ذكرنا سابقا عن العلاقة بين الـ parent (الشكل الحاوي) و  الـ child (الشكل الذي بالداخل) مثل صفحات الكتاب

نلاحظ من الصورة في الاعلى ان الشكل الحاوي (parent) هو الـ div ذو الكلاس pages والاشكال في الداخل (child) هم عنصري الـ div اللذان يحتويان الاصناف page-line و page-curl

 

من الممكن انكم تتسائلون عن الغرض من تكراري لهذه العلاقة والسبب هو اننا سنقوم بتحديد موقع الشكل، طوله وعرضه بنسب مبنية على الشكل الحاوي (parent)

 

لنأخذ مثال لتتضح الفكرة، لدينا عنصر div ذو كلاس box بين عنصر الـ body (و الذي قمنا بتحديد طوله و عرضه ب 100%) كما يلي

نلاحظ أن الصندوق او ال box محدد الموقع ب خاصية absolute و قمنا بتحريكها للأسفل بمعدل 10٪ و لان الصندوق بين الـbody فيتحرك بنسبة للشاشه بقيمة 10٪ كما نرى من الصورة

والآن لنقم بتجربة وضع الصندوق داخل صندوق آخر و اعطائه خاصية absolute كما سبق و تحريكه بنسبة 10٪ من الأعلى كما يلي

سيقوم الصندوق box بالتحرك وفقا للشكل الحاوي parent في هذا المثال هو الـ div ذو الكلاس another-box فنلاحظ أن الصندوق (البنفسجي اللون) تحرك بقيمة 10٪ من الشكل الحاوي (بيج اللون)

كما نلاحظ أن كيفية تحرك موقع الشكل مبنية على الشكل الحاوي أيما كان.

 

تصميم css

لنبدأ بإعادة ضبط المتصفح بتغير الخاصية margin و padding مع تعيين الخاصية box-sizing لـ border-box

 

عنصر الـ body

نبدأ بتصميم الـ body بتغير خاصية الـ display ل flex و لكي تكون في منتصف الصفحه نقوم بإعطاء الخاصية justify-content القيمة center وهذا سيقوم بوضعه في المنتصف بالنسبة لعرض الصفحه ولكي نقوم بإنصافه بالطول نقوم بتعيين الخاصية align-items القيمة center و لا ننسى طول الصفحه و التي حددناها بقيمة 100vh (والتي تعني كامل طول الشاشة التي تعرض المتصفح)

 

الصندوق box

سنبدأ العمل على الصندوق الذي سيعمل كلوحة رسم لنا. لأننا قمنا بإعطاء العنصر body القيمة flex الصندوق سيكون في منتصف الصفحه تلقائيا. والان لتصميم صندوق،  سنقوم بتحديد الخاصية position ل relative (بسبب هذا الشرط، كل العناصر التي ستكون في محتوى الصندوق ستتحرك و تنشئ قيمها وفقا له، لأن الصندوق هنا يعمل كشكل حاوي) كما قمنا بتحديد الطول و العرض بقيمة 500px و بقية القيم كما هي موضحه في الصوره

و الان بما اننا قمنا بتحديد صندوقنا، نحن مستعدون لإدخال كل عناصر div بداخله. سأكررها مرة اخرى، من المهم ان يكون عناصر الdiv بداخل الصندوق وذلك لأن القيم التحريكية (top, right,bottom, left) مبنية على الشكل الحاوي box  و ليس الbody

 

غلاف القرآن

في الصورة ستجد الكود للغلاف والذي سنقوم بفصله و شرحه في الاسفل

 

قمنا بإعطاء الخاصية position القيمة absolute وهذا سيتيح لنا استخدام الخصائص top, left, right, left التي تعمل علي تحريك الشكل و بما أن الشكل بداخل الصندوق فيتحرك وفق الشكل الحاوي. و هنا بإعطاء الخاصية left القيمة 18٪ هذا يقوم بتحريك الشكل من يسار الشكل الحاوي بنسبة 18٪ بإتجاه اليمين. كما قمنا بإعطاء الشكل عرض (width) بقيمة 70٪ وطول بقيمة 90٪. كما قمنا بإعطائه حدود border بكثافة 10px مستقيم solid بلون من درجات الاسود، و حددنا اللون الخلفي background باللون الاصفر.

 

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

 

شكلنا الحاوي (الصندوق) يحتوي على طول و عرض بقيمة 500px و لنقل اني اردت الغلاف ان يحتوي على القيم 350px للعرض و 450px للطول، فبإمكانك استخدام هذه الحيلة لاستنتاج القيم

 

 

باستبدال القيم و استخدام المعادلة الموضحة في الاعلى نحصل على

70 = 100 * 500 / 350

90 = 100 * 500 / 340

 

و لكن تذكر مع الصور المبنية على الـ css تعتمد على الممارسة التي منها  تستطيع من النظر تقدير القيم.

من الكود المذكور في الأعلى نحصل على

 

الغلاف

 

 

نلاحظ هنا، اننا عينا قيمة absolute للموقع والذي يعني أنه سيتحرك بالنسبه للشكل الحاوي وفي هذه الحالة هو quran-cover و قمنا بإعطائه عرض 80٪ وطول بقيمة 85٪  و حدود شبيه بالشكل الحاوي و خلفية باللون الاخضر. اما بالنسبة لقيم الاعلى top و اليسار left نجد ان الشكل في منتصف الشكل الحالي و قمنا بذلك باستخدام المعادلة

بالنسبة لمثالنا، لانتصاف الشكل بالعرض، (%10 = 2 / (80 – 100)) من اليسار و الإنصاف بالنسبة للطول (%7.5 = 2 / (85 – 100)) من الأعلى. والان شكلنا مكون من

 

زخرفة الغلاف:

وصلنا للجزء الاجمل، سنقوم بتقسيم الشكل من الأعلى الى الأسفل

زخرفة الصندوق:

سنبدأ بالصندوق الزخرفي و شكله مألوف لأنه شبيه للأمثلة التي قمنا بعملها مسبقا  

مما يعطينا

 

الأشكال البيضاوية:

والان سنقوم بعمل الشكل البيضاوي الذي هو أساس الزخرفة في مثالنا

 

 

إذا جميع الاشكال متشابهة الفرق الوحيد هو موقع كل من الاشكال بالنسبة لقيمها (top, left, bottom, right) لكن لنقوم بشرح القيم كل على حده. قمنا بإعطاء الشكل العرض بقيمة 40٪ و طول بقيمة 30٪ وحدود ذات كثافة 10px مستقيمة solid و باللون الاسود و كما قمنا بإعطاء الشكل خلفية background باللون الاصفر. من الممكن أنك تتساءل ، كيف حصلنا على الشكل الدائري و هذا بالاصل ناتج عن خاصية الـ border-radius. انها شبيهه لخاصية استدارة الحدود في برامج الرسم. اذا لعمل شكل دائري نقوم بإعطاء الخاصية border-radius القيمه 50٪. أما بالنسبة لموقع كل من الدوائر (قيم الـ top, left, right, bottom) قمنا باستعمال المعادلة التي تقوم بانصاف الشكل المذكوره في الاعلى. سأترك لك عمليه كيف قمنا باستنتاج هذه الأرقام.

وبذلك الشكل الذي حصلنا عليه يكون

 

دقيقة… ما حصلنا عليه لا يشبه الزخرفة التي في الصورة التي نتبعها… انك محق، وذلك لأن في css لا نحصل على سهولة دمج الأشكال التي تأتي مع برامج التصميم و لكن هناك طريقه لتخطي هذه العقبة وهذا بإستخدام خاصية الطبقات او ال layers

 

و هنا نستطيع فهم وجود العنصر decoration-box-copy في ال html في الأعلي. هذا العنصر شبيه للصندوق الزخرفي decoration-box لكنه في طبقه أعلى من الدوائر. والآن لنرى ماذا يحدث عندما نقوم بنسخ و لصق نفس القيم للصندوق الزخرفي

سنحصل على

 

همممم لا يبدو الشكل صحيح، وذلك بسبب الحدود التي لا نرغب بها. بإستطاعتنا القيام ببعض التعديلات للحدود و الطول و العرض ل decoration-box-copy كما يلي

من المحتمل الآن أنك تتساءل ماذا يحدث هنا، وماذا يمكن أن تكون هذه الدالة calc وما سبب اختيارنا لهذه الأرقام. بإختصار دالة calc تسهل علينا عملية حساب قيم ذات وحدات مختلفة.  باستخدامها تستطيع طرح نسبة مئوية percentage من قيمة بكسل px وهنا قامت بمساعدتنا بالتخلص من الحدود

 

دعني اشرح ما يحصل هنا، الصندوق decoration-box محدد بـ border كثافته 10px وهذه القيمة طبقت لكل الجوانب ولذالك فإن العرض ليس مجرد 70٪ بل 10px on من اليسار + 70٪ + 10px من اليمين و كذلك ايضا بالنسبة للطول. وهذا سبب طرحي 20px من قيم الطول و العرض و بما اننا قمنا بإزالة الحدود قام بالتأثير على الموقع لذلك قمنا بإضافه 10px لكل من الاعلى top و اليسار left. و نستنتج من عملنا هذا

والان نقوم بإضافة الشكل الدائري في المنتصف ولا يحتاج لشرح لأنه شبيه لما قمنا به مسبقا

جميل! اجتزنا الجزء الصعب والآن سننتقل للعمود الفقري للكتاب

 

العمود الفقري للكتاب

 

 

قمنا بإعطائه قيمة absolute بالنسبه لموقعه position كما قمنا بتحريكه من اليسار بقيمة 8٪ ، قمنا بإعطائه عرض بقيم 10٪ وطول بقيمة 95٪ وهنا نريد استداره حد واحد من حدود الشكل (في مثالنا هذا نريد استداره الحد الاعلى من اليسار) فقمنا باستعمال الخاصية border-top-left-radius وإعطائه قيمة 50px. و نريد ايضا التخلص من الحد الذي في الجانب الايمن لاننا لا نريده ان يتداخل مع الغلاف

 

جميل لم يتبقى لنا الا صفحات الكتاب

 

صفحات الكتاب

الصفحات عبارة عن شكل مربعي بزوايا دائرية

لنقم بتغطية الخصاص التي تعرفنا عليها مسبقا، قمنا بإعطاء الموقع القيمة absolute و تحريكه من اليسار بقيمة 8٪ و حولناها للأسفل بإعطاء الخاصية bottom قيمه 0. قمنا أيضا بإعطائه عرض بقيمة 80٪ و طول بقيمة 12٪ وحددنا border بسماكة 10px واعطائه لون اسود.

 

بالنسبة للفة الصفحة (page-curl) نحتاج للتطرق لحيله للحصول على الشكل المرغوب، لعمل ذلك نبدأ بتحديد خاصية ال overflow وإعطائه القيمة hidden (مخفي) مما يعني, اذا تخطى أي شكل محتوي داخل طول او عرض الشكل الحاوي, لا نستطيع رؤيته. بعد ذالك نقوم بإزالة الحد الأيمن وكذلك استدارة الحد الأيمن

والان ننتقل الى الخط المستقيم (page-line) و الدائرة (page-curl)

 

و بذلك يكون قد استنتجنا تصميمنا اخيرا!

 

عظيم! قد قمت بأول تصميم لك بإستخدام صور الcss. الان تملك اللبنات التي تمكنك من تصميم اي شكل تحلم به. الان اشجعك ان تمارس البرمجه ب css و عمل كم من التصاميم، لان بالممارسة ستصبح محترف في التصميم.