วิธีใช้เทคนิคการตัดและปิดบัง CSS และ SVG

SVG นั้นยอดเยี่ยมสำหรับการทำงานบนเว็บ และการตัดและการปิดบังช่วยให้มีวิธีที่น่าสนใจในการแสดงหรือซ่อนชิ้นส่วนของกราฟิกบนเว็บของคุณ การใช้เทคนิคเหล่านี้ยังช่วยให้มีความยืดหยุ่นมากขึ้นในการออกแบบของคุณ เนื่องจากคุณไม่จำเป็นต้องทำการเปลี่ยนแปลงด้วยตนเองและสร้างภาพใหม่ ทั้งหมดนี้ทำได้ด้วยโค้ด ด้วยการใช้เทคนิคการตัด CSS และการปิดบัง คุณจะมีตัวเลือกมากมายสำหรับกราฟิกเว็บไซต์ของคุณ

เพื่อช่วยอธิบายสิ่งต่างๆ ให้กระจ่าง การมาสก์และการตัดภาพเป็นสองวิธีที่แตกต่างกันในการปรับแต่งรูปภาพด้วย CSS เริ่มต้นด้วยการตัด

พื้นฐานการตัดต่อ

หากคุณเคยใช้ Photoshop มาก่อน คุณอาจคุ้นเคยกับ Clipping Masks อยู่แล้ว เป็นแนวทางที่คล้ายคลึงกัน การตัดเป็นการวางรูปร่างเวกเตอร์ เช่น วงกลมหรือสามเหลี่ยม ไว้บนรูปภาพหรือองค์ประกอบ ส่วนใดๆ ของรูปภาพที่อยู่ด้านหลังรูปร่างจะมองเห็นได้ ในขณะที่ทุกสิ่งที่อยู่นอกขอบเขตของรูปร่างจะถูกซ่อนไว้

ตัวอย่างเช่น หากมาสก์รูปสามเหลี่ยมอยู่เหนือรูปภาพของป่า คุณจะเห็นรูปภาพของป่าภายในรูปร่างสามเหลี่ยม ขอบเขตของรูปร่างเรียกว่าเส้นทางของคลิป เพื่อไม่ให้สับสนกับคุณสมบัติของ clip ที่คิดค่าเสื่อมราคา คุณสร้างเส้นทางของคลิปโดยใช้คุณสมบัติ clip-path

หมายเหตุ: อย่าลองทำสิ่งนี้บนไซต์สดของคุณ

ข้อควรจำ: คุณไม่ควรเปลี่ยนโค้ดโดยตรงบนไซต์ของคุณ เพื่อให้แน่ใจว่าจะไม่มีอะไรเสียหาย แอปพัฒนาในพื้นที่ฟรีของเรา Local จะช่วยคุณตั้งค่าสภาพแวดล้อมการทดสอบซึ่งคุณสามารถปฏิบัติตามบทช่วยสอนนี้ได้อย่างปลอดภัย

คลิปการทำงาน

คลิปมักเป็นเส้นทางเวกเตอร์ อาจทำให้เข้าใจสับสนได้ แต่สิ่งใดก็ตามที่อยู่นอกเส้นทางจะถูกซ่อนไว้ ในขณะที่สิ่งใดก็ตามที่อยู่ภายในเส้นทางจะมองเห็นได้ เพื่อให้ได้ความเข้าใจที่ดีขึ้นและเพื่อทดสอบด้วยตัวเอง ดูตัวอย่างใน CodePen

นี่คือข้อมูลโค้ดของโครงสร้าง 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 id ใน HTML และวิธีที่มันใช้ URL ของ clip-path ในการทำคลิป

เครื่องมือ Clippy

Clippy เป็นเครื่องมือที่ยอดเยี่ยมในการสร้างเส้นทางคลิป CSS มีรูปร่างและขนาดสตาร์ทเตอร์หลากหลายแบบที่ปรับแต่งได้

พื้นฐานการมาส์ก

การมาสก์ทำได้โดยใช้รูปภาพ PNG, การไล่ระดับสี CSS หรือองค์ประกอบ SVG เพื่อซ่อนส่วนหนึ่งของรูปภาพหรือองค์ประกอบอื่นบนหน้า เราจะเน้นที่กราฟิก SVG แต่โปรดทราบว่าสิ่งนี้สามารถทำได้กับประเภทรูปภาพหรือสไตล์อื่นๆ

คุณสมบัติของมาสก์และองค์ประกอบมาสก์

