تطبيق التأثيرات على الصور باستخدام سمة صورة القناع في 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() لتمرير صورة. يجب أن تتضمّن صورة القناع منطقة شفافة أو شبه شفافة.

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

في هذا المثال، أستخدم أيضًا السمة 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;

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

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

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