إنشاء أشكال صور مثيرة للاهتمام باستخدام خاصية مسار المقطع في CSS's

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

Rachel Andrew

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

في المثال أعلاه، تكون صورة البالون مربعة (المصدر). استخدام clip-path وقيمة الشكل الأساسية لـ circle() سماء إضافية حول البالون مقصوصة، مما يترك صورة دائرية على الصفحة.

بما أنّ الصورة هي رابط، يمكنك الاطّلاع على معلومات أخرى حول السمة clip-path. ويمكن النقر على المنطقة المرئية فقط من الصورة، حيث لا يتم تنشيط الأحداث على الأجزاء المخفية من الصورة.

يمكن تطبيق الاقتصاص على أي عنصر HTML، وليس الصور فقط. هناك بضع طرق مختلفة لإنشاء clip-path، وسنلقي نظرة عليها في هذه المشاركة.

توافُق المتصفح

بالنسبة إلى المتصفّحات القديمة، قد يكون الإجراء الاحتياطي هو السماح للمتصفّح بتجاهل السمة clip-path وعرض الصورة غير المقتطعة. إذا كانت هذه مشكلة، يمكنك اختبارها مع clip-path في استعلام عن ميزة وعرض تنسيق بديل للمتصفحات غير المتوافقة.

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

الأشكال الأساسية

يمكن أن تستخدم السمة clip-path عددًا من القيم. كانت القيمة المستخدَمة في المثال الأول هي circle(). هذه إحدى قيم الأشكال الأساسية، والتي يتم تحديدها في مواصفات أشكال CSS. هذا يعني أنه يمكنك اقتصاص منطقة ما، ونستخدم القيمة نفسها مع shape-outside أيضًا للتسبب في التفاف النص حول هذا الشكل.

القائمة الكاملة للأشكال الأساسية هي:

• inset()
• circle()
• ellipse()
• polygon()

inset()

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

في المثال الذي قدّمتُه، لدي مربّعان بفئة .box. لا يحتوي المربّع الأول على اقتصاص، والثاني مقتطع باستخدام قيم inset().

circle()

كما رأيت، تُنشئ قيمة circle() منطقة مستديرة مُقتطعة. القيمة الأولى هي طول أو نسبة مئوية وتمثل نصف قطر الدائرة. تتيح لك القيمة الاختيارية الثانية تحديد مركز الدائرة. في المثال أدناه، أستخدم قيم الكلمات الرئيسية لتعيين الدائرة المقتطعة أعلى اليمين. يمكنك أيضًا استخدام الأطوال أو النسب المئوية.

انتبه من الحواف المسطحة.

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

ellipse()

والقطع الناقص هو في الأساس دائرة مضغوطة، ويشبه إلى حد كبير circle() ولكن يقبل نصف القطر x ونصف القطر لـ y، بالإضافة إلى قيمة مركز القطع الناقص.

polygon()

يمكن أن تساعدك قيمة polygon() في إنشاء أشكال معقّدة إلى حدٍ ما، وتحديد عدد النقاط الذي تحتاجه، من خلال ضبط إحداثيات كل نقطة.

لمساعدتك في إنشاء مضلّعات والاطّلاع على الخيارات المتاحة، يمكنك الاطّلاع على Clippy، وهو أداة إنشاء clip-path، ثم نسخ الرمز ولصقه في مشروعك.

أشكال من قيم الصندوق

وتعريف أيضًا في أشكال CSS هي أشكال من قيم المربع. تتعلق هذه العناصر بنموذج مربع CSS - مربع المحتوى ومربع المساحة المتروكة ومربع الحد ومربّع الهوامش بقيم الكلمات الرئيسية content-box وborder-box وpadding-box وmargin-box.

يمكن استخدام هذه القيم بمفردها أو مع شكل أساسي لتحديد المربّع المرجعي الذي يستخدمه الشكل. على سبيل المثال، سيؤدي ما يلي إلى اقتصاص الشكل إلى حافة المحتوى.

.box {
  clip-path: content-box;
}

في هذا المثال، قد تستخدم الدائرة content-box كمربع مرجعي بدلاً من margin-box (وهو الخيار التلقائي).

.box {
  clip-path: circle(45%) content-box;
}

لا تتيح المتصفّحات حاليًا استخدام قيم المربّع للسمة clip-path. ومع ذلك، فهي متوافقة مع shape-outside.

استخدام عنصر SVG

لمزيد من التحكم في المنطقة المقطوعة أكثر من التحكم في الأشكال الأساسية، استخدام عنصر clipPath بتنسيق SVG (رسومات موجّهة يمكن تغيير حجمها) بعد ذلك، أشِر إلى هذا المعرّف باستخدام url() كقيمة clip-path.

تحريك المنطقة المقطوعة

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

هناك العديد من الطرق الإبداعية التي يمكن من خلالها استخدام الرسوم المتحركة مع الاقتصاص. يتم تنفيذ الرسوم المتحركة باستخدام مسار المقطع على "حيل CSS" عبر بعض الأفكار.

صورة التقطها ماثيو هنري في Burst.