مولّد خصائص CSS

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

ما الذي ينشئه

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

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

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

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

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

تُقاس الزاوية بالدرجات، من 0 إلى 360. يحدّد كل من 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

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

يستخدم كلا نوعَي التدرج في هذه الأداة لونين بالضبط، ويُحدَّدان بواسطة منتقيَي اللون Color 1 وColor 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 عموماً. وتوجد أربعة أطوال صالحة: ثلاثة أرقام (#f00)، وأربعة أرقام (#f00c)، وستة أرقام (#ff0000)، وثمانية أرقام (#ff0000cc). وتعني الأشكال المختصرة اللون نفسه الذي تعنيه الأشكال الطويلة، لأن كل رقم يُكرَّر مرتين: فاللون #123 هو نفسه اللون #112233.

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

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

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

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

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

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

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

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

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

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

المراجع

1. مستندات MDN على الويب: استخدام تدرجات CSS
2. مستندات MDN على الويب: box-shadow
3. مستندات MDN على الويب: border-radius
4. مستندات MDN على الويب: text-shadow