يمكن أن يساعدنا استخدام الاقتصاص في CSS في الابتعاد عن كل شيء في تصميماتنا الذي يبدو كمربع. باستخدام أشكال أساسية متنوعة أو رسومات SVG، يمكنك إنشاء مسار مقطع. ثم قم بقص أجزاء العنصر التي لا تريد إظهارها.
يتم تحديد جميع العناصر على صفحات الويب داخل مربع مستطيل.
لكن هذا لا يعني أنه يتعين علينا جعل كل شيء يبدو كصندوق.
يمكنك استخدام السمة clip-path في CSS لاقتصاص أجزاء من صورة أو عنصر آخر لإنشاء مؤثرات شيّقة.
في المثال أعلاه، تكون صورة البالون مربعة (المصدر).
باستخدام 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()
يتم إدخال القيمة inset() داخل المنطقة المقتطعة من حافة العنصر، ويمكن تمرير القيم للحواف العلوية اليمنى والسفلى واليسرى.
يمكن أيضًا إضافة border-radius لمنحني زوايا المساحة التي تم قطعها، وذلك باستخدام الكلمة الرئيسية round.
في المثال الذي أقدّمه، لديّ مربّعان يتضمّنان فئة .box.
لا يحتوي المربع الأول على أي اقتصاص، بينما يتم اقتصاص الثاني باستخدام قيم inset().
circle()
كما رأيت، تنشئ القيمة circle() منطقة مقطّعة دائرية.
القيمة الأولى هي طول أو نسبة مئوية وهي نصف قطر الدائرة.
وتتيح لك القيمة الاختيارية الثانية ضبط مركز الدائرة.
في المثال أدناه، أستخدم قيم الكلمات الرئيسية لضبط الدائرة المقتطعة أعلى اليمين.
ويمكنك أيضًا استخدام أطوال أو نسب مئوية.
احترس من الحواف المسطحة!
اعلم بجميع هذه القيم أن الشكل ستتم اقتصاصه بواسطة مربع الهامش على العنصر. إذا أنشأت دائرة على صورة، وكان هذا الشكل يمتد إلى خارج الحجم الطبيعي للصورة، فستحصل على حافة مسطحة.
circle(50%) على الصورة التي تم استخدامها سابقًا. وبما أنّ الصورة ليست مربّعة، نقرنا على مربّع الهامش في أعلى وأسفل، ويتم اقتصاص الدائرة.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
استخدِم عنصر SVG clipPath للتحكّم في المساحة التي تقتطعها أكثر من الأشكال الأساسية.
بعد ذلك، عليك الإشارة إلى هذا المعرّف باستخدام url() كقيمة للحقل clip-path.
إضافة تأثيرات حركية على المنطقة المقسّمة
يمكن تطبيق الانتقالات والصور المتحركة في CSS على clip-path لإنشاء بعض التأثيرات المثيرة للاهتمام.
في المثال التالي، أقوم بتحريك دائرة عند التمرير من خلال الانتقال بين دائرتين بقيمة مختلفة للنطاق الجغرافي.
هناك الكثير من الطرق الإبداعية التي يمكن من خلالها استخدام الرسوم المتحركة مع الاقتصاص. يتم عرض بعض الأفكار عند إضافة تأثيرات حركية باستخدام مقطع-path على "حيل CSS".
الصورة من تصوير ماثيو هنري على Burst.