بكفيك غمز!

أحمد شديد

UX/UI Designer, Frontend Developer

منذ 4 سنوات بواسطة

الرسم بإستخدام CSS وأهميته في تصميم الويب

الرسم بإستخدام CSS وأهميته في تصميم الويب

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

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

ملاحظة: لم أقم برسم الرسومات التالية، قمت فقط بالتدرب عليها وإعادة رسمها بإستخدام CSS.

Untitled-1

المثال الأول: الشطيرة السعيدة :D

 

burger2

المثال الثاني: الوجه الضاحك

 

happy-face

الهدف من الرسم بإستخدام CSS

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

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

أمثلة عملية أصبح عملها سهلاً بسبب إتقان الرسم بإستخدام CSS

 1- المثال الأول: تأثير التأشير على عنصر: عند التأشير ستكبر الدائرة الصغيرة التي بداخله.

See the Pen ee6f86ca856819f59541d1e5d37ff025 by Ahmad Shadeed (@shadeed) on CodePen.

2- المثال الثاني: رسم سهم عن طريق CSS Borders

See the Pen 64e326606c3b95f0c98c731f05de61d2 by Ahmad Shadeed (@shadeed) on CodePen.

المثال الثالث: إضافة خطوط داخل المربع عن طريق العناصر الزائفة Pseudo Elements وتحركيها عند التأشير.

See the Pen 5f8e30d785c94b956dd5c4678e3a0126 by Ahmad Shadeed (@shadeed) on CodePen.

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

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

شكراً لوصولك هنا =)

مصمم تجربة المستخدم UX وواجهات الإستخدام UI، مستشار ومطور واجهات أمامية Front-End Developer، مهتم في كتابة CSS للمشاريع الكبيرة.

  • http://www.halabweb.com/ Samer Halawani

    رائع يسلمو ايديك أحمد

    • Ahmad Shadeed

      الله يسلمك سامر

  • Abdulla Ahmed Seif

    يا رجل ما هذا المحتوى الرائع استمر لأني لم أعرف بك من قبل ووجدت دسامة في مدونتك (تم الاشتراك في النشرة البريدية أيضًا )

    • Ahmad Shadeed

      هذا شيء يسعدني جدا.. كل الشكر :)