เป็นเพียงการทบทวนเพื่อช่วยให้เห็นภาพ สิ่งสำคัญคือต้องจำไว้ว่าองค์ประกอบที่ปิดบังนั้นเป็นภาพ "ดั้งเดิม" (ก่อนที่จะใช้การมาสก์) คุณอาจไม่ต้องการเห็นทั้งรูปภาพ ดังนั้นการซ่อนบางส่วนจึงทำได้ด้วยคุณสมบัติมา mask CSS มา mask เป็นชวเลข CSS สำหรับกลุ่มของคุณสมบัติแต่ละรายการ ซึ่งเราจะเจาะลึกลงไปในไม่กี่วินาที องค์ประกอบ SVG <mask> ถูกใช้ภายในกราฟิก SVG เพื่อเพิ่มเอฟเฟกต์การมาสก์ ในตัวอย่างนี้ มาสก์เป็นวงกลมและมีการไล่ระดับสีด้วย

การใช้องค์ประกอบมาสก์ SVG บนกราฟิก SVG

เพื่อให้เข้าใจถึง SVG <mask> เราจะปิดบังด้วยกราฟิก SVG

ในแวบแรกอาจซับซ้อนเล็กน้อย แต่ทั้งหมดนี้ทำงานร่วมกันเพื่อปกปิดรูปภาพที่อยู่เบื้องหลัง เรามีภาพจริงเป็นพื้นหลัง ดังนั้น SVG จะเข้ามามีบทบาทอย่างไร? ภาพพื้นหลังนี้ต่างจากตัวอย่างการตัดทอน ภาพพื้นหลังนี้อยู่ในทางเทคนิคขององค์ประกอบ SVG เราจะใช้ CSS เพื่อใช้มาสก์นี้กับรูปภาพ คุณสมบัติจะมาจากองค์ประกอบหน้ากาก SVG และเราจะให้รหัส masked-element ใน CSS ของเรา

หากต้องการดูสิ่งนี้ในการดำเนินการ ให้ดูตัวอย่าง Codepen นี้ นี่คือรหัสการทำงานสำหรับกราฟิก SVG ที่ปิดบัง:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

ด้วย CSS นี้ เรากำลังระบุตำแหน่งที่จะหามาสก์ มันจะมองหา ID ของ #mask-this:

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

สังเกตการไล่ระดับสีในรูปร่างวงกลมหรือไม่? ใช้การไล่ระดับสีและกำหนดรูปร่างวงกลมสำหรับมาสก์

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

การปิดบังข้อความ SVG

การปิดบังข้อความสามารถทำสิ่งที่น่าสนใจได้ เช่น การแสดงรูปภาพผ่านบล็อกข้อความ ข่าวดีก็คือสามารถใช้องค์ประกอบข้อความภายในมาสก์ SVG ได้ เมื่อการรองรับเบราว์เซอร์เพิ่มขึ้นในอนาคต นี่อาจเป็นวิธีที่น่าสนใจมากในการรวมรูปภาพและการออกแบบตัวอักษรเข้าด้วยกัน

นี่คือคำอธิบายพื้นฐานเกี่ยวกับสิ่งที่เกิดขึ้น มีองค์ประกอบข้อความ SVG ภายในมาสก์ SVG เราได้ระบุค่า RGB สำหรับสีขาว ซึ่งจะสร้างพื้นที่วงรีรอบๆ ข้อความที่ปิดบัง สิ่งใดที่อยู่ด้านหลังพื้นที่วงรีจะแสดงผ่านข้อความ ให้ความรู้สึกคัตเอาท์

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

