mask-*
قناع العنصر (Mask) mask-*
يخفي أجزاء من عنصر باستخدام تدرّج أو صورة كقالب شفافية — أُضيفت كأصناف جاهزة في Tailwind v4.1 لتأثيرات تلاشٍ أنيقة.
القناع (mask) تقنية CSS تستخدم شفافية صورة أو تدرّج كـ«قالب»: الأجزاء الشفافة من القناع تُخفي الجزء المقابل من العنصر، والأجزاء المعتمة تُبقيه ظاهرًا. من v4.1 وفّر Tailwind أصنافًا جاهزة للحالة الأشيع: تلاشي حافّة (mask-b-from-50% يُبهت الحافّة السفلية تدريجيًّا)، إضافة لأقنعة خطّية (mask-linear-*) ودائرية (mask-radial-*) ومخروطية (mask-conic-*).
الاستخدام الشائع: صورة تتلاشى إلى شفافية عند حافّتها بدل حافّة حادّة مفاجئة، أو منطقة محتوى تندمج بصريًّا مع الخلفية خلفها. يمكن أيضًا استخدام صورة PNG بشفافية كقناع كامل (مثل mask-[url(/mask.png)]) لأشكال غير منتظمة.
الصياغة
class="mask-b-from-50%" /* تلاشي تدريجي من المنتصف نحو الأسفل */ class="mask-radial-from-70%" /* تلاشي دائري */
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
<script src="https://cdn.tailwindcss.com"></script> <div class="p-4"> <div class="mask-b-from-40% h-40 w-full rounded-lg bg-[url(https://picsum.photos/500/300)] bg-cover"></div> </div>
أهم القيم
| القيمة | الوظيفة |
|---|---|
| mask-{t,r,b,l}-from-* | تلاشي من حافّة محدّدة (أعلى/يمين/أسفل/يسار) |
| mask-linear-{n} | تدرّج خطّي بزاوية محدّدة |
| mask-radial-from-* / mask-radial-at-* | تدرّج دائري ومركزه |
| mask-none | إزالة القناع |
| mask-[url(/mask.png)] | استخدام صورة خارجية كقناع كامل |
💡 نصائح عملية
- mask-b-from-50% على صورة أو بطاقة يعطي تأثير «اندماج مع الخلفية» أنيق بلا أي جافاسكربت
- هذه الأصناف الجاهزة من v4.1 — تحقّق من إصدار Tailwind في مشروعك قبل الاعتماد عليها
⚠️ أخطاء شائعة
- الخلط بين mask (يخفي أجزاء بالشفافية) وoverflow-hidden (يقصّ عند حدود صندوق مستطيل صريح) — أدوات مختلفة لمشاكل مختلفة
- استخدام قناع معقّد (مثل صورة PNG) بلا اختبار الأداء — أقنعة الصور أثقل من التدرّجات المبنية بـ CSS
خصائص ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs