CSS - Masking القناع
CSS - خاصية Masking (القناع / التمويه)
🔸 خاصية mask تُستخدم لإخفاء أو إظهار أجزاء معينة من العنصر باستخدام صورة قناع (mask image).
المناطق الشفافة في القناع تُخفي الجزء المقابل من العنصر، والمناطق غير الشفافة تُبقيه ظاهرًا.
🧪 مثال أساسي على استخدام mask-image
.masked {
-webkit-mask-image: url("mask.png");
mask-image: url("mask.png");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
}
<div class="masked">
<img src="image.jpg" alt="صورة">
</div>
📌 في هذا المثال، يتم تطبيق قناع على العنصر بحيث تظهر فقط الأجزاء التي تسمح بها صورة القناع.
---🔹 شرح الخصائص المستخدمة
mask-image: تحدد صورة القناع (يجب أن تحتوي على شفافية).mask-repeat: هل تتكرر الصورة أم لا؟ (عادةno-repeat).mask-size: حجم القناع (مثلcoverأوcontain).
🎨 دعم المتصفحات
- بعض المتصفحات تحتاج إلى البادئة
-webkit-خاصة في Chrome وSafari. - Edge وFirefox يدعمان الخاصية بدون بادئة.
📌 ملاحظات هامة
- صورة القناع يجب أن تكون بصيغة تدعم الشفافية مثل PNG أو SVG.
- يمكن استخدام القناع مع أي عنصر HTML، بما في ذلك الصور والنصوص.
- يمكنك دمج خاصية
maskمعtransitionأوanimationللحصول على تأثيرات بصرية جذابة.
تعليقات
إرسال تعليق