/* 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("#myMask");
}

เพื่อให้เข้าใจอย่างถ่องแท้ ขอแนะนำให้ลองเล่นและทดลองโค้ด ลองเปลี่ยนสี เปลี่ยนข้อความ และปรับขนาดใน 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="Masked image">

จนถึงตอนนี้ มีโค้ด 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-repeat ช่วยให้สามารถทำซ้ำหน้ากากได้ หากคุณเคยทำพื้นหลังแบบเรียงต่อกันมาก่อน สิ่งนี้จะคล้ายกัน

มีสิ่งสำคัญบางอย่างที่ต้องจำไว้ เช่น ขนาดและประเภทของหน้ากากซ้ำที่ต้องประกาศเพื่อสร้างรูปแบบที่สมบูรณ์แบบ

mask-size นั้นง่ายต่อการมองเห็น โดยเฉพาะอย่างยิ่งกับค่าพิกเซลที่ตั้งไว้ที่นี่

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

มีตัวเลือกมาสก์ซ้ำอีกสองสามตัวเลือกหากคุณกำลังมองหาเอฟเฟกต์ที่แตกต่างสำหรับรูปแบบ:

• repeat-x ทำซ้ำตามพิกัด x
• Repeat-y ทำซ้ำตามพิกัด y
• space ซ้ำและกระจายออกในพื้นที่ที่มีอยู่
• วนซ้ำหลาย round ทั่วพื้นที่ที่มีอยู่ (การปรับขนาดจะช่วยเติมเต็มพื้นที่หากจำเป็น)

รองรับเบราว์เซอร์

ก่อนดำเนินการกับวิธีใหม่ในการทำงานกับกราฟิก สิ่งสำคัญที่ควรทราบคือการสนับสนุนเบราว์เซอร์ไม่สอดคล้องกับการตัดและการมาสก์ การคลิปได้รับการสนับสนุนมากกว่าการมาสก์ แต่ Internet Explorer ไม่สนับสนุนการคลิปอย่างสมบูรณ์ การสนับสนุนเบราว์เซอร์ปัจจุบันสำหรับ CSS มาสก์นั้นค่อนข้างจำกัด ดังนั้นจึงแนะนำให้ใช้เป็นส่วนเสริมในองค์ประกอบการตกแต่งบางอย่าง ด้วยวิธีนี้ หากเบราว์เซอร์ของผู้ใช้ไม่รองรับ จะไม่ส่งผลต่อประสบการณ์การรับชมเนื้อหา

เพื่อทดสอบสิ่งต่าง ๆ และดูว่าหน้ากากและคลิปของคุณรองรับหรือไม่ ฉันแนะนำให้สร้าง JSFiddle หรือ Codepen แล้วลองใช้ในเบราว์เซอร์อื่น การสนับสนุนเบราว์เซอร์เพิ่มขึ้นในช่วงไม่กี่ปีที่ผ่านมา และในที่สุดก็จะถึงจุดที่จะได้รับการสนับสนุนอย่างเต็มที่ อย่าปล่อยให้ข้อจำกัดทำให้คุณผิดหวัง เป็นการดีเสมอที่จะนำหน้าเกม และเมื่อการสนับสนุนเป็นกระแสหลักมากขึ้น คุณจะรู้แน่นอนว่าจะปฏิวัติกราฟิกของคุณอย่างไร หากมีข้อสงสัย โปรดอ้างอิง Can I Use ที่เชื่อถือได้

หลังจากทดลองกับตัวอย่างเหล่านี้แล้ว ข้อมูลนี้ควรเป็นข้อมูลเบื้องต้นที่ดีเกี่ยวกับการมาส์กและการตัด แม้ว่าการสนับสนุนเบราว์เซอร์จะถูกจำกัดในขณะนี้ แต่สิ่งนี้จะกลายเป็นแนวทางปฏิบัติหลักในอนาคต เป็นเรื่องสนุกเสมอที่จะคิดว่าเทคนิคเหล่านี้สามารถนำมาใช้เพื่อสร้างภาพที่น่าสนใจได้อย่างไร อนาคตของกราฟิกบนเว็บจะทำให้เราต้องพึ่งพาโปรแกรมแก้ไขภาพน้อยลง และทำให้มีวิธีที่มีประสิทธิภาพมากขึ้นในการสร้างและแก้ไขภาพโดยตรงในเบราว์เซอร์

ถัดไป: ออกแบบเว็บไซต์ให้เร็วยิ่งขึ้น!

คุณเข้าใจถึงความสำคัญของกระบวนการออกแบบเว็บที่มีความคล่องตัว ทุกสิ่งที่คุณทำได้เพื่อออกแบบเว็บไซต์ให้เร็วขึ้นหมายถึงเงินในกระเป๋าของคุณมากขึ้น นั่นคือเหตุผลที่ Flywheel ออกแบบแพลตฟอร์มโฮสติ้งของเราเพื่อช่วยคุณประหยัดเวลาและช่วยให้คุณทำงานได้ดีที่สุด! ด้วยเคล็ดลับและเครื่องมือการออกแบบเว็บเหล่านี้ คุณสามารถทำโครงการให้เสร็จได้มากขึ้น และใช้เวลามากขึ้นในการขยายธุรกิจของคุณ

ในคู่มือนี้ เราจะพูดถึงเคล็ดลับเกี่ยวกับวิธีการทำงานให้เร็วขึ้นและเพิ่มความเร็วเวิร์กโฟลว์ WordPress ของคุณ ตั้งแต่การตั้งค่าไซต์เริ่มต้นไปจนถึงการถ่ายทอดสด ค้นพบวิธีที่คุณสามารถตัดชั่วโมงการทำงานออกจากงานประจำวันของคุณ! ดาวน์โหลดได้แล้ววันนี้

บทความนี้เผยแพร่ครั้งแรกเมื่อวันที่ 3 สิงหาคม 2016 และอัปเดตล่าสุดเมื่อวันที่ 6 พฤศจิกายน 2018