كيفية استخدام تقنيات القطع والإخفاء في CSS وSVG

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

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

أساسيات القطع

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

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

ملحوظة: لا تجرب هذا على موقعك المباشر

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

القص في العمل

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

فيما يلي مقتطف من بنية HTML من المثال:

 [لغة البرمجة]

<svg class="clip-svg">
	<defs>
		<clipPath id="مضلع-كليب-مثلث-متساوي الأضلاع" clipPathUnits="objectBoundingBox">
			<نقاط المضلع="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

[/لغة البرمجة]

هذا هو CSS لإجراء عملية القطع:

 [المغلق]

.مضلع مقطع مثلث متساوي الأضلاع {
	- مسار مقطع webkit: المضلع (0% 87%، 50% 0%، 50% 0%، 100% 87%))؛
	مسار المقطع: مضلع (0% 87%، 50% 0%، 50% 0%، 100% 87%)؛
	-webkit-clip-path: url("#polygon-clip-triangle-equizing");
	مسار المقطع: url("#polygon-clip-triangle-equiliter");
}

[/css]

يمكنك معرفة المكان الذي تتم الإشارة فيه إلى معرف clipPath في HTML وكيف يستخدم عنوان URL clip-path لإجراء القطع.

أداة كليبي

Clippy هي أداة رائعة لإنشاء مسارات مقاطع CSS. هناك مجموعة واسعة من أشكال وأحجام البداية التي يمكن تخصيصها.

أساسيات الإخفاء

يتم إجراء الإخفاء باستخدام صورة PNG أو تدرج CSS أو عنصر SVG لإخفاء جزء من الصورة أو عنصر آخر على الصفحة. سنركز على رسومات SVG، لكن ضع في اعتبارك أنه يمكن القيام بذلك باستخدام أنواع أو أنماط صور أخرى.

خاصية القناع وعنصر القناع

مجرد تجديد للمساعدة في التصور، من المهم أن تضع في اعتبارك أن العنصر المقنع هو الصورة "الأصلية" (قبل تطبيق القناع). قد لا ترغب في رؤية الصورة بأكملها، لذلك يتم إخفاء أجزاء منها باستخدام خاصية mask CSS. mask هو اختصار CSS لمجموعة من الخصائص الفردية، والتي سنتعمق فيها بعد قليل. يتم استخدام عنصر SVG <mask> داخل رسم SVG لإضافة تأثيرات التقنيع. في هذا المثال، القناع عبارة عن دائرة ويوجد أيضًا تدرج مطبق.

استخدام عنصر قناع SVG على رسم SVG

للتعرف على <mask> SVG، سنقوم بالإخفاء باستخدام رسم SVG.

قد يكون الأمر معقدًا بعض الشيء للوهلة الأولى، لكن كل ذلك يعمل معًا لإخفاء الصورة الأساسية. لدينا صورة فعلية كخلفية، فأين يلعب SVG دورًا؟ على عكس أمثلة القطع، فإن صورة الخلفية هذه موجودة تقنيًا داخل عنصر SVG. سنستخدم CSS لتطبيق هذا القناع على الصورة. ستأتي الخصائص من عنصر قناع SVG، وسنعطيها معرف masked-element في CSS الخاص بنا.

لرؤية ذلك عمليًا، راجع نموذج Codepen هذا. إليك رمز العمل لرسم SVG المقنع:

 [لغة البرمجة]

<svg class="العنصر المقنع" العرض="300" الارتفاع="300" viewBox="0 0 300 300">
	<رابط الصورة:href="رابط الصورة" العرض="300px" الارتفاع="300px" />
</svg>

[/لغة البرمجة] 

باستخدام CSS هذا، نحدد مكان العثور على القناع. سيبحث عن معرف #mask-this:

 [المغلق]
/* إليك ملف CSS للإخفاء */
صورة العنصر المقنع {
  قناع: URL(#mask1);
}

[/css] 

لاحظ التدرج في شكل الدائرة؟ تم تطبيق التدرج اللوني، بالإضافة إلى تحديد شكل الدائرة للقناع.

 [لغة البرمجة]

<svg class="svg-mask">
 	<defs>
 		<معرف القناع="القناع1" MaskUnits="objectBoundingBox" MaskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1>
      <توقف لون الإيقاف="الأبيض" تعويض="0"/>
      <stop-color="green" توقف العتامة="0" إزاحة="1"/>
    </linearGradient>
    <circle cx="0.50" سي="0.50" ص="0.50" المعرف="الدائرة" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

[/لغة البرمجة]

إخفاء نص SVG

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

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

 [لغة البرمجة]

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 600 400" العرض="600" الارتفاع="400>
    <defs>
      <معرف القناع="myMask">
        <العرض المستقيم="100%" الارتفاع="100%" ملء="#fff" />
        <text x="50" ص="200" id="myText">النص الخاص بي</text>
        <text x="125" ص="293" id="mySubtext>SVG</text>
      </mask>
    </defs>
    <القطع الناقص الفئة="ملثم" cx="300" سي="200" rx="300" راي="150" ملء="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

[/لغة البرمجة]

 [المغلق]

/* هذا هو CSS لعنصر النص */
#نصي {
حجم الخط: 125 بكسل؛
نمط الخط: غامق؛
ملء: #000؛
}

