تطبيق التأثيرات على الصور باستخدام سمة صورة القناع في 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 الأخرى بدون الحاجة إلى استخدام تطبيق رسومات.

صورة مقدمة من Julio Rionaldo على Unsplash.