ادوات لتوليد اكواد CSS فى غاية الاهمية لمصممين الويب

web design 2038872 1280
 
مهمة تصميم المواقع قد تصبح شاقة احيانًا نظرًا لكثرة التفاصيل فى كتابة الكود , ومن هنا يأتى دور بعض الادوات المساعدة البسيطة لتوليد خصائص معينة ل CSS بطريقة بسيطة وسهلة لذلك جلبت لكم اليوم مولدات لاكواد CSS استخدمها بكثرة وستفيدك حتمًا اثناء تصميم الويب وتضيف تأثيرات جميلة إلى تصميمك
 
 
خاصية Gradient تسمح لك بالتدرج فى الالون من لون إلى لون اخر او التدرج بين مجموعة من الالوان , قبل هذه الخاصية كان عليك استخدام صورة جاهز مما يعنى بطء فى تحميل صفحة الويب , الان بامكانك استخدام هذه الخاصية وتوليد الكود المناسب لما تريد فعله من تدرج من الموقع التالى  CSSMatic Gradient Genertator .
 
كل ما عليك هو تحديد مجموعة من النقاط والوان هذه النقاط على اليسار كما هو بالصورة بالاسفل وتحديد خصائص كل لون من الشفافية Opacity وغيرها , او يمكنك استخدام Presets جاهزة مباشرة , وبعد ذلك يمكنك نسخ الكود على اليمين بكل بساطة واستخدامه فى الكود الخاص بك .
 
05 cssmatic gradient generator
 
 
خاصية مهمة جدًا وهى تنعيم الحواف للاشكال مثل المربع والمستطيل وغيرها ونراها كثيرًا فى الازرار على المواقع , عن طريق هذه الاداة هنا  , يمكنك كما بالصورة فى الاسفل تحديد قيمة التقوس فى الحواف لكل الاركان فى نفس الوقت عن طريق All Corners , او كل حافة على حده عن طريق Top Left , Top Right ,Bottom Left , Bottom Righ . قيمة التقوس تكون بالبكسل دائمًا .
 
cssmatic border radius
 
 
هذه الاداة تعنى من اسمها توليد ظلال حول العنصر , وهى مهمة جدًا فى اضافة شكل جمالى للعناصر , ومولد هذا كود هذه الخاصية هنا  , يمكنك بكل سهولة من اضافة الظلال دون الحاجة إلى الدخول فى تفاصيل هذا الكود .
 
وكما هو بالصورة فى الاسفل يمكنك استخدام الخواص على اليسار حتى الوصول إلى الشكل المطلوب عن طريق Horizontal Length وتعنى ازاحة الظل فى الافقى , Vertical Length  وتعنى ازاحة الظل فى الافقى , باقى الخواص ليس لها ترجمة واضحة بالعربية ولكن عن تجربتها ستفهم بسهولة اهميتها 🙂
box shadow generator
 
 
مولد ظلال ايضًا ولكن هذه المرة للنصوص , فهذا التأثير الجميل يجعل النص بارز وواضح , يمكنك التغير فى خصائص الخصائص كما بالصورة فى الاسفل للوصول لنتيجة مناسبة .
 
 
 
هذه الخاصية الرائعة لا تتيح لك تدرج فى الالوان فحسب انما ايضًا تحريك هذه الالوان ويمكنك فهم هذا التأثير الرائع هنا .
 
gradient animator
 
 
ربما اردت اضافة بعض Noise إلى الخلفية الخاصة بك لاضافة تأثير جميل , فهذه هى الاداة المناسبة لذلك ويمكنك تجربتها هنا
 
noise
 
الموقع الاخير معنا هو موقع شامل يشمل هذه الخصائص وغيرها ولكن تركتها فى النهاية لان التعامل معه ليس سهل جدًا ولكن ما ان تعتاد عليه سيوفر عليك الكثير من الوقت ادعوك لتجربته واكتشاف ما فيه بنفسك هنا
 
 
وفى الختام اتمنى من الله ان اكون قد وفقت , وادعوكم لمشاركتنا فى التعليقات عن ايه ادوات من هذه النوعية تستخدمها حتى يستفيد الجميع وشكرًا .
 

مقالات ذات صلة

الدرس الخامس : تصميم ودجات القائمة الجانية

كما نتذكر من شكل التصميم من الدروس السابق فان مساحة القائمة الجانية هى الربع اي ثلاث اعمدة من نظام...

كتب بواسطة عمرو العربى

مؤسس مطور

التعليقات

اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

*