CSSالتقنيع

مفهوم التقنيع

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

Original Image

Mask

Masked Image

في هذا الدرس ستتعرف على الخصائص التالية التي تستخدم لتحديد كيف سيتم تطبيق القناع على العنصر:
mask-image mask-position mask-repeat mask-size

أنواع الأقنعة

نوع الطبقة التي يمكن استخدامها كقناع للعنصر يمكن أن تكون صورة إمتدادها png أو svg، لون متدرّج ( Gradient ) و فيه نسبة من الشفافية ( Transparency )، وسم <mask> موضوع بمثابة قناع لصورة موضوعة بأسلوب svg.

طريقة وضع قناع للعنصر

بدايةً عليك معرفة أن وضع قناع للعنصر هو أمر غير مدعوم بشكل مباشر في معظم المتصفحات و لكن رغم ذلك تستطيع وضع قناع بالإعتماد على المحرك Webkit الذي تم بناء معظم محرّكات المتصفحات بالأساس عليه و ذلك من خلال تكرار الخاصية نفسها مع إضافة -webkit- في أولها.

فمثلاً إذا كنت ستستخدم الخاصيّتين mask-image و mask-size فقم بتكرارهما كما يلي.

-webkit-mask-image: url(mask.png);
mask-image: url(mask.png);

-webkit-mask-size: 100%;
mask-size: 100%;

بهذا الأسلوب ستضمن أن يحاول المتصفح استخدام الخاصية mask-image و mask-size أولاً، و في حال لم يتعرّف عليمها فإنه سيستخدم الخاصيّتين -webkit-mask-image و -webkit-mask-size المعروفتين بالنسبة للمحرك الأساسي Webkit الذي بني عليه محرّك المتصفّح.

وضع صورة كقناع

لتحديد الصورة التي سيتم استخدامها كقناع نستخدم الخاصية mask-image و من ثم نمرر لها مسار الصورة عن طريق الدالة url() التي نضعها لها كقيمة.

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

في المثال التالي قمنا بوضع الصورة mask.png كقناع للصورة nature.png.
ملاحظة: كلا الصورتين قياسهما 400×600 بكسل و ذلك لنحصل على تقطيع خالي من أي تشويه.

img {
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
}

وضع لون متدرج كقناع

لوضع لون متدرّج كقناع للعنصر نستخدم الخاصية mask-image و من ثم نمرر لها الألوان بواسطة إحدى دوال تدريج الألوان التي نضعها لها كقيمة.

في المثال التالي قمنا بوضع لون متدرّج كقناع للصورة nature.png لونه ما بين الأسود و الأسود الشفّاف.

img {
    -webkit-mask-image: linear-gradient(black, transparent);
    mask-image: linear-gradient (black, transparent);
}

في المثال التالي قمنا بوضع لون متدرّج دائري كقناع للصورة nature.png لونه ما بين الأسود و الأسود الشفّاف.
ملاحظة: وضعنا نقطة التوقف ما بين الألوان المتدرجة عند 50% لكي يظهر اللون الشفاف بشكل حاد و دائري.

img {
    -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

تحديد حجم القناع

لتحديد حجم القناع نستخدم الخاصية mask-size و من ثم نمرر لها إحدى القيم التالية.

في المثال التالي قمنا بوضع الصورة mask.png كقناع للصورة nature.png كما أننا جعلنا حجمها الأقصى هو 100% لكي يظهرا بشكل متجاوب مع حجم الصفحة مهما كان.

img {
    max-width: 100%;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

في المثال التالي قمنا بجعل حجم القناع 20% بالنسبة لحجم العنصر الموضوع له، مما سيجعله يقوم بتكرار نفسه إلى أن يملئ كل مساحة العنصر الموضوع له بمثابة قناع.

img {
    max-width: 100%;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
    -webkit-mask-size: 20%;
    mask-size: 20%;
}

تحديد كيف سيتم تكرار القناع

لتحديد كيف سيكرر القناع نفسه أو لمنعه من تكرار نستخدم الخاصية mask-repeat و من ثم نمرر لها إحدى القيم التالية.

في المثال التالي قمنا بجعل القناع mask.png يكرر نفسه عمودياً فقط.

img {
    max-width: 100%;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
    -webkit-mask-size: 30%;
    mask-size: 30%;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
}

في المثال التالي قمنا بجعل القناع mask.png يكرر نفسه أفقياً و عمودياً و بدون أن يتم عرضه بشكل مقطوعغ.

img {
    max-width: 100%;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
    -webkit-mask-size: 30%;
    mask-size: 30%;
    -webkit-mask-repeat: space;
    mask-repeat: space;
}

تحديد مكان القناع بالنسبة للعنصر

إذا لم تقم بتحديد مكان ظهور القناع فإنه إفتراضياً يظهر في الأعلى ناحية اليسار.

لتحديد مكان ظهور القناع بالنسبة للعنصر الموضوع له نستخدم الخاصية mask-position و من ثم نمرر لها قيمة واحدة أو قيمتين.
في حال تمرير قيمة واحدة فإنه سيتم إظهارها عمودياً في الوسط. و في حال تمرير قيمتين لها فالأولى تمثل مكانها أفقياً و الثانية عمودياً.

فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الخلفية.

في المثال التالي وضعنا القناع mask.png في وسط العنصر أفقياً و عمودياً.

img {
    max-width: 100%;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
    -webkit-mask-size: 50%;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
}

رسم قناع بواسطة SVG

الصورة التي تريد وضع قناع لها يمكنك رسمه بدون استخدام خصائص CSS التي سبق و تعرف عليها.
لرسم القناع للصورة، يمكنك وضعها بداخل وسم <svg> و من بعدها تقوم برسم القناع بواسطة الوسم <mask> الذي تربطه بها.

في المثال التالي قمنا بوضع الصورة nature.png بداخل وسم <svg>.
بعدها قمنا بإضافة الوسم <mask> الذي سيمثل القناع في الوسم <svg>.
بعدها قمنا بإعطاء بإضافة الوسم <polygon> في الوسم <mask> لتحديد شكل الرسم الذي سيتم استخدامه كقناع.
بعدها قمنا بإضافة id للوسم <mask> و من ثم تمريرها للصورة التي ستستخدمها كقناع.

<svg width="100" height="100">
    <mask id="svgmask">
        <polygon fill="#FFFFFF" points="50 0, 83 12, 100 43, 94 78, 68 100, 32 100, 6 78, 0 43, 17 12">&l;/polygon>
    </mask>
    <image xlink:href="/tutorials/css/masking/nature.png" mask="url(#svgmask)"></image>
<svg>

في المثال التالي قمنا باستخدام عدة وسوم <circle> بهدف رسم قناع على شكل دوائر.
كل وسم <circle> حددنا من خلاله حجم و موقع الدائرة التي نريد عرضها من الصورة nature.png.

<svg width="100" height="100">
    <mask id="svgmask">
        <circle fill="#ffffff" cx="75" cy="75" r="60"></circle>
        <circle fill="#ffffff" cx="260" cy="100" r="85"></circle>
        <circle fill="#ffffff" cx="90" cy="240" r="75"></circle>
        <circle fill="#ffffff" cx="270" cy="260" r="40"></circle>
    </mask>
    <image xlink:href="/tutorials/css/masking/nature.png" mask="url(#svgmask)"></image>
<svg>