مولد clip-path في CSS
مولد clip-path في CSS مجاني عبر الإنترنت. صمم أشكال polygon وcircle وellipse وinset بنقاط قابلة للسحب، مع معاينة مباشرة ونسخ كود CSS بنقرة واحدة.
ما هو clip-path في CSS؟
clip-path هي خاصية CSS تقص العنصر وفق شكل أساسي أو مسار. كل ما يقع خارج الشكل يُخفى، لذا يمكنك تحويل صورة أو صندوق مستطيل إلى مثلث أو دائرة أو سداسي أو لافتة مائلة أو أي مضلع مخصص دون تعديل الصورة نفسها.
ما المتصفحات التي تدعم clip-path؟
جميع المتصفحات الحديثة تدعم دوال الأشكال الأساسية التي يستخدمها هذا المولد: polygon() وcircle() وellipse() وinset()، وتشمل Chrome وEdge وFirefox وSafari وOpera. بادئة -webkit-clip-path لا تُحتاج إلا لإصدارات قديمة جدًا من سفاري للجوال.
كيف يعمل وضع المضلع polygon؟
في وضع polygon تعرض المعاينة كل رأس كنقطة قابلة للسحب. اسحب النقطة لتحريكها، وانقر نقرًا مزدوجًا على فراغ لإدراج نقطة جديدة، وانقر على نقطة لتحديدها ثم استخدم زر الحذف لإزالتها. تتحدّث قيمة CSS لحظيًا بإحداثيات مئوية.
ماذا تعني النسب المئوية في polygon()؟
تُكتب كل نقطة كزوج X Y بالنسبة المئوية من الزاوية العلوية اليسرى للعنصر. ولأن القيم نسبية إلى حجم العنصر، يتدرج الشكل معه ويبقى متجاوبًا مع أي عرض شاشة.
ما الفرق بين circle وellipse وinset؟
circle(نصف القطر at x y) تقص دائرة بنصف قطر واحد، وellipse(rx ry at x y) تتيح نصفَي قطر أفقي وعمودي مختلفين، وinset(أعلى يمين أسفل يسار) تقص مستطيلًا منكمشًا من كل حد. يوفر هذا المولد أشرطة تمرير وحقول رقمية لكل المعاملات.
هل يؤثر clip-path على التخطيط أو النقر؟
clip-path بصري بحت. يحتفظ العنصر بصندوقه الأصلي في التخطيط فلا يتحرك ما حوله، لكن أحداث المؤشر مثل النقر لا تعمل إلا داخل المساحة المرئية المقصوصة، وهذا مفيد لصنع أزرار بأشكال مخصصة.
هل يمكن تحريك clip-path بأنيميشن؟
نعم. يمكن للمتصفحات الانتقال بسلاسة بين قيمتين لـ clip-path عندما تتطابق دالة الشكل وعدد النقاط، مثل الانتقال من inset كبير إلى أصغر أو بين مضلعين بنفس عدد الرؤوس. حرّكه عبر خاصية CSS transition.
هل تُرفع صوري أو بياناتي إلى أي مكان؟
لا. صورة المعاينة تدرّج مرسوم محليًا على عنصر canvas، وكل الحسابات تتم داخل متصفحك. لا يُرسل أي مما تصممه إلى أي خادم، لذا تعمل الأداة دون اتصال بعد تحميلها.
ما أبرز استخدامات clip-path؟
من الاستخدامات الشائعة: أقسام hero مائلة، أقنعة صور شخصية سداسية أو دائرية، أسهم فقاعات الكلام المثلثية، تجميعات صور إبداعية، زوايا بطاقات مشطوفة، وأزرار بأشكال مخصصة، كل ذلك دون برامج تعديل صور.
كيفية استخدام مولد clip-path في CSS
شكّل أي عنصر بـ CSS clip-path بدلًا من تحرير الصور. اختر دالة الشكل، واسحب المقابض، وانسخ CSS جاهزًا للإنتاج. كل شيء يعمل محليًا في متصفحك.
- اختر وضعًا: مضلع أو دائرة أو قطع ناقص أو Inset.
- في وضع المضلع اسحب نقاط الرؤوس، وانقر نقرًا مزدوجًا على المساحة الفارغة لإضافة نقطة، وحدد نقطة قبل حذفها.
- في أوضاع الدائرة والقطع الناقص وInset، اضبط كل قيمة بالمزشرات أو اكتب نسبة مئوية دقيقة.
- راقب تحديث المعاينة الحية فوق صورة عينة متدرجة تُولَّد محليًا.
- انسخ قاعدة clip-path المكوَّنة من سطر واحد والصقها في ورقة الأنماط الخاصة بك.
حافظ على العدد نفسه من نقاط المضلع بين حالتين، وستتمكن من تحريك الشكل بسلاسة عبر transition في CSS.
أدوات ذات صلة
- مولد ظل الصندوق CSS مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.
- مجمّل CSS نسق وجمّل كود CSS فوراً. حوّل CSS المضغوط إلى كود مقروء ومنسق جيداً مع خيارات قابلة للتخصيص.
- ضاغط CSS ضاغط CSS مجاني عبر الإنترنت. ضغط وحسّن كود CSS فوراً عن طريق إزالة المسافات والتعليقات والأحرف غير الضرورية. قلل حجم الملف لأداء ويب أسرع.