CSSالتقنيع
- مفهوم التقنيع
- طريقة وضع قناع للعنصر
- وضع صورة كقناع
- وضع لون متدرج كقناع
- تحديد حجم القناع
- تحديد كيف سيتم تكرار القناع
- تحديد مكان القناع بالنسبة للعنصر
- رسم قناع بواسطة SVG
مفهوم التقنيع
التقنيع ( 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 فقم بتكرارهما كما يلي.
بهذا الأسلوب ستضمن أن يحاول المتصفح استخدام الخاصية mask-image و mask-size أولاً، و في حال لم يتعرّف عليمها فإنه سيستخدم الخاصيّتين -webkit-mask-image و -webkit-mask-size المعروفتين بالنسبة للمحرك الأساسي Webkit الذي بني عليه محرّك المتصفّح.
نود الإشارة إلى أنه حال كنت تستخدم متصفح لا يدعم التقنيع أو لا يدعم إحدى خصائصه التي قمت باستخدامها بأي شكل كان فإن العنصر سيظهر كما هو بدون قناع فقط.
وضع صورة كقناع
لتحديد الصورة التي سيتم استخدامها كقناع نستخدم الخاصية mask-image و من ثم نمرر لها مسار الصورة عن طريق الدالة url() التي نضعها لها كقيمة.
إفتراضياً، عند إضافة صورة كقناع للعنصر فإنها تظل تكرر نفسها حتى تطابق حجمه إن كانت بالأساس أصغر منه. و بالطبع تستطيع تحديد مكان القناع بالنسبة للعنصر، جعله يتمدد ليملئ المساحة المخصصة للعنصر، جعله لا يتكرر أكثر من مرة أو جعله يتكرر فقط بالطول أو العرض على حسب حاجتك.
إذا كان حجم الصورة التي سيتم وضعها بمثابة قناع للعنصر مطابق لحجمه فإنه لن يتم تكرارها و سيتم تقطيع الأجزاء الغير المشتركة بينهما بشكل دقيق جداً خالي من أي تشويه.
في المثال التالي قمنا بوضع الصورة mask.png كقناع للصورة nature.png.
ملاحظة: كلا الصورتين قياسهما 400×600 بكسل و ذلك لنحصل على تقطيع خالي من أي تشويه.
مثال
في المثال السابق الصورة و القناع لن يظهرا بشكل متجاوب ( Responsive ) مع مختلف أحجام الصفحات لأننا لم نحدد أن حجمهما الأقصى هو 100% فقط و هذا الأمر سنفعله فيما يلي.
وضع لون متدرج كقناع
لوضع لون متدرّج كقناع للعنصر نستخدم الخاصية mask-image و من ثم نمرر لها الألوان بواسطة إحدى دوال تدريج الألوان التي نضعها لها كقيمة.
في المثال التالي قمنا بوضع لون متدرّج كقناع للصورة nature.png لونه ما بين الأسود و الأسود الشفّاف.
المثال الأول
في المثال التالي قمنا بوضع لون متدرّج دائري كقناع للصورة nature.png لونه ما بين الأسود و الأسود الشفّاف.
ملاحظة: وضعنا نقطة التوقف ما بين الألوان المتدرجة عند 50% لكي يظهر اللون الشفاف بشكل حاد و دائري.
المثال الثاني
تحديد حجم القناع
لتحديد حجم القناع نستخدم الخاصية mask-size و من ثم نمرر لها إحدى القيم التالية.
| القيمة | إستخدامها |
|---|---|
| auto | هي القيمة الإفتراضية و التي تجعل القناع يظهر بحجمه الحقيقي. |
| contain | تجعل القناع يظهر بالكامل بدون قطع أي جزء منه و تحاول مطابقة حجمه مع حجم العنصر. |
| w% h% | هنا نقصد تمرير رقم مئوي يمثل كم نريد أن يكون عرض القناع بالنسبة للعنصر و طوله سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين مئويين لها إن أردت، الأول يمثل عرض القناع و الثاني طوله. |
| w-unit h-unit | هنا نقصد تمرير رقم بوحدة قياس محددة مثل px يمثل كم نريد أن يكون عرض القناع بالنسبة للعنصر و طوله سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين لها إن أردت، الأول يمثل عرض القناع و الثاني طوله. |
في المثال التالي قمنا بوضع الصورة mask.png كقناع للصورة nature.png كما أننا جعلنا حجمها الأقصى هو 100% لكي يظهرا بشكل متجاوب مع حجم الصفحة مهما كان.
المثال الأول
في المثال التالي قمنا بجعل حجم القناع 20% بالنسبة لحجم العنصر الموضوع له، مما سيجعله يقوم بتكرار نفسه إلى أن يملئ كل مساحة العنصر الموضوع له بمثابة قناع.
المثال الثاني
تحديد كيف سيتم تكرار القناع
لتحديد كيف سيكرر القناع نفسه أو لمنعه من تكرار نستخدم الخاصية mask-repeat و من ثم نمرر لها إحدى القيم التالية.
| القيمة | إستخدامها |
|---|---|
| no-repeat | لجعل القناع يظهر مرة واحدة فقط و لا يكرر نفسه. |
| repeat-x | لجعل القناع يكرر نفسه أفقياً إن كان هناك مساحة متوفرة في العنصر. |
| repeat-y | لجعل القناع يكرر نفسه عمودياً إن كان هناك مساحة متوفرة في العنصر. |
| repeat | لجعل القناع يكرر نفسه حتى يملئ كامل مساحة العنصر و هذه هي القيمة الإفتراضية. القناع الأخير قد يظهر بشكل جزئي إن كان لا يوجد مساحة كافية. |
| space | لجعل القناع يكرر نفسه حتى يملئ كامل مساحة العنصر. جميع الأقنعة المكررة تظهر بشكل كامل و متساوي و قد يتم إبعادها عن بعضها قليلاً لأجل ذلك. |
| round | لجعل القناع يكرر نفسه بشكل متساوي و قد يتمدد حتى يملئ كامل مساحة العنصر. |
في المثال التالي قمنا بجعل القناع mask.png يكرر نفسه عمودياً فقط.
المثال الأول
في المثال التالي قمنا بجعل القناع mask.png يكرر نفسه أفقياً و عمودياً و بدون أن يتم عرضه بشكل مقطوعغ.
المثال الثاني
تحديد مكان القناع بالنسبة للعنصر
إذا لم تقم بتحديد مكان ظهور القناع فإنه إفتراضياً يظهر في الأعلى ناحية اليسار.
لتحديد مكان ظهور القناع بالنسبة للعنصر الموضوع له نستخدم الخاصية mask-position و من ثم نمرر لها قيمة واحدة أو قيمتين.
في حال تمرير قيمة واحدة فإنه سيتم إظهارها عمودياً في الوسط. و في حال تمرير قيمتين لها فالأولى تمثل مكانها أفقياً و الثانية عمودياً.
فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الخلفية.
| القيمة | إستخدامها |
|---|---|
| left top | لإظهار القناع ناحية اليسار و في الأعلى. |
| left center | لإظهار القناع ناحية اليسار و في الوسط عمودياً. |
| left bottom | لإظهار القناع ناحية اليسار و في الأسفل. |
| right top | لإظهار القناع ناحية اليمين و في الأعلى. |
| right center | لإظهار القناع ناحية اليمين و في الوسط عمودياً. |
| right bottom | لإظهار القناع ناحية اليمين و في الأسفل. |
| center top | لإظهار القناع ناحية في الوسط أفقياً و في الأعلى. |
| center center | لإظهار القناع ناحية في الوسط أفقياً و عمودياً. |
| center bottom | لإظهار القناع ناحية في الوسط أفقياً و في الأسفل. |
| x% y% | هنا نقصد تمرير رقم مئوي مكان x يمثل كم نريد أن يكون القناع بعيد من جهة يسار العنصر و تمرير رقم مئوي مكان y يمثل كم نريد أن يكون بعيد من جهة أعلى العنصر. |
| x-unit y-unit | هنا نقصد تمرير رقم بوحدة قياس محددة مثل px يمثل كم نريد أن يكون القناع بعيد من جهة يسار العنصر و تمرير رقم مئوي مكان y يمثل كم نريد أن يكون بعيد من جهة أعلى العنصر. |
في المثال التالي وضعنا القناع mask.png في وسط العنصر أفقياً و عمودياً.
مثال
رسم قناع بواسطة SVG
الصورة التي تريد وضع قناع لها يمكنك رسمه بدون استخدام خصائص CSS التي سبق و تعرف عليها.
لرسم القناع للصورة، يمكنك وضعها بداخل وسم <svg> و من بعدها تقوم برسم القناع بواسطة الوسم <mask> الذي تربطه بها.
في المثال التالي قمنا بوضع الصورة nature.png بداخل وسم <svg>.
بعدها قمنا بإضافة الوسم <mask> الذي سيمثل القناع في الوسم <svg>.
بعدها قمنا بإعطاء بإضافة الوسم <polygon> في الوسم <mask> لتحديد شكل الرسم الذي سيتم استخدامه كقناع.
بعدها قمنا بإضافة id للوسم <mask> و من ثم تمريرها للصورة التي ستستخدمها كقناع.
المثال الأول
يمكنك استخدام أداة رسم الأشكال التي يوفرها لك موقع هرمش لرسم الشكل الذي تريده بكل سهولة.
بعد الإنتهاء من رسم الشكل قم فقط بنسخ النقاط و وضعها كقيمة للخاصية points.
في المثال التالي قمنا باستخدام عدة وسوم <circle> بهدف رسم قناع على شكل دوائر.
كل وسم <circle> حددنا من خلاله حجم و موقع الدائرة التي نريد عرضها من الصورة nature.png.
