مولّد خصائص CSS

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

ما الذي ينشئه

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

يحدّث كل إعداد المعاينة وتعليمات CSS المُنشأة في الوقت نفسه، بحيث يمكن التحقق من التغييرات قبل نسخ التعليمات البرمجية.

كيفية حساب تدرج CSS خطي

ينتقل التدرج الخطي من لون إلى آخر على طول خط مستقيم. وصيغته في CSS هي:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

تُقاس الزاوية بالدرجات، من 0 إلى 360. وفي CSS، تتجه 0deg من الأسفل إلى الأعلى، وتتجه 90deg من اليسار إلى اليمين. وتحدد position1 وposition2 الموضع الذي يبلغ عنده كل لون كامل قوته، كنسبة مئوية من طول التدرج.

مثال

قيم البدء في المولّد هي زاوية مقدارها 90 درجة، واللون #ff5f6d عند 0%، واللون #ffc371 عند 100%. وينتج عن ذلك:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

السطر الأول لون احتياطي عادي للمتصفحات التي تفشل، لسبب ما، في عرض التدرج. أما السطر الثاني فهو التدرج نفسه.

صيغة التدرج الشعاعي

يمتد التدرج الشعاعي إلى الخارج من نقطة مركزية بدلًا من أن يمتد على طول خط. ويمكن أن يكون شكله دائرة أو قطعًا ناقصًا:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

ينشئ هذا المولّد دائماً تدرجاً شعاعياً دائرياً. ولا يوفّر خياراً لشكل القطع الناقص أو طريقة لتحريك النقطة المركزية؛ إذ لا يمكن تغيير سوى اللونين وموضعي توقفهما.

يستخدم كلا نوعَي التدرج في هذه الأداة لونين بالضبط، ويُحدَّدان بواسطة منتقيَي «اللون 1» و«اللون 2». ولا يوجد خيار لإضافة توقف لوني ثالث.

صيغة ظل الصندوق في CSS

ظل الصندوق هو ظل يُرسم حول حواف عنصر:

1box-shadow: h-offset v-offset blur spread color;
2

تحرّك h-offset وv-offset الظل يمينًا ويسارًا وأعلى وأسفل. والقيم الموجبة تدفعه إلى اليمين أو إلى الأسفل؛ أما القيم السالبة فتدفعه إلى اليسار أو إلى الأعلى. وتلطّف blur حافة الظل؛ وكلما زاد الرقم امتدت النعومة أبعد. وتكبّر spread حجم الظل أو تصغّره قبل تطبيق التمويه. وإضافة الكلمة المفتاحية inset قبل الإزاحتين ترسم الظل داخل حدود العنصر بدلًا من خارجها.

مثال

باستخدام الإعدادات الافتراضية (إزاحة أفقية مقدارها 5 بكسل، وإزاحة رأسية مقدارها 5 بكسل، وتمويه مقداره 10 بكسل، وامتداد مقداره 0 بكسل، واللون الأسود بشفافية 20%)، تُخرج الأداة:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

يمتد شريط تمرير شفافية منتقي اللون من 0 إلى 100، ويُحوَّل إلى مقياس من 0 إلى 1 تستخدمه rgba()، ولذلك تصبح 20% مساويةً لـ 0.2.

صيغة استدارة الحدود في CSS

تجعل استدارة الحدود زوايا العنصر مستديرة. وتوجد صيغتان:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

عند تحديد «الاستدارة نفسها لكل الزوايا»، يكتب المولّد الصيغة المختصرة. وعند إلغاء التحديد، فإنه يسرد دائمًا أربع قيم، حتى لو كانت متساوية، بهذا الترتيب: أعلى اليسار، ثم أعلى اليمين، ثم أسفل اليمين، ثم أسفل اليسار.

مثال

نصف قطر الاستدارة الافتراضي هو 10 بكسل لكل زاوية:

1border-radius: 10px;
2

تستخدم الصورة الرمزية الدائرية عادةً border-radius: 50% بدلاً من ذلك، مع أن هذه القيمة تقع خارج النطاق الذي يتيحه شريط تمرير المولّد (من 0 إلى 100 بكسل).

صيغة ظل النص في CSS

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

1text-shadow: h-offset v-offset blur color;
2

مثال

باستخدام الإعدادات الافتراضية (إزاحة أفقية مقدارها 2 بكسل، وإزاحة رأسية مقدارها 2 بكسل، وتمويه مقداره 3 بكسل، واللون الأسود بشفافية 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

كيفية استخدام مولّد خصائص CSS

1. اختر علامة تبويب: التدرج، أو ظل الصندوق، أو استدارة الحدود، أو ظل النص.
2. اضبط أشرطة التمرير ومنتقيات الألوان ومربعات الاختيار. وتتحدث لوحة المعاينة وتعليمات CSS معًا فورًا.
3. اختر زر "نسخ إلى الحافظة" ثم الصق التعليمات البرمجية في ورقة أنماط أو في سمة style.
4. اختر "إعادة الضبط" لإعادة كل حقل في علامات التبويب الأربع إلى قيمة البدء. ويؤدي ذلك أيضاً إلى إعادة علامة التبويب النشطة إلى التدرج، حتى إذا كانت علامة تبويب أخرى معروضة.

الأسئلة الشائعة

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

ما الفرق بين التدرج الخطي والتدرج الشعاعي؟ يغيّر التدرج الخطي اللون على طول خط مستقيم بزاوية محددة. أما التدرج الشعاعي فيغيّر اللون إلى الخارج من نقطة مركزية. ويستخدم الخيار الشعاعي في هذه الأداة شكلاً دائرياً دائماً.

هل يمكن لهذه الأداة إنشاء تدرج بأكثر من لونين؟ لا. تدعم لوحتا التدرج الخطي والشعاعي لونين بالضبط، هما «اللون 1» و«اللون 2»، ولكل منهما موضع توقف خاص به.

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

لماذا تظهر قيم الزوايا المستديرة بالترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار؟ ذلك هو الترتيب الذي تتوقع فيه خاصية CSS border-radius كتابة أربع قيم منفصلة، مع التحرك باتجاه عقارب الساعة بدءاً من الزاوية العلوية اليسرى.

هل تعمل تعليمات CSS المُنشأة في كل متصفح؟ تحظى التدرجات وظلال الصناديق واستدارة الحدود وظلال النصوص بدعم في الإصدارات الحالية من Chrome وFirefox وSafari وEdge. ولا تُضاف أي بادئات خاصة بالمورّد إلى المخرجات.

المراجع

1. Mozilla Developer Network. linear-gradient(). مرجع linear-gradient() — تساوي to top وto right القيمتين 0deg و90deg.
2. Mozilla Developer Network. radial-gradient(). مرجع radial-gradient() — قد يكون شكل التدرج الشعاعي دائرة أو قطعًا ناقصًا.
3. Mozilla Developer Network. box-shadow. مرجع box-shadow — اتجاهات الإزاحة والامتداد والكلمة المفتاحية inset.
4. Mozilla Developer Network. border-radius. مرجع border-radius — ترتيب القيم الأربع: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار.
5. Mozilla Developer Network. text-shadow. مرجع text-shadow — يتكون كل ظل نص من طولين أو ثلاثة أطوال (الإزاحتان والتمويه) مع لون اختياري.