جاري التحميل...

الأقنعة في CSS

Optional Advanced فرغ للتو أعمدة الجريدة. هذه الحصة أداة اختيارية أخرى: القناع. تضع استنسلًا على صندوق واحد. حيث يكون الاستنسل ممتلئًا ترى الصورة أو اللون. حيث يكون فارغًا يختفي ذلك الصندوق. أنت لا تشق المقال إلى جداول، ولا تحرّك بلاط أيقونات على ورقة sprite.

الجواب المباشر

قناع CSS يخفي أجزاءً من العنصر بـ mask-image — PNG أو SVG أو تدرج. فكّر في رشّ الطلاء عبر قصّة. mask-size وmask-repeat وmask-position تعمل مثل طبقة الخلفية: cover وno-repeat وcenter. mask-mode يختار ألفا (شفافية ملف القناع) أو الإضاءة (فاتح مقابل داكن). استخدم قناعًا حين يجب أن يتلاشى الحافة. استخدم clip-path حين تريد دائرة أو مضلعًا حادًّا. أبقِ التسميات والأزرار مرئية بالكامل.

لماذا القناع ليس عمودًا ولا sprite

الأعمدة المتعددة تفتّت تيار نص واحد. ورقة الـ sprite تقصّ صورة نقطية بـ background-position لتشترك أيقونات كثيرة في ملف. القناع لا يفعل هذا ولا ذاك. العنصر ما زال يشغل صندوقه. عرض التخطيط وارتفاعه لا ينكمشان. تتغيّر فقط أي بكسلات من ذلك الصندوق تُرسَم. المرشحات (blur() وgrayscale()) تغيّر مظهر كل بكسل مرئي؛ القناع يقرّر أي بكسلات تبقى.

PNG كاستنسل

mask-image يأخذ url(...) كما يفعل background-image. PNG القناع النموذجي أبيض (أو معتم) حيث تريد الصورة، وشفاف حيث تريد ثقبًا:

PNG mask with mask-image

css 
.hero-photo {
width: 20rem;
height: 12rem;
background: url("/img/studio.jpg") center / cover no-repeat;
mask-image: url("/img/soft-blob.png");
mask-size: cover;
mask-repeat: no-repeat;
}

الصورة ما زالت خلفية (أو <img> بنفس القناع). ملف البقعة استنسل فقط. إن غاب ملف القناع قد يختفي العنصر كله — احتفظ بأسلوب بلا قناع احتياطيًا، أو اختبر العنوان.

تلاشٍ بتدرج

لا تحتاج ملفًا ثانيًا. قناع التدرج هو التلاشي اليومي أسفل البطاقة:

Fade with a gradient mask

css 
.card-lead {
mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-repeat: no-repeat;
}

الأسود (أو المعتم تمامًا) يُبقي المحتوى؛ transparent يثقب. التدرج يعيش في CSS فلا طلب HTTP إضافي — بخلاف ورقة أيقونات sprite. هذا ليس opacity على البطاقة كلها: النص في الجزء الصلب يبقى حادًا؛ المنطقة المقنَّعة فقط تذوب.

الحجم والتكرار والموضع

عامل القناع كطبقة خلفية لا تراها كصورة:

Size, repeat, and position

css 
.badge {
mask-image: url("/img/star-mask.svg");
mask-size: 4rem 4rem;
mask-repeat: no-repeat;
mask-position: center;
}

mask-size: cover يملأ الصندوق؛ contain يحفظ نسبة الاستنسل؛ الأطوال تثبّت شكلًا صغيرًا. repeat يبلّط الاستنسل (نادر وسهل الإفراط). الاختصار mask موجود، لكن المبتدئ أهدأ مع الخصائص الطويلة حتى تشبه الطبقة background.

ألفا مقابل الإضاءة

mask-mode يجيب: «أأقرأ الشفافية أم السطوع؟»

Luminance mask-mode on a photo

css 
.portrait {
mask-image: url("/img/gray-sculpt.jpg");
mask-mode: luminance;
mask-size: cover;
}

alpha (غالبًا الافتراضي لـ PNG الشفاف) يستخدم قناة ألفا. luminance يستخدم الفاتح والداكن: الأبيض يظهر عادةً والأسود يخفي — مفيد حين يكون الاستنسل صورة رمادية لا PNG شفافًا. إن «لم يفعل» قناع JPEG شيئًا فغالبًا احتجت luminance. يوجد أيضًا mask-type على عناصر SVG <mask>؛ على صناديق HTML ابدأ بـ mask-mode.

قص حاد مقابل قناع ناعم

clip-path يقطع هندسة: دائرة أو inset أو مضلع. الحافة حادة. القناع يمكن أن يكون ناعمًا. ليسا اسمين لخاصية واحدة:

Hard clip-path versus a soft mask

css 
.avatar {
clip-path: circle(50%);
}

