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

نشرت: 2018-11-06

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

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

أساسيات القص

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

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

css-svg-clipping-masking-clipping-الرسم

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

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

لقطة في العمل

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

css-svg-clipping-masking-triangle-example

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

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

هذا هو CSS لإجراء القصاصة:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

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

أداة Clippy

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

css-svg-clipping-masking-clippy

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

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

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

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

استخدام عنصر قناع SVG في رسم SVG

للتعرف على SVG <mask> ، سنخفي باستخدام رسم SVG.

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

لرؤية هذا في العمل ، تحقق من عينة Codepen هذه. إليك رمز العمل لرسم SVG المقنع:

&amp;amp;amp;lt;svg class=&amp;quot;masked-element&amp;quot; width=&amp;quot;300&amp;quot; height=&amp;quot;300&amp;quot; viewBox=&amp;quot;0 0 300 300&amp;quot;&amp;amp;amp;gt;
	&amp;amp;amp;lt;image xlink:href=&amp;quot;image link&amp;quot; width=&amp;quot;300px&amp;quot; height=&amp;quot;300px&amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/svg&amp;amp;amp;gt;
css-svg-clipping-masking-masked-التفصيلي
إذا ذهبت إلى المفتش ، يمكنك رؤية حدود العنصر المقنع. يتم إنشاء الشكل الدائري بقناع.

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

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

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

&amp;amp;amp;lt;svg class=&amp;quot;svg-mask&amp;quot;&amp;amp;amp;gt;
 	&amp;amp;amp;lt;defs&amp;amp;amp;gt;
 		&amp;amp;amp;lt;mask id=&amp;quot;mask1&amp;quot; maskUnits=&amp;quot;objectBoundingBox&amp;quot; maskContentUnits=&amp;quot;objectBoundingBox&amp;quot;&amp;amp;amp;gt;
    &amp;amp;amp;lt;linearGradient id=&amp;quot;grad&amp;quot; gradientUnits=&amp;quot;objectBoundingBox&amp;quot; x2=&amp;quot;0&amp;quot; y2=&amp;quot;1&amp;quot;&amp;amp;amp;gt;
      &amp;amp;amp;lt;stop stop-color=&amp;quot;white&amp;quot; offset=&amp;quot;0&amp;quot;/&amp;amp;amp;gt;
      &amp;amp;amp;lt;stop stop-color=&amp;quot;green&amp;quot; stop-opacity=&amp;quot;0&amp;quot; offset=&amp;quot;1&amp;quot;/&amp;amp;amp;gt;
    &amp;amp;amp;lt;/linearGradient&amp;amp;amp;gt;
    &amp;amp;amp;lt;circle cx=&amp;quot;0.50&amp;quot; cy=&amp;quot;0.50&amp;quot; r=&amp;quot;0.50&amp;quot; id=&amp;quot;circle&amp;quot; fill=&amp;quot;url(#grad)&amp;quot;/&amp;amp;amp;gt;
  	&amp;amp;amp;lt;/mask&amp;amp;amp;gt;
 	&amp;amp;amp;lt;/defs&amp;amp;amp;gt;
&amp;amp;amp;lt;/svg&amp;amp;amp;gt;

إخفاء نص SVG

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

css-svg-clipping-masking-text-mask

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

&amp;amp;amp;lt;div class=&amp;quot;text-wrap&amp;quot;&amp;amp;amp;gt;
    &amp;amp;amp;lt;svg class=&amp;quot;text-demo&amp;quot; viewBox=&amp;quot;0 0 600 400&amp;quot; width=&amp;quot;600&amp;quot; height=&amp;quot;400&amp;quot;&amp;amp;amp;gt;
    &amp;amp;amp;lt;defs&amp;amp;amp;gt;
      &amp;amp;amp;lt;mask id=&amp;quot;myMask&amp;quot;&amp;amp;amp;gt;
        &amp;amp;amp;lt;rect width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot; fill=&amp;quot;#fff&amp;quot; /&amp;amp;amp;gt;
        &amp;amp;amp;lt;text x=&amp;quot;50&amp;quot; y=&amp;quot;200&amp;quot; id=&amp;quot;myText&amp;quot;&amp;amp;amp;gt;My Text&amp;amp;amp;lt;/text&amp;amp;amp;gt;
        &amp;amp;amp;lt;text x=&amp;quot;125&amp;quot; y=&amp;quot;293&amp;quot; id=&amp;quot;mySubtext&amp;quot;&amp;amp;amp;gt;SVG&amp;amp;amp;lt;/text&amp;amp;amp;gt;
      &amp;amp;amp;lt;/mask&amp;amp;amp;gt;
    &amp;amp;amp;lt;/defs&amp;amp;amp;gt;
    &amp;amp;amp;lt;ellipse class=&amp;quot;masked&amp;quot; cx=&amp;quot;300&amp;quot; cy=&amp;quot;200&amp;quot; rx=&amp;quot;300&amp;quot; ry=&amp;quot;150&amp;quot; fill=&amp;quot;rgba(255, 255, 255, 0.8)&amp;quot; /&amp;amp;amp;gt;
  &amp;amp;amp;lt;/svg&amp;amp;amp;gt;
  &amp;amp;amp;lt;/div&amp;amp;amp;gt;


/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url(&amp;quot;#myMask&amp;quot;);
}

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

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

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

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

&amp;amp;amp;lt;img class=&amp;quot;mask-img example-mask&amp;quot; src=&amp;quot;https://linktoimage.com/img/image-example.jpg&amp;quot; alt=&amp;quot;Masked image&amp;quot;&amp;amp;amp;gt;

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

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

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

ها هو على Codepen.

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

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

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

.combined-mask {
   mask-image: 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);
}

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

ها هو على Codepen.

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

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

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

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

شاهد هذا على Codepen.

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

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

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

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

mask-size: 200px;
webkit-mask-size: 200px;

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

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

دعم المتصفح

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

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

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

كتاب إلكتروني مجاني: كيفية تصميم المواقع بشكل أسرع باستخدام Flywheel

التالي: تصميم المواقع بشكل أسرع!

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

في هذا الدليل ، سنغطي نصائح حول كيفية العمل بشكل أسرع وتسريع سير عمل WordPress الخاص بك. من الإعداد الأولي للموقع إلى نشره ، اكتشف كيف يمكنك قطع ساعات العمل من عملك اليومي! حمله اليوم.

تم نشر هذه المقالة في الأصل في 3 أغسطس 2016. وتم آخر تحديث لها في 6 نوفمبر 2018.