مسارات القطع والأقنعة

مقدمة في القطع والتقنيع

القطع والتقنيع هما تقنيتان قويتان في CSS تتيحان لك التحكم في أي أجزاء من العنصر تكون مرئية. كلاهما يحقق أهدافا متشابهة -- إخفاء أجزاء من عنصر -- لكنهما يعملان بطرق مختلفة جذريا. القطع يستخدم شكلا هندسيا لتحديد حدود صلبة: كل شيء داخل الشكل مرئي، وكل شيء خارجه مخفي. التقنيع يستخدم صورة (أو تدرجا لونيا) تحدد قيم السطوع أو قناة ألفا فيها مدى الرؤية، مما يسمح بانتقالات ناعمة وشفافية جزئية. معا، تفتح هاتان الأداتان إمكانيات إبداعية لأقسام البطل، وكشف الصور، والفواصل الزخرفية، والتخطيطات الفنية التي كانت تتطلب سابقا برامج تحرير الصور.

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

فهم clip-path

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

الشيء الأساسي لفهم القطع هو أنه ينشئ حافة صلبة. لا يوجد تلاشي تدريجي أو شفافية -- البكسل إما مرئي بالكامل (داخل مسار القطع) أو مخفي بالكامل (خارج مسار القطع). هذا يجعل القطع مثاليا للأشكال الهندسية والتصاميم الزاويّة والقصاصات النظيفة.

/* بدون قطع (الافتراضي) */
.element {
    clip-path: none;
}

/* استخدام شكل أساسي */
.element {
    clip-path: circle(50%);
}