/* إليك ملف CSS للإخفاء */
ملثمين {
القناع: url("#myMask");
}

[/css]

لفهم التعليمات البرمجية بشكل كامل، من المفيد تجربة التعليمات البرمجية وتجريبها. حاول تغيير الألوان وتغيير النص وضبط الأحجام في Codepen هذا.

خاصية القناع والصورة

يمكن الإعلان عن صورة ويمكن ضبط mask-image على قيمة URL. يمكن أن تكون mask-image PNG أو SVG أو إشارة إلى عنصر mask SVG، كما أوضحت في المثال السابق.

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

 [المغلق]

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="صورة مقنعة">

[/css] 

يوجد حتى الآن الكثير من رموز SVG، ولكن هذا المثال مختلف قليلًا حيث ستكون هناك صورة نقطية مقنعة بـ SVG.

 [المغلق]

قناع المثال {
  صورة القناع: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  وضع القناع: ألفا؛
  وضع قناع webkit: ألفا؛
  تكرار القناع: عدم التكرار؛
  تكرار قناع webkit: عدم التكرار؛
  حجم القناع: 200 بكسل؛
  حجم قناع الويب: 200 بكسل ؛
  موضع القناع: المركز؛
  webkit-mask-position: center;
}

[/css]

خاصية mask-image هي المكان الذي سيتم فيه الإعلان عن شكل القناع. في هذه الحالة، صورة القناع هي رسم SVG. إن تضمين رابط URL هو كيفية إنشاء القناع.

ومن هنا على Codepen.

الجمع بين صور قناع متعددة

فقط عندما تعتقد أن الإخفاء لا يمكن أن يصبح أفضل، هناك خيار لتعيين أكثر من طبقة صورة قناع واحدة. كل ما عليك فعله هو إضافة قيمتين لعنوان URL (أو أكثر إذا كنت تشعر بالطموح) مفصولة بفاصلة.

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

 [المغلق]

.القناع المشترك {
   صورة القناع: url(https://linktoimage.com/arrow-01.svg)، url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg)، url(https://linktoimage.com/browser-icon-01.svg);
}

[/css] 

كل ما عليك فعله هو إضافة القيمتين (بفاصلة) والآن يوجد قناعان مدمجان، مما يجعل احتمالات الإخفاء لا نهاية لها.

ومن هنا على Codepen.

قم بإنشاء تدرج بسيط باستخدام mask-image

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

في هذا المثال، تم تطبيق فئة على مجموعة التدرج كخاصية mask-image . باستخدام هذا الإعلان البسيط، كان من السهل إنشاء قناع متدرج على الصورة.

 [المغلق]

صورة القناع: تدرج خطي (أسود، أبيض، شفاف)؛
-webkit-mask-image: خطي متدرج (أسود، أبيض، شفاف)؛

[/css] 

انظر هذا على Codepen.

خاصية تكرار القناع

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

هناك بعض الأشياء المهمة التي يجب وضعها في الاعتبار، مثل الحجم ونوع تكرار القناع الذي يجب الإعلان عنه حتى يتم إنشاء النمط المثالي.

من السهل جدًا تصور mask-size ، خاصة مع قيمة البكسل المحددة هنا.

 [المغلق]

حجم القناع: 200 بكسل؛
حجم قناع الويب: 200 بكسل ؛

[/css] 

هناك عدد قليل من خيارات تكرار القناع إذا كنت تبحث عن تأثير مختلف للنمط:

• repeat-x على طول الإحداثي x.
• Repeat-y يكرر أسفل الإحداثي y.
• يتكرر space وينتشر في المنطقة المتاحة.
• تتكرر round عدة مرات عبر المنطقة المتاحة (سيساعد القياس على ملء المساحة إذا لزم الأمر)

دعم المتصفح

قبل الالتزام بهذه الطريقة الجديدة للتعامل مع الرسومات، من المهم ملاحظة أن دعم المتصفح لا يتوافق مع القص والإخفاء. يتم دعم القص بشكل أكبر من التقنيع، لكن Internet Explorer لا يدعم القص بشكل كامل.

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

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

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

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

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

عندما تريد أن تجعل كل العمل الشاق الذي بذلته على مواقعك يتألق حقًا، تأكد من أنك تختار أفضل استضافة WordPress ممكنة مع WP Engine!