CSS Academy · درس

أقنعة CSS مقابل clip-path

قارن إخفاء CSS باستخدام mask-image مع clip-path واختر الأداة المناسبة

أقنعة CSS مقابل clip-path درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

طريقتان لإخفاء أجزاء من عنصر

يوفر CSS آليتين لجعل أجزاء من عنصر غير مرئية: clip-path وmask-image. وتختلف الآليتان في الإمكانات وخصائص الأداء وحالات الاستخدام.

مراجعة clip-path

يستخدم clip-path دوال أشكال CSS أو SVG لتحديد منطقة مرئية ذات حواف حادة. وكل ما يقع خارج منطقة القص يكون غير مرئي تمامًا. ولا يمكن إنشاء حواف ناعمة.

<div class="card"></div>

mask-image

يستخدم mask-image صورة أو تدرجًا بوصفه قناعًا. يختفي العنصر في المناطق التي يكون فيها القناع أسود أو شفافًا، ويظهر في المناطق التي يكون فيها أبيض أو معتمًا. وتتيح التدرجات الناعمة إنشاء حواف متلاشية.

<div class="fade-bottom"></div>

حواف ناعمة باستخدام mask-image

الميزة الأساسية للأقنعة هي أن أقنعة التدرج تنشئ حواف ناعمة ومتلاشية لا يستطيع clip-path إنتاجها:

<div class="carousel-edges"></div>

mask-image مع ملف صورة

استخدم صورة PNG أو SVG بوصفها قناعًا. وتحدد إضاءة الصورة أو قناة alpha فيها مستوى الشفافية:

<div class="element"></div>

خصائص الاختصار للقناع

إن mask هو اختصار يجمع بين mask-image وmask-repeat وmask-size وmask-position وغيرها — وهو مشابه لاختصار background.

<div class="element"></div>

-webkit-mask لمتصفح Safari

يتطلب Safari استخدام البادئة -webkit-mask للحصول على الدعم الكامل للأقنعة. أدرجها دائمًا إلى جانب الخاصية القياسية:

<div class="element"></div>

mask-composite

عند استخدام طبقات أقنعة متعددة، تتحكم mask-composite في كيفية دمجها:

<div class="complex-mask"></div>

مقارنة الأداء

يؤدي كل من clip-path وmask-image إلى تشغيل الرسم بدلًا من الاقتصار على العرض بالتركيب. اختبر الأداء بعناية على العناصر الكبيرة. وتكون أشكال clip-path البسيطة أسرع عمومًا من الأقنعة المعتمدة على الصور.

الاختيار بين clip-path وmask

استخدم clip-path عندما:

تحتاج إلى حواف هندسية حادة
تريد تحريك الشكل
تكون البساطة أهم من الحواف الناعمة

استخدم mask-image عندما:

تحتاج إلى حواف ناعمة ومتلاشية
تحتاج إلى أشكال معقدة معتمدة على الصور
تريد تلاشيًا باستخدام تدرج

تحقق سريع

أي خاصية CSS تتيح حواف ناعمة ومتلاشية لمنطقة مرئية، بخلاف clip-path؟

خلاصة

ينشئ clip-path مناطق قص هندسية ذات حواف حادة. ويستخدم mask-image الصور أو التدرجات لإنشاء المنطقة المرئية، ما يتيح حواف ناعمة ومتلاشية. استخدم mask-image للتلاشي بالتدرج والأشكال المعقدة، واستخدم clip-path للأشكال الهندسية الحادة والأشكال المتحركة. أدرج دائمًا البادئة -webkit-mask لدعم Safari.

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

هل درس «أقنعة CSS مقابل clip-path» مجاني؟

نعم — نص درس «أقنعة CSS مقابل clip-path» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «أقنعة CSS مقابل clip-path»؟

قارن إخفاء CSS باستخدام mask-image مع clip-path واختر الأداة المناسبة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «أقنعة CSS مقابل clip-path»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy