مولّد CSS clip-path

ما هي مولّد CSS clip-path؟

مولّد CSS clip-path هو محرّر مرئي مجاني لخاصية CSS clip-path، صُمّم لمطوّري الواجهة الأمامية والمصمّمين الذين يريدون قصّ العناصر إلى أشكال غير مستطيلة. اختر إعدادًا مسبقًا من القائمة المنسدلة — ()circle و()ellipse بنصف قطر ونقطة مركز، و()polygon بعدد ما تشاء من نقاط الرؤوس، و()inset بأربعة إزاحات للحواف، أو نسخة ()inset مُدوّرة بنصف قطر للزاوية. كل معامل نسبة مئوية تُدخَل عبر حقل رقمي، ويكشف صندوق معاينة بخلفية شطرنجية الشكل الناتج في الوقت الفعلي. يُولَّد لك CSS clip-path الكامل لنسخه. استخدمه لإخفاء الصور وقصّ فواصل أقسام قطرية وبناء صور رمزية سداسية أو نحت أشكال فقاعات الكلام دون عدّ الإحداثيات يدويًا.

كيفية استخدام مولّد CSS clip-path

1. اختر شكلًا من قائمة الإعدادات المسبقة المنسدلة: دائرة أو شكل بيضاوي أو مضلّع أو inset أو مُدوّر.
2. للدائرة أو الشكل البيضاوي، اضبط نصف القطر (أو نصفي القطر X/Y) وموضع المركز X/Y بالنسبة المئوية.
3. للمضلّع، عدّل نسبتي X وY لكل رأس؛ انقر على إضافة نقطة لإضافة المزيد من الرؤوس وأعد ترتيبها بتعديل القيم.
4. لـ inset أو المُدوّر، اضبط إزاحات الأعلى واليمين والأسفل واليسار؛ المُدوّر يأخذ أيضًا نصف قطر للزاوية.
5. شاهد المعاينة المباشرة تقصّ الصندوق أثناء الكتابة.
6. انسخ CSS clip-path المُولَّد والصقه في ورقة الأنماط الخاصة بك.

أمثلة

إعداد مسبق دائرة، نصف القطر 50%، المركز 50% 50%

clip-path: circle(50% at 50% 50%);

إعداد مسبق مضلّع، النقاط (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

إعداد مسبق مُدوّر، inset 10% لكل الجوانب، نصف قطر الزاوية 20%

clip-path: inset(10% 10% 10% 10% round 20%);

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

فيمَ تُستخدم clip-path؟

تقصّ خاصية CSS clip-path عنصرًا إلى شكل أساسي، بحيث تبقى المنطقة داخل الشكل فقط مرئية. وهي رائعة للصور الرمزية الدائرية وقطع الأقسام القطرية والشبكات السداسية وأقنعة الصور وفقاعات الكلام — كل ذلك دون صور أو ملفات SVG إضافية.

كيف يعمل الإعداد المسبق للمضلّع؟

يرسم ()polygon شكلًا بربط قائمة من نقاط الرؤوس X/Y بالترتيب. عدّل القيم المئوية لكل نقطة، واستخدم إضافة نقطة لإدراج المزيد من الرؤوس؛ تتصل النقطة الأخيرة تلقائيًا بالنقطة الأولى. يُحتفَظ بثلاث نقاط على الأقل لكي يبقى الشكل صالحًا.

لماذا القيم بالنسبة المئوية؟

تجعل النسب المئوية القصّ يتغيّر حجمه مع العنصر، فيعمل clip-path نفسه بأي حجم. 0% هي الحافة اليسرى أو العلوية و100% هي الحافة اليمنى أو السفلية لصندوق العنصر.

ماذا يضيف الإعداد المسبق المُدوّر؟

يستخدم الإعداد المسبق المُدوّر ()inset بنصف قطر زاوية round، فينتج مستطيلًا مقصوصًا إلى الداخل من كل جانب وبزوايا مُدوّرة — مفيد للقصّات المؤطّرة الناعمة التي لا يستطيع border-radius العادي دمجها مع قصّ inset.

هل تُرسَل بياناتي إلى أي مكان؟

لا. يعمل المولّد بالكامل داخل متصفحك بلغة JavaScript — لا تغادر قيم شكلك جهازك أبدًا، لذا يعمل بخصوصية وحتى دون اتصال بعد تحميل الصفحة.