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


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


خاصية Gradient تسمح لك بالتدرج فى الالون من لون إلى لون اخر او التدرج بين مجموعة من الالوان , قبل هذه الخاصية كان عليك استخدام صورة جاهز مما يعنى بطء فى تحميل صفحة الويب , الان بامكانك استخدام هذه الخاصية وتوليد الكود المناسب لما تريد فعله من تدرج من الموقع التالى  CSSMatic Gradient Genertator . 

كل ما عليك هو تحديد مجموعة من النقاط والوان هذه النقاط على اليسار كما هو بالصورة بالاسفل وتحديد خصائص كل لون من الشفافية Opacity وغيرها , او يمكنك استخدام Presets جاهزة مباشرة , وبعد ذلك يمكنك نسخ الكود على اليمين بكل بساطة واستخدامه فى الكود الخاص بك .



خاصية مهمة جدًا وهى تنعيم الحواف للاشكال مثل المربع والمستطيل وغيرها ونراها كثيرًا فى الازرار على المواقع , عن طريق هذه الاداة هنا  , يمكنك كما بالصورة فى الاسفل تحديد قيمة التقوس فى الحواف لكل الاركان فى نفس الوقت عن طريق All Corners , او كل حافة على حده عن طريق Top Left , Top Right ,Bottom Left , Bottom Righ . قيمة التقوس تكون بالبكسل دائمًا .



هذه الاداة تعنى من اسمها توليد ظلال حول العنصر , وهى مهمة جدًا فى اضافة شكل جمالى للعناصر , ومولد هذا كود هذه الخاصية هنا  , يمكنك بكل سهولة من اضافة الظلال دون الحاجة إلى الدخول فى تفاصيل هذا الكود . 

وكما هو بالصورة فى الاسفل يمكنك استخدام الخواص على اليسار حتى الوصول إلى الشكل المطلوب عن طريق Horizontal Length وتعنى ازاحة الظل فى الافقى , Vertical Length  وتعنى ازاحة الظل فى الافقى , باقى الخواص ليس لها ترجمة واضحة بالعربية ولكن عن تجربتها ستفهم بسهولة اهميتها :)


مولد ظلال ايضًا ولكن هذه المرة للنصوص , فهذا التأثير الجميل يجعل النص بارز وواضح , يمكنك التغير فى خصائص الخصائص كما بالصورة فى الاسفل للوصول لنتيجة مناسبة .



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



ربما اردت اضافة بعض Noise إلى الخلفية الخاصة بك لاضافة تأثير جميل , فهذه هى الاداة المناسبة لذلك ويمكنك تجربتها هنا


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


وفى الختام اتمنى من الله ان اكون قد وفقت , وادعوكم لمشاركتنا فى التعليقات عن ايه ادوات من هذه النوعية تستخدمها حتى يستفيد الجميع وشكرًا .
 

شارك الموضوع

مواضيع ذات صلة