مولّد مرئي لخاصية border radius
لا ينبغي أن يتطلب تصميم الحواف الدائرية المثالية لعناصر موقعك تخمين الأرقام وتحديث المتصفح باستمرار. يتيح لك مولد border radius المرئي هذا ضبط أشرطة التمرير ورؤية تأثير المنحنيات على العنصر فوراً. وبمجرد الوصول إلى المظهر الدقيق الذي تريده، يمكنك نسخ كود CSS المحسّن مباشرة إلى الحافظة.
نظراً لأن جميع الحسابات والمعاينات تتم محلياً في متصفحك، فإن الأداة سريعة للغاية وخاصة تماماً. لا يتم رفع أي شيء تصممه أو تنقر عليه إلى أي خادم على الإطلاق.
احتراف الزوايا الدائرية في CSS
تعد خاصية border-radius جزءاً أساسياً في تصميم الويب الحديث، وتُستخدم لتنعيم الحواف الحادة للأزرار، والصور، والنوافذ المنبثقة، وحاويات التخطيط. ورغم أنها تبدو بسيطة ظاهرياً، إلا أن صيغتها البرمجية قد تكون دقيقة بشكل مدهش عندما ترغب في استهداف زوايا معينة.
يساعدك مولد border-radius css هذا على فهم واستخدام الصيغة المختصرة في CSS بفعالية. عند ربط جميع الزوايا معاً، تُخرج الأداة قيمة واحدة (على سبيل المثال، border-radius: 16px;). أما إذا قمت بإلغاء ربط الزوايا لإنشاء شكل مخصص، فسيقوم المولد تلقائياً بتنسيق كود CSS بناءً على مدخلاتك:
- أربع قيم: إذا كانت جميع الزوايا مختلفة، يطبقها كود CSS باتجاه عقارب الساعة بدءاً من الزاوية العلوية اليسرى (مثل:
border-radius: 16px 8px 4px 2px;). - قيمتان: إذا كانت الزاوية العلوية اليسرى تطابق السفلية اليمنى، والعلوية اليمنى تطابق السفلية اليسرى، تقوم الأداة بذكاء باختصار الكود إلى قيمتين (مثل:
border-radius: 16px 0;).
البكسل مقابل النسب المئوية
من أكثر التحديات شيوعاً عند كتابة كود CSS للحواف الدائرية هو اختيار الوحدة المناسبة. تتيح لك هذه الأداة التبديل بسهولة بين البكسل (px) والنسب المئوية (%)، حيث تخدم كل منهما غرضاً مختلفاً في تصميم واجهة المستخدم.
البكسل (px) هي وحدات مطلقة. سيبدو نصف قطر الحدود بقيمة 12px متطابقاً دائماً، سواء تم تطبيقه على زر صغير أو صورة رئيسية ضخمة. يُعد البكسل الخيار القياسي لعناصر واجهة المستخدم مثل البطاقات، والقوائم المنسدلة، وحقول الإدخال لأنه يحافظ على لغة تصميم متسقة وموحدة في جميع أنحاء تطبيقك. تسمح هذه الأداة بقيم بكسل تصل إلى 200px.
النسب المئوية (%) هي وحدات نسبية تعتمد على حجم العنصر نفسه. سيؤدي تعيين نصف قطر الحدود بقيمة 50% لعنصر مربع إلى إنشاء دائرة مثالية دائماً، بغض النظر عما إذا كان عرض هذا المربع 50 بكسل أو 500 بكسل. أما إذا كان العنصر مستطيلاً، فستُنشئ القيمة 50% شكلاً بيضاوياً. تُعد النسب المئوية مثالية للعناصر المتجاوبة مثل الصور الشخصية أو أشكال الخلفية الزخرفية. تضع هذه الأداة حداً أقصى للنسب المئوية عند 50%، حيث إن القيم التي تتجاوز ذلك لا تزيد من تأثير الانحناء المرئي في CSS.
أكثر من مجرد زوايا: مُولّد أشكال CSS
على الرغم من استخدامه غالباً لتدوير الحواف بشكل بسيط، يُعد border-radius أيضاً أداة قوية لإنشاء أشكال CSS. من خلال إلغاء ربط الزوايا ودمج قيم قصوى، يمكنك إنشاء أشكال هندسية فريدة دون الحاجة إلى ملفات SVG أو مسارات clip-path معقدة. تتضمن الأداة عدة إعدادات مسبقة لتوضيح ذلك:
- كبسولة: من خلال تطبيق قيمة بكسل عالية جداً (مثل
9999px) على جميع الزوايا، ستحصل على شكل "كبسولة" أو ملعب. يُستخدم هذا الشكل على نطاق واسع في الشارات والوسوم وأزرار الدعوة لاتخاذ إجراء الحديثة. يحد المتصفح من التدوير الفعلي ليكون نصف ارتفاع العنصر بالضبط، مما يضمن الحصول على أنصاف دوائر مثالية على الحواف. - دائرة: يؤدي تعيين جميع الزوايا إلى
50%إلى تحويل المربع إلى دائرة مثالية. - ورقة شجر: من خلال تعيين الزاويتين العلوية اليسرى والسفلية اليمنى إلى
0، والزاويتين العلوية اليمنى والسفلية اليسرى إلى قيمة عالية (مثل48px)، يمكنك إنشاء شكل ورقة شجر انسيابي وغير متماثل. - علامة تبويب: من خلال تدوير الزاويتين العلوية اليسرى والعلوية اليمنى فقط (على سبيل المثال،
16px) مع ترك الزوايا السفلية عند0، ستحصل على شكل علامة تبويب المجلد الكلاسيكية، وهو مثالي لقوائم التنقل.
إتقان مكونات واجهة المستخدم
نادراً ما توجد الزوايا الدائرية بمفردها؛ بل تكون عادةً جزءاً من نظام تصميم أوسع ومتماسك. فعلى سبيل المثال، يجمع مكون البطاقة المصمم جيداً بين انحناء خفيف للحواف مع العمق واللون ليبرز على الصفحة.
بمجرد إنشاء انحناء الحواف المثالي، يمكنك دمجه مع تأثيرات CSS أخرى لإكمال تصميمك. جرب إضافة ظل خفيف للشكل الجديد باستخدام مولد ظلال الصناديق لإنشاء تأثير بارز وعائم. وإذا كنت تصمم زراً أو عنصر خلفية زخرفي، فيمكنك تطبيق خلفية نابضة بالحياة باستخدام مولد التدرج اللوني CSS، أو العثور على ألوان متناسقة ومثالية باستخدام مولد لوحات الألوان.