10 أدوات مفيدة لتسهيل التصميم بـ CSS3


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

1- CSS3 Pie

هل تفاجأت لأن دعم مستعرض الانترنت (IE 6+) شبه معدوم، للأسف قد يصادفك وجود زبون يريد منك أن تصمم موقعه كي يظهر كما في المستعرضات الحديثة، لكنك فكرت أن ذلك لا يمكن في IE, إذاً إليك الحل, موقع CSS3 Pie  يخوّلك للقيام بأغلب خواص الإصدار الثالث من CSS على IE.

CSS3 Pie

2- CSS3 Builder

يستخدم هذا الموقع واجهة تفاعلية تشبه تماما واجهة برنامج الفوتوشوب (PhotoShop) تستطيع من خلاله تصميم مربعات جميلة جداً. أداة تفيد في حفظ الوقت بشكل رهيب.

CSS3 Builder

3- CSS3 Drop shadow generator

هذا الموقع يشبه جداً الموقع السابق إلا أنه في هذا الموقع يوجد مزلق تستطيع به التحكم تفاعلياً، كما تستطيع تحديد عرض وارتفاع المربع. قم بنسخ الكود الذي تلقاه في الأسفل واستمتع !

CSS3 Drop shadow generator

 

4- Cascader

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

Cascader

5- Border Radius.com

خاصية border-radius واحدة من أهم الخاصيات الجديدة في CSS3، هذه الأداة تجعلك قادر على صنع المربعات بسرعة والحصول على كود الـ CSS3.

Border Radius.com

6- Button Maker

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

Button Maker

7- CSS3 Generator

هذا الموقع لديه أغلب خواص CSS3، كما يظهر لك أن هذه الميزة تعمل على المتصفحات من الإصدار كذا وفوق مثلاً.

CSS3 Generator

8- Modernizr

هو سكربت يكشف إذا كان المتصفح يدعم CSS3، فإذا كان يدعم فإنه يطبق تعليمات CSS المحددة، وإلا فإنه سيطبق تعليمات CSS التي تحددها أنت إذا لم يكن المتصفح يدعم CSS3، أي ببساطة يشبه الشرط (إذا كان فافعل وإلا).

Modernizr

9- HTML 5 & CSS3 Support

هل تريد أن تعرف هل إنترنت إكسبلورر يدعم خاصية text-shadow مثلا؟ فقط ألق نظرة على هذا الموقع الذي يحدد المتصفحات والخواص التي تدعمها.

HTML5 & CSS3 Support

10- ورقة غش CSS3

عندما تقوم بكتابة الأكواد, فورقات الغش تكون مفيدة جداً كي تتذكر بعض الخصائص وبناء الجمل, قامت مجلة Smashing بإصدار هذه الورقة من الغش لـ CSS3، بإمكانك تحميلها وطباعتها، هنا (اضغط الزر اليمين ثم حفظ باسم)

CSS3 Cheat Sheet

هذه المقالة مترجمة بتصرف من المصدر

رد واحد على 10 أدوات مفيدة لتسهيل التصميم بـ CSS3

  1. عبدوو قال:

    شكرأأ يا غالي على الموضوع،
    مفيد جداًً للمصممين ~
    ،، ( تقبل تحيأتي ،)

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s