หน้านี้ได้รับการแปลโดย Cloud Translation API

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

การรวมเนื้อหารอบเส้นทางที่กำหนดเอง

Razvan Caliman

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

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

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

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

<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 คุณจะไม่เห็นผลของรูปร่าง

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

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

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

นอกจากการดึงรูปร่างจากรูปภาพแล้ว คุณยังเขียนโค้ดรูปร่างด้วยตนเองได้ด้วย คุณเลือกจากค่าฟังก์ชันต่อไปนี้เพื่อสร้างรูปร่างได้ 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กล่องอ้างอิง