/* استخدام مرجع SVG clipPath */
.element {
    clip-path: url(#myClipPath);
}

/* استخدام صندوق هندسي (القطع حسب content-box، padding-box، إلخ) */
.element {
    clip-path: padding-box;
}

/* دمج شكل مع صندوق هندسي */
.element {
    clip-path: circle(50%) border-box;
}

الأشكال الأساسية مع clip-path

يوفر CSS أربع دوال أشكال أساسية يمكنك استخدامها مع clip-path: circle() وellipse() وinset() وpolygon(). كل منها ينشئ شكلا هندسيا مختلفا، ويمكنك تخصيصها بمعاملات لتحقيق الشكل المطلوب بدقة.

circle()

دالة circle() تنشئ منطقة قطع دائرية. تقبل نصف قطر وموضعا اختياريا. يمكن أن يكون نصف القطر طولا أو نسبة مئوية أو الكلمات المفتاحية closest-side وfarthest-side. يكون الموضع الافتراضي في مركز العنصر.

/* دائرة في المركز بنصف قطر 50% (تملأ البعد الأصغر) */
.avatar {
    clip-path: circle(50%);
}

/* دائرة بنصف قطر ثابت */
.profile-pic {
    clip-path: circle(80px);
}

/* دائرة مع موضع مركز مخصص */
.spotlight {
    clip-path: circle(40% at 30% 50%);
}

/* دائرة في الزاوية العليا اليسرى */
.corner-reveal {
    clip-path: circle(100px at 0% 0%);
}

/* باستخدام closest-side: نصف القطر يمتد إلى أقرب حافة */
.fit-circle {
    clip-path: circle(closest-side at 50% 50%);
}

/* باستخدام farthest-side: نصف القطر يمتد إلى أبعد حافة */
.full-circle {
    clip-path: circle(farthest-side at 50% 50%);
}

ellipse()

دالة ellipse() تنشئ منطقة قطع بيضاوية. تقبل نصفي قطر (أفقي وعمودي) وموضعا اختياريا. هذا مفيد عندما تحتاج شكلا بيضاويا بدلا من دائرة كاملة.

/* شكل بيضاوي في المركز بنصف قطر أفقي 50% وعمودي 40% */
.oval-frame {
    clip-path: ellipse(50% 40%);
}

/* شكل بيضاوي عريض لتأثير شريط */
.banner {
    clip-path: ellipse(60% 50% at 50% 50%);
}

/* شكل بيضاوي بموضع غير مركزي */
.artistic {
    clip-path: ellipse(45% 55% at 70% 40%);
}

/* شكل بيضاوي طويل وضيق */
.portal {
    clip-path: ellipse(30% 50% at 50% 50%);
}

inset()

دالة inset() تنشئ منطقة قطع مستطيلة مع زوايا مستديرة اختيارية. تقبل من قيمة واحدة إلى أربع قيم إزاحة (مشابهة لاختصار margin/padding) تقيس مدى الإزاحة للداخل من كل حافة. يمكنك أيضا إضافة round متبوعة بقيمة border-radius لإنشاء مستطيلات مستديرة.

/* إزاحة 20 بكسل من جميع الجوانب */
.trimmed {
    clip-path: inset(20px);
}

/* إزاحات مختلفة: أعلى يمين أسفل يسار */
.custom-inset {
    clip-path: inset(10px 20px 30px 40px);
}

/* إزاحة مع زوايا مستديرة */
.rounded-clip {
    clip-path: inset(10px round 20px);
}

/* إزاحة مع أنصاف أقطار زوايا مختلفة */
.fancy-clip {
    clip-path: inset(5% round 20px 0 20px 0);
}

/* بدون إزاحة لكن مع زوايا مستديرة (يقطع فقط الزوايا) */
.corner-clip {
    clip-path: inset(0 round 50px);
}

/* شكل كبسولة */
.pill {
    clip-path: inset(0 round 999px);
}

polygon()

دالة polygon() هي أكثر الأشكال الأساسية تنوعا. تنشئ منطقة قطع محددة بسلسلة من أزواج الإحداثيات (الرؤوس). يمكنك إنشاء أي شكل يمكن وصفه بحواف مستقيمة تربط بين النقاط. كل نقطة تُعرَّف كزوج من إحداثيات x وy بالنسب المئوية أو الأطوال.

/* مثلث يشير للأعلى */
.triangle-up {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* مثلث يشير لليمين */
.triangle-right {
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

/* شكل ماسي */
.diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* خماسي */
.pentagon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* سداسي */
.hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* شكل نجمة */
.star {
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}

/* سهم يشير لليمين */
.arrow-right {
    clip-path: polygon(0% 20%, 70% 20%, 70% 0%, 100% 50%, 70% 100%, 70% 80%, 0% 80%);
}

/* قسم مائل (متوازي أضلاع) */
.slanted {
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

/* حافة سفلية زاويّة */
.angled-bottom {
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}

أشكال مخصصة مع polygon()

تتألق دالة polygon() حقا عندما تنشئ أشكالا مخصصة مصممة لتصميمك. المفتاح هو فهم نظام الإحداثيات: 0% 0% هي الزاوية العليا اليسرى، 100% 0% هي العليا اليمنى، 100% 100% هي السفلى اليمنى، و0% 100% هي السفلى اليسرى. بوضع نقاط بين هذه الزوايا، يمكنك إنشاء أي شكل تقريبا بحواف مستقيمة.

/* شكل شيفرون/شريط */
.chevron {
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%);
}

/* مستطيل محزوز (بطاقة سعر) */
.price-tag {
    clip-path: polygon(
        15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%
    );
}

/* شكل صليب/علامة زائد */
.cross {
    clip-path: polygon(
        35% 0%, 65% 0%, 65% 35%, 100% 35%,
        100% 65%, 65% 65%, 65% 100%, 35% 100%,
        35% 65%, 0% 65%, 0% 35%, 35% 35%
    );
}

/* شكل منزل */
.house {
    clip-path: polygon(50% 0%, 100% 35%, 100% 100%, 0% 100%, 0% 35%);
}

/* فقاعة رسالة (فقاعة حوار بدون الذيل) */
.bubble {
    clip-path: polygon(
        0% 0%, 100% 0%, 100% 75%,
        75% 75%, 65% 100%, 55% 75%, 0% 75%
    );
}

/* حافة سفلية موجية زخرفية */
.wavy-section {
    clip-path: polygon(
        0% 0%, 100% 0%, 100% 85%,
        90% 90%, 80% 85%, 70% 90%,
        60% 85%, 50% 90%, 40% 85%,
        30% 90%, 20% 85%, 10% 90%, 0% 85%
    );
}

clip-path مع SVG url()

للأشكال التي تتطلب منحنيات (ليس فقط خطوطا مستقيمة)، يمكنك الإشارة إلى عنصر <clipPath> في SVG. مسارات قطع SVG تدعم المسارات المنحنية عبر عنصر <path>، مما يتيح أشكالا عضوية ناعمة ومنحنيات وخطوطا خارجية معقدة لا تستطيع polygon() تحقيقها.

<!-- تعريف SVG clipPath في HTML (يمكن إخفاؤه) -->
<svg width="0" height="0" style="position: absolute;">
    <defs>
        <clipPath id="blobClip" clipPathUnits="objectBoundingBox">
            <path d="M0.5,0 C0.75,0 1,0.25 1,0.5
                       C1,0.75 0.75,1 0.5,1
                       C0.25,1 0,0.75 0,0.5
                       C0,0.25 0.25,0 0.5,0" />
        </clipPath>
    </defs>
</svg>

<!-- تطبيق مسار القطع في CSS -->
<style>
.blob-image {
    clip-path: url(#blobClip);
    width: 300px;
    height: 300px;
}
</style>

<svg width="0" height="0" style="position: absolute;">
    <defs>
        <!-- مسار قطع موجة مستديرة -->
        <clipPath id="waveClip" clipPathUnits="objectBoundingBox">
            <path d="M0,0 H1 V0.8
                       C0.85,0.95 0.65,0.7 0.5,0.85
                       C0.35,1 0.15,0.75 0,0.9 Z" />
        </clipPath>

        <!-- شكل قلب -->
        <clipPath id="heartClip" clipPathUnits="objectBoundingBox">
            <path d="M0.5,0.15
                       C0.5,0 0.05,-0.1 0.05,0.3
                       C0.05,0.6 0.5,1 0.5,1
                       C0.5,1 0.95,0.6 0.95,0.3
                       C0.95,-0.1 0.5,0 0.5,0.15 Z" />
        </clipPath>
    </defs>
</svg>

<style>
.hero-image {
    clip-path: url(#waveClip);
}

.heart-photo {
    clip-path: url(#heartClip);
}
</style>

تحريك clip-path

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

/* كشف بتوسيع دائرة عند التمرير */
.image-reveal {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.6s ease-out;
}

.image-reveal:hover {
    clip-path: circle(75% at 50% 50%);
}

/* تحول مضلع: مستطيل إلى معين */
.morph-shape {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 0.5s ease-in-out;
}

.morph-shape:hover {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* حركة كشف بالإزاحة */
.card-image {
    clip-path: inset(50% round 20px);
    transition: clip-path 0.4s ease-out;
}

.card-image:hover {
    clip-path: inset(0% round 20px);
}

/* حركة كشف دائري */
@keyframes circleReveal {
    from {
        clip-path: circle(0% at 50% 50%);
    }
    to {
        clip-path: circle(100% at 50% 50%);
    }
}

.page-enter {
    animation: circleReveal 1s ease-out forwards;
}

/* مسح من اليسار إلى اليمين */
@keyframes wipeRight {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.text-reveal {
    animation: wipeRight 0.8s ease-out forwards;
}

/* حركة تحول شكل المضلع */
@keyframes morphShape {
    0% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    25% {
        clip-path: polygon(20% 0%, 100% 20%, 80% 100%, 0% 80%);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    75% {
        clip-path: polygon(20% 20%, 80% 0%, 100% 80%, 0% 100%);
    }
    100% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
}

.morphing-element {
    animation: morphShape 6s ease-in-out infinite;
}

أقنعة CSS: mask-image

بينما ينشئ القطع حوافا صلبة، يسمح تقنيع CSS بـتحكم ناعم بالرؤية قائم على التدرج. خاصية mask-image تطبق صورة كقناع على عنصر. قناة ألفا لصورة القناع (أو السطوع، حسب mask-mode) تحدد أي أجزاء من العنصر تكون مرئية. حيث يكون القناع معتما بالكامل، يكون العنصر مرئيا بالكامل. حيث يكون القناع شفافا بالكامل، يكون العنصر مخفيا. حيث يكون القناع شبه شفاف، يكون العنصر مرئيا جزئيا.

هذا مشابه مفهوميا لكيفية عمل أقنعة الطبقات في Photoshop أو GIMP: القناع الأبيض يكشف، القناع الأسود يخفي، والقيم الرمادية تنتج شفافية جزئية.

/* بدون قناع (الافتراضي) */
.element {
    -webkit-mask-image: none;
    mask-image: none;
}

/* قناع بتدرج لوني */
.element {
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}

/* قناع بصورة */
.element {
    -webkit-mask-image: url("mask-shape.png");
    mask-image: url("mask-shape.png");
}

/* قناع بـ SVG */
.element {
    -webkit-mask-image: url("mask.svg");
    mask-image: url("mask.svg");
}

التقنيع بالتدرجات اللونية

أقنعة التدرج اللوني هي الاستخدام الأكثر شيوعا وعملية لتقنيع CSS. بتطبيق تدرج لوني كقناع، يمكنك إنشاء تأثيرات تلاشي وتعتيم وكشف بحواف ناعمة بدون أي ملفات صور. محطات لون التدرج تتحكم في الرؤية: المناطق المعتمة بالكامل (مثل black أو rgba(0,0,0,1)) تظهر العنصر، والمناطق الشفافة بالكامل (مثل transparent أو rgba(0,0,0,0)) تخفيه.

/* المحتوى يتلاشى في الأسفل -- مثالي لمعاينات "اقرأ المزيد" */
.text-preview {
    max-height: 200px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 60%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 60%,
        transparent 100%
    );
}

/* تلاشي من الأعلى والأسفل معا */
.scrollable-list {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

/* تلاشي من اليسار إلى اليمين */
.side-fade {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
}

/* تأثير التعتيم باستخدام تدرج شعاعي */
.vignette {
    -webkit-mask-image: radial-gradient(
        ellipse 70% 70% at center,
        black 0%,
        black 50%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 70% 70% at center,
        black 0%,
        black 50%,
        transparent 100%
    );
}

/* تأثير الأضواء -- المركز فقط مرئي */
.spotlight {
    -webkit-mask-image: radial-gradient(
        circle 150px at var(--x, 50%) var(--y, 50%),
        black 0%,
        transparent 100%
    );
    mask-image: radial-gradient(
        circle 150px at var(--x, 50%) var(--y, 50%),
        black 0%,
        transparent 100%
    );
}

/* تلاشي قطري */
.diagonal-fade {
    -webkit-mask-image: linear-gradient(
        135deg,
        black 0%,
        black 40%,
        transparent 70%
    );
    mask-image: linear-gradient(
        135deg,
        black 0%,
        black 40%,
        transparent 70%
    );
}

التقنيع بالصور

الأقنعة القائمة على الصور تستخدم قناة ألفا لصورة PNG (أو سطوع أي صورة) للتحكم في الرؤية. هذا مثالي للأشكال العضوية المعقدة مثل بقع الطلاء وضربات الفرشاة والملمسات والإطارات الزخرفية التي لا يمكن تحقيقها بالتدرجات اللونية وحدها. يجب أن تكون صورة القناع عادةً PNG بشفافية -- المناطق المعتمة تكشف العنصر المقنّع، والمناطق الشفافة تخفيه.

/* قناع بصورة PNG (قناة ألفا) */
.artistic-photo {
    -webkit-mask-image: url("brush-stroke.png");
    mask-image: url("brush-stroke.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* قناع بشكل SVG */
.decorative-frame {
    -webkit-mask-image: url("ornate-frame.svg");
    mask-image: url("ornate-frame.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* قناع ملمس لتأثير خشن */
.grunge-overlay {
    -webkit-mask-image: url("grunge-texture.png");
    mask-image: url("grunge-texture.png");
    -webkit-mask-size: cover;
    mask-size: cover;
}

حجم القناع وتكراره وتموضعه

تماما مثل صور الخلفية، لصور القناع خصائص مصاحبة تتحكم في حجمها وتكرارها وموضعها داخل العنصر. هذه الخصائص تعكس مكافئات background-* وتتبع نفس الصيغة.

/* mask-size: يتحكم في حجم صورة القناع */
.element {
    -webkit-mask-size: cover;          /* تكبير لتغطية العنصر بالكامل */
    mask-size: cover;

    -webkit-mask-size: contain;        /* تكبير للاحتواء داخل العنصر */
    mask-size: contain;

    -webkit-mask-size: 200px 100px;    /* عرض وارتفاع صريحان */
    mask-size: 200px 100px;

    -webkit-mask-size: 50%;            /* نسبة من العنصر */
    mask-size: 50%;
}

/* mask-repeat: يتحكم في سلوك التبليط */
.tiled-mask {
    -webkit-mask-image: url("dot-pattern.png");
    mask-image: url("dot-pattern.png");
    -webkit-mask-size: 50px 50px;
    mask-size: 50px 50px;
    -webkit-mask-repeat: repeat;       /* تبليط في كلا الاتجاهين */
    mask-repeat: repeat;
}

.no-tile {
    -webkit-mask-repeat: no-repeat;    /* عرض مرة واحدة، بدون تبليط */
    mask-repeat: no-repeat;
}

.horizontal-tile {
    -webkit-mask-repeat: repeat-x;     /* تبليط أفقي فقط */
    mask-repeat: repeat-x;
}

/* mask-position: أين توضع القناع */
.positioned-mask {
    -webkit-mask-image: url("shape.png");
    mask-image: url("shape.png");
    -webkit-mask-position: center;     /* توسيط القناع */
    mask-position: center;

    -webkit-mask-position: top right;  /* التموضع في أعلى اليمين */
    mask-position: top right;

    -webkit-mask-position: 20px 50px;  /* إزاحة من أعلى اليسار */
    mask-position: 20px 50px;
}

mask-composite

خاصية mask-composite تتحكم في كيفية دمج طبقات القناع المتعددة عند تطبيق أكثر من صورة قناع واحدة. هذا يمكّن تأثيرات تقنيع معقدة بدمج أو طرح أو تقاطع أو استبعاد مناطق القناع. يمكنك إنشاء أشكال دائرية مجوفة ودمج أقنعة هندسية وتدرجية وبناء أنماط كشف معقدة.

/* شكل دائري مجوف: طرح دائرة داخلية من دائرة خارجية */
.donut {
    -webkit-mask-image:
        radial-gradient(circle 50px at center, black 100%, transparent 100%),
        radial-gradient(circle 100px at center, black 100%, transparent 100%);
    mask-image:
        radial-gradient(circle 50px at center, black 100%, transparent 100%),
        radial-gradient(circle 100px at center, black 100%, transparent 100%);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* تقاطع: إظهار فقط حيث يتداخل كلا القناعين */
.intersection {
    -webkit-mask-image:
        linear-gradient(to right, black, transparent),
        linear-gradient(to bottom, black, transparent);
    mask-image:
        linear-gradient(to right, black, transparent),
        linear-gradient(to bottom, black, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* إضافة أشكال قناع متعددة معا */
.combined {
    -webkit-mask-image:
        radial-gradient(circle 60px at 30% 50%, black 100%, transparent 100%),
        radial-gradient(circle 60px at 70% 50%, black 100%, transparent 100%);
    mask-image:
        radial-gradient(circle 60px at 30% 50%, black 100%, transparent 100%),
        radial-gradient(circle 60px at 70% 50%, black 100%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

القطع مقابل التقنيع: متى تستخدم كلا منهما

كل من القطع والتقنيع يخفيان أجزاء من عنصر، لكنهما يخدمان أغراضا مختلفة. فهم متى تستخدم كلا منهما سيساعدك في اختيار الأداة المناسبة لكل حالة تصميم.

/*
 * القطع (clip-path)
 * ====================
 * - ينشئ حوافا صلبة (مرئي بالكامل أو مخفي بالكامل)
 * - يستخدم أشكالا هندسية (دائرة، بيضاوي، مضلع، مسارات SVG)
 * - دعم متصفحات أفضل (يعمل بدون بادئة في المتصفحات الحديثة)
 * - يمكن تحريكه بين أشكال من نفس النوع
 * - أخف على الأداء
 * - الأفضل لـ: الأشكال الهندسية، التصاميم الزاويّة، تحول الأشكال
 *
 * التقنيع (mask-image)
 * ====================
 * - ينشئ حوافا ناعمة (يدعم الشفافية الجزئية)
 * - يستخدم صورا وتدرجات لونية كأقنعة
 * - يتطلب بادئة -webkit- لمعظم المتصفحات
 * - يمكنه إنشاء تأثيرات تلاشي وملمسات وتعتيم
 * - أثقل قليلا على الأداء
 * - الأفضل لـ: تأثيرات التلاشي، طبقات الملمس، الأشكال العضوية
 */

/* استخدم clip-path للأشكال الهندسية */
.hexagon-avatar {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* استخدم القناع لتأثيرات التلاشي */
.fade-preview {
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
    mask-image: linear-gradient(to bottom, black 70%, transparent);
}

أقسام بطل إبداعية وفواصل

القطع والتقنيع مثاليان لإنشاء أقسام بطل مذهلة بصريا مع حواف زاويّة وفواصل قطرية بين أقسام الصفحة وانتقالات زخرفية تكسر التخطيط المستطيل النموذجي.

/* قسم البطل بأسفل مائل */
.hero-section {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 100px 20px 150px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

/* القسم التالي يتداخل مع الزاوية */
.content-section {
    margin-top: -80px;
    padding: 100px 20px;
    position: relative;
    z-index: 1;
}

/* فاصل قسم منحني */
.curved-hero {
    background: url("hero-bg.jpg") center/cover;
    padding: 100px 20px 120px;
    clip-path: ellipse(120% 100% at 50% 0%);
}

/* فاصل على شكل V */
.v-divider {
    background: #2c3e50;
    padding: 80px 20px 100px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
}

/* أسفل البطل على شكل موجة */
.wave-hero {
    position: relative;
    background: #3498db;
    padding: 100px 20px 80px;
}

.wave-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: white;
    clip-path: polygon(
        0% 100%, 100% 100%, 100% 0%,
        85% 40%, 70% 10%, 55% 50%,
        40% 20%, 25% 60%, 10% 30%, 0% 70%
    );
}

/* صورة بطل تتلاشى في الخلفية */
.hero-with-fade {
    position: relative;
    min-height: 100vh;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("hero.jpg") center/cover;
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 50%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 50%,
        transparent 100%
    );
}

/* بطل منقسم: صورة على جانب تتلاشى في لون */
.split-hero {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.split-hero .hero-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    background: url("hero-photo.jpg") center/cover;
    -webkit-mask-image: linear-gradient(
        to left,
        black 0%,
        black 40%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to left,
        black 0%,
        black 40%,
        transparent 100%
    );
}

/* قطع قطري مع كشف متحرك */
@keyframes diagonalReveal {
    from {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

.hero-image-reveal {
    animation: diagonalReveal 1.2s ease-out 0.3s both;
}

دعم المتصفحات وبادئات -webkit-

يختلف دعم المتصفحات للقطع والتقنيع. خاصية clip-path مع الأشكال الأساسية لها دعم ممتاز عبر جميع المتصفحات الحديثة بدون بادئات. clip-path القائم على SVG (باستخدام url()) له بعض التناقضات في المتصفحات الأقدم. تقنيع CSS يتطلب بادئة -webkit- في جميع متصفحات WebKit/Blink (Chrome وEdge وSafari وOpera)، بينما Firefox يدعم النسخة بدون بادئة.

/* clip-path: دعم جيد، لا حاجة لبادئة للأشكال الأساسية */
.clipped {
    /* يعمل في جميع المتصفحات الحديثة */
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}

/* mask-image: ضع دائما بادئة -webkit- */
.masked {
    /* متصفحات WebKit/Blink (Chrome، Edge، Safari، Opera) */
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;

    /* القياسية (Firefox) */
    mask-image: linear-gradient(to bottom, black, transparent);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

/* توفير بديل للمتصفحات الأقدم */
.clipped-with-fallback {
    /* بديل: استخدام overflow hidden مع border-radius */
    border-radius: 50%;
    overflow: hidden;

    /* المتصفحات الحديثة ستستخدم clip-path */
    clip-path: circle(50%);
}

/* استعلام ميزة لدعم القناع */
@supports (-webkit-mask-image: linear-gradient(black, transparent)) or
          (mask-image: linear-gradient(black, transparent)) {
    .enhanced-fade {
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
        mask-image: linear-gradient(to bottom, black 80%, transparent);
    }
}

أمثلة عملية

دعنا نجمع كل شيء معا مع أمثلة واقعية كاملة تدمج القطع والتقنيع والحركات والتصميم المتجاوب.

/* شبكة معرض مع كشف clip-path عند التمرير */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.5s ease-out;
}

.gallery-item:hover .overlay {
    clip-path: circle(75% at 50% 50%);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* منطقة محتوى قابلة للتمرير مع حواف تلاشي */
.scroll-container {
    max-height: 400px;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
}

/* شريط تمرير أفقي مع تلاشي الحواف */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
}

/* كشف دائري للصفحة الكاملة */
@keyframes pageRevealCircle {
    0% {
        clip-path: circle(0% at 50% 50%);
    }
    100% {
        clip-path: circle(150% at 50% 50%);
    }
}

/* مسح قطري للصفحة الكاملة */
@keyframes pageRevealDiagonal {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 200% 0%, 100% 100%, 0% 100%);
    }
}

.page-transition-circle {
    animation: pageRevealCircle 0.8s ease-out forwards;
}

.page-transition-diagonal {
    animation: pageRevealDiagonal 0.6s ease-in-out forwards;
}

/* كشف متدرج للعناصر الفرعية */
@keyframes slideClipReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.reveal-item {
    animation: slideClipReveal 0.5s ease-out both;
}

.reveal-item:nth-child(1) { animation-delay: 0.1s; }
.reveal-item:nth-child(2) { animation-delay: 0.2s; }
.reveal-item:nth-child(3) { animation-delay: 0.3s; }
.reveal-item:nth-child(4) { animation-delay: 0.4s; }