هل يمكنك الرسم باستخدام CSS و HTML؟

هكذا يتيح لك CSS وHTML الرسم والقيام بأعمال التصميمعلى الرغم من أنها تمثل بعض الصعوبات نظرًا لأنها ليست لغات مصممة لهذا الغرض المحدد. CSS هو اختصار يأتي من اللغة الإنجليزية، Cascading Style Sheets أو Cascading Style Sheets، وهو مكتوب في كود HTML لإعطاء الهيكل والأسلوب لصفحة الويب.

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

كيفية الرسم في HTML مع CSS؟

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

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

إذا كنت ستفعل تصميم الدبعلى سبيل المثال، ابدأ بمربع كبير مكون من 500 بكسل وداخل الشكل، ستقوم بالرسم. يتم إنشاء المربع باستخدام علامة HTML المعروفة باسم div.

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

تحديد الألوان مسبقًا للرسم في CSS وHTML

أحد أهم الخطوات لتحقيق نتيجة مرضية في رسم CSS هو اختيار الألوان. في هذه اللغة، يتم تحديد الألوان باستخدام الرموز. لذلك، يجب عليك تحديدها مسبقًا واستخدام متغيرات التعريف لتحديد الكود الصحيح بسرعة. بهذه الطريقة، يمكنك بسهولة أكبر تتبع كل لون والصندوق الذي يقع فيه.

ابدأ في الإنشاء والرسم باستخدام CSS في HTML

الاستمرار معه مثال على رسم الدبسنقوم بعمل الحاوية الرئيسية الأولى. وفقًا للصورة الأساسية، يجب أن تكون حاوية دائرية. نختار المعلمة border-radius 50% لتحديد حجمها. إذا كنت تريد أن يكون وجه الدب في المنتصف، استخدم أمر flex ومحاذاة المركز للمحاور الرأسية والأفقية.

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

بعض عناصر تكرار النمط، على سبيل المثال العيون والأذنين. لذلك يجب عليك أن تكون محددًا وتشير إلى ما إذا كانت العين اليسرى (العين اليسرى) أو العين اليمنى (العين اليمنى). قم بإجراء هذا التمييز مع كل مكون يكرر النمط. في لغة CSS، لتحديد موضع العناصر وتحديدها بشكل صحيح يجب عليك استخدام المعلمات position:relative وposition:absolute. يمكننا استخدام هذه العلامات مع كل عنصر في CSS، بحيث يكون الموقع على الشاشة دائمًا صحيحًا ودقيقًا. لكي تكون المسافات دقيقة، يتعين علينا استخدام نفس قياسات المسافة لكلا المعلمتين.

الرسم باستخدام CSS و HTML ليس سهلاً

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

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

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

لماذا الرسم باستخدام CSS في HTML؟

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

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

الاعتبارات الرئيسية إذن عند الرسم باستخدام CSS هي:

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