Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

เริ่มต้นใช้งาน CSS Shapes

การตัดข้อความรอบเส้นทางที่กำหนดเอง

Razvan Caliman

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

คุณสามารถกำหนดรูปร่างด้วยตนเองหรืออนุมานจากรูปภาพก็ได้

มาดูตัวอย่างง่ายๆ กัน

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

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

การประกาศ CSS shape-outside: url(image.png) จะบอกให้เบราว์เซอร์ดึงรูปร่างออกจากรูปภาพ

พร็อพเพอร์ตี้ shape-image-threshold กำหนดระดับความทึบแสงขั้นต่ำของพิกเซลที่จะใช้สร้างรูปร่าง ค่าต้องอยู่ในช่วงระหว่าง 0.0 (โปร่งใสสุด) ถึง 1.0 (ทึบแสงสุด) ดังนั้น shape-image-threshold: 0.5 หมายความว่าระบบจะใช้เฉพาะพิกเซลที่มีความทึบแสง 50% ขึ้นไปเพื่อสร้างรูปร่าง

พร็อพเพอร์ตี้ float เป็นกุญแจสำคัญในที่นี้ แม้ว่าพร็อพเพอร์ตี้ shape-outside จะกำหนดรูปร่างของพื้นที่ที่เนื้อหาจะตัดขึ้นบรรทัดใหม่ แต่หากไม่มีการลอย คุณจะไม่เห็นผลลัพธ์ของรูปร่าง

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

ในอนาคต คุณจะใช้ shape-outside กับองค์ประกอบที่ไม่ลอยได้ด้วยการเปิดตัว CSS Exclusions

การสร้างรูปร่างด้วยตนเอง

นอกจากการดึงรูปร่างจากรูปภาพแล้ว คุณยังเขียนโค้ดรูปร่างด้วยตนเองได้ด้วย คุณเลือกค่าฟังก์ชันได้ 2-3 ค่าเพื่อสร้างรูปร่าง ได้แก่ circle(), ellipse(), inset() และ polygon() ฟังก์ชันรูปร่างแต่ละฟังก์ชันจะยอมรับชุดพิกัดและจับคู่กับกล่องอ้างอิงซึ่งสร้างระบบพิกัด เราจะพูดถึงช่องอ้างอิงเพิ่มเติมในอีกสักครู่

ฟังก์ชัน circle()

สัญกรณ์แบบเต็มสำหรับค่ารูปร่างวงกลมคือ circle(r at cx cy) โดยที่ r คือรัศมีของวงกลม ส่วน cx และ cy คือพิกัดของจุดศูนย์กลางวงกลมบนแกน X และแกน Y พิกัดของจุดศูนย์กลางวงกลมจะมีหรือไม่ก็ได้ หากคุณไม่ระบุ ระบบจะใช้จุดกึ่งกลางขององค์ประกอบ (จุดตัดของเส้นทแยงมุม) เป็นค่าเริ่มต้น

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

ในตัวอย่างด้านบน เนื้อหาจะตัดขึ้นบรรทัดใหม่รอบๆ ด้านนอกของเส้นทางวงกลม อาร์กิวเมนต์เดียว 50% จะระบุรัศมีของวงกลม ซึ่งในกรณีนี้จะเท่ากับครึ่งหนึ่งของความกว้างหรือความสูงขององค์ประกอบ การเปลี่ยนขนาดขององค์ประกอบจะส่งผลต่อรัศมีของรูปทรงวงกลม นี่เป็นตัวอย่างพื้นฐานของวิธีที่รูปร่าง CSS สามารถปรับเปลี่ยนตามอุปกรณ์ได้

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

ภาพประกอบในเอกสารนี้ใช้การคลิปเพื่อไฮไลต์รูปร่างและช่วยให้คุณเข้าใจผลลัพธ์

กลับไปที่รูปทรงวงกลม

เมื่อใช้เปอร์เซ็นต์สำหรับรัศมีวงกลม ระบบจะคำนวณค่าด้วยสูตรที่ซับซ้อนกว่าเล็กน้อย: sqrt(width^2 + height^2) / sqrt(2) การทำความเข้าใจเรื่องนี้จะเป็นประโยชน์เพราะจะช่วยให้คุณจินตนาการได้ว่ารูปร่างวงกลมที่ได้จะเป็นอย่างไรหากขนาดขององค์ประกอบไม่เท่ากัน

คุณสามารถใช้หน่วย CSS ทุกประเภทในพิกัดฟังก์ชันรูปร่างได้ เช่น px, em, rem, vw, vh และอื่นๆ คุณสามารถเลือกรูปแบบที่มีความยืดหยุ่นหรือเข้มงวดเพียงพอสำหรับความต้องการของคุณ

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

.element{
  shape-outside: circle(50% at 0 0);
}

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

กล่องอ้างอิงสำหรับรูปร่าง CSS

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

โปรดทราบว่า shape-outside จะเปลี่ยนรูปร่างของพื้นที่ลอยซึ่งเนื้อหาจะตัดขึ้นบรรทัดใหม่ พื้นที่ลอยจะขยายไปยังขอบด้านนอกของกล่องที่กำหนดโดยพร็อพเพอร์ตี้ margin ซึ่งเรียกว่า margin-box และเป็นกล่องอ้างอิงเริ่มต้นสำหรับรูปร่างหากไม่มีการระบุไว้อย่างชัดเจน

การประกาศ CSS 2 รายการต่อไปนี้ให้ผลลัพธ์เหมือนกัน

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

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

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

ตอนนี้จุดเริ่มต้นของระบบพิกัดอยู่นอกพื้นที่เนื้อหาขององค์ประกอบ (ขึ้นไป 100 พิกเซลและไปทางซ้าย 100 พิกเซล) เช่นเดียวกับจุดศูนย์กลางของวงกลม ค่าที่คำนวณได้ของรัศมีวงกลมจะเพิ่มขึ้นด้วยเพื่อพิจารณาพื้นผิวที่เพิ่มขึ้นของระบบพิกัดที่สร้างขึ้นโดยกล่องอ้างอิง margin-box