.poster {
mask-image: radial-gradient(circle, #000 55%, transparent 80%);
mask-repeat: no-repeat;
}

الصور الرمزية والتذاكر تريد غالبًا clip-path. الملصق الذي يذوب في الصفحة يريد قناع تدرج. يمكن الجمع، لكن مهمة واحدة لكل خاصية أهدأ. overflow: hidden مع border-radius أداة ثالثة: تقص الأبناء إلى صندوق الحشو. القناع يرسم العنصر نفسه بما فيه الخلفية دون تدوير صندوق التخطيط.

سفاري وبادئة WebKit

بعض إصدارات Safari ما زالت تريد -webkit-mask-image (ورفاقها) بجانب الخصائص القياسية:

WebKit prefix for Safari

css 
.fade-photo {
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

ضع سطر البادئة وسطر المعيار. لا تشحن البادئة وحدها إلى الأبد. @supports يمكن أن يغلف الزوائد؛ العادة: اختبر التلاشي في Safari لا في Chromium فقط.

قناع مقابل قص مقابل overflow مقابل sprites

📊 Mask vs clip-path vs overflow vs sprites

Tool Job Poor fit
mask-image / mask-mode Soft holes, fades, shaped photos on one element Hiding a whole form; replacing column layout
clip-path Hard circle, polygon, inset silhouette Soft dissolves; newspaper columns
overflow: hidden Clip descendants to the box (often with radius) Painting a gradient stencil on the element’s own pixels
Sprites (background-position) Many icon tiles from one bitmap Stenciling a hero photo; flowing article text
Multi-column (column-*) Newspaper fill of one text stream Visibility holes in a picture

Optional Advanced استخدم sprites لـ الأيقونات والأعمدة لـ النثر. القناع هو الاستنسل. خلط الثلاثة على بطل واحد يعطيك صورة مقصوصة كـ sprite ومفتّتة كعمود.

ما لا تقنّعه

لا تستخدم قناعًا «لتنظيف» تخطيط فوضوي. إن وقع زر أو تسمية تحت التلاشي فلن يُقرأ ولن يُضغط. قد يعلن قارئ الشاشة النص بينما لا يرى المبصر شيئًا — هذا خلل لا ميزة. التباين ما زال مهمًا في الجزء المرئي. الصور الزخرفية والبطاقات والأيقونات أهداف معتادة؛ حقول تسجيل الدخول ليست كذلك.

Mask is not overflow or a sprite sheet

css 
.ok-art {
mask-image: linear-gradient(to right, #000, transparent);
}

.not-a-layout-fix {
/* don't: mask the entire toolbar because it overflowed */
}

.icons {
/* sprites still use background-position — not mask-image */
background-image: url("/img/icons.png");
background-position: 0 -32px;
}

إن برز ابن من بطاقة فـ overflow (أو ابن أصغر) إصلاح التخطيط. إن كان لديك اثنا عشر ملف أيقونة HTTP فـ sprite أو مجموعة SVG إصلاح الأصل. القناع لا يحل محل أي منهما.

جرّب بنفسك

  1. أعطِ صندوقًا ملونًا mask-image: linear-gradient(to bottom, #000 50%, transparent) وشاهد الذوبان من الأسفل.
  2. بدّل استنسل SVG أو PNG صغيرًا؛ اضبط mask-size وmask-position: center.
  3. جرّب mask-mode: luminance على قناع JPEG رمادي مقابل alpha على PNG شفاف.
  4. قارن نفس الدائرة بـ clip-path: circle(50%) — لاحظ الحافة الحادة.
  5. أضف -webkit-mask-image بنفس التدرج. لا تقنّع نموذجًا.

أخطاء شائعة

  • استخدام القناع تخطيط صفحة أو بدل overflow: hidden
  • نسيان mask-size فيبقى استنسل صغير في الزاوية
  • انتظار ثقوب من قناع JPEG بلا mask-mode: luminance
  • تخطي -webkit-mask-image ولوم «أقنعة CSS» في Safari
  • معاملة clip-path وmask-image كشيء واحد
  • تقنيع التسميات أو الشروح أو الأزرار حتى يموت التباين وأهداف النقر
  • الخلط مع sprites (إزاحات البلاط) أو الأعمدة المتعددة (تيارات النص)

الخلاصة

  • القناع استنسل على عنصر واحد: أظهر هنا وأخفِ هناك
  • mask-image يأخذ عنوانًا أو تدرجًا؛ الحجم والتكرار والموضع تشبه الخلفية
  • mask-mode: ألفا مقابل إضاءة
  • clip-path قص هندسي حاد؛ القناع يمكن أن يتلاشى
  • بادئة لـ Safari؛ لا تقنّع واجهة ضرورية
  • Optional Advanced يتابع بعدها بـ واجهة المستخدم (user-interface)

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 74 من 75
Css درس تعليمي