تطبيق التأثيرات على الصور باستخدام سمة صورة القناع في CSS

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

Rachel Andrew

عند اقتصاص عنصر باستخدام السمة clip-path، تصبح المنطقة المقتطعة غير مرئية. إذا أردت بدلاً من ذلك جعل جزء من الصورة غير شفاف أو تطبيق تأثير آخر عليها، عليك استخدام ميزة "التمويه". تشرح هذه المشاركة كيفية استخدام السمة mask-image في CSS، ما يتيح لك تحديد صورة لاستخدامها كطبقة قناع. يمنحك هذا ثلاثة خيارات. يمكنك استخدام ملف صورة كقناع أو ملف SVG أو مخطط تدرّج.

توافُق المتصفح

لا تتوافق معظم المتصفّحات إلا بشكل جزئي مع خاصيّة حجب CSS العادية. يجب استخدام البادئة -webkit- بالإضافة إلى الموقع العادي لتحقيق أفضل توافق مع المتصفّحات. اطّلِع على المقالة هل يمكنني استخدام أقنعة CSS؟ للحصول على معلومات كاملة حول المتصفّحات المتوافقة.

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

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

حجب جزء من الصورة باستخدام صورة

تعمل السمة mask-image بشكل مشابه للسمة background-image. استخدِم القيمة url() لتمرير صورة. يجب أن تحتوي صورة القناع على منطقة شفافة أو شبه شفافة.

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

في هذا المثال، أستخدِم أيضًا السمة mask-size بالقيمة cover. تعمل هذه السمة بالطريقة نفسها التي تعمل بها background-size. يمكنك استخدام الكلمات الرئيسية cover وcontain أو يمكنك تحديد حجم الخلفية باستخدام أي وحدة طول صالحة أو نسبة مئوية.

يمكنك أيضًا تكرار القناع تمامًا كما قد تكرر صورة خلفية، من أجل استخدام صورة صغيرة كنمط متكرر.

إخفاء المحتوى باستخدام ملفات SVG

بدلاً من استخدام ملف صورة كقناع، يمكنك استخدام ملف SVG. هناك طريقتان لإجراء ذلك. الطريقة الأولى هي استخدام عنصر <mask> داخل ملف SVG والإشارة إلى معرّف هذا العنصر في سمة mask-image.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

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

لا داعي للقلق، فبالنسبة إلى السيناريو الأكثر شيوعًا لتطبيق تأثير القناع على صورة، يمكننا تضمين الصورة في ملف SVG.

وضع قناع باستخدام تدرّج

إنّ استخدام تدرج CSS كقناع هو طريقة أنيقة للوصول إلى منطقة مقنَّعة بدون الحاجة إلى مواجهة مشكلة إنشاء صورة أو رسومات موجّهة يمكن تغيير حجمها (SVG).

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

يمكنك استخدام أي من أنواع التدرجات المعتمدة، وتقديم ابتكارات كما تريد. يستخدم هذا المثال التالي تدرجًا شعاعيًا لإنشاء قناع دائري لإضاءة خلف الترجمة.

استخدام أقنعة متعددة

كما هو الحال مع صور الخلفية، يمكنك تحديد مصادر متعددة للقناع، ودمجها للحصول على التأثير الذي تريده. ويكون ذلك مفيدًا على وجه الخصوص إذا كنت تريد استخدام نمط تم إنشاؤه باستخدام تدرجات CSS كقناع. وستستخدم هذه الصور عادةً صور خلفية متعددة، وبالتالي يمكن تحويلها بسهولة إلى قناع.

على سبيل المثال، عثرت على نمط مربّع جميل في هذه المقالة. في ما يلي الرمز البرمجي الذي يستخدم صور الخلفية:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

لتحويل هذا النمط أو أي نمط آخر مصمَّم لصور الخلفية إلى قناع، ستحتاج إلى استبدال سمات background-* بسمات mask ذات الصلة، بما في ذلك سمات -webkit التي تبدأ ببادئة.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

يمكنك إنشاء بعض التأثيرات الرائعة من خلال تطبيق أنماط متدرجة على الصور. جرِّب إنشاء ريمكس من Glitch واختبار بعض الصيغ الأخرى.

إلى جانب الاقتصاص، تعد أقنعة CSS وسيلة لإضافة الاهتمام إلى الصور وعناصر HTML الأخرى دون الحاجة إلى استخدام تطبيق رسومات.

صورة من تصوير جوليو ريوناالدو على موقع Unسبلاش