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

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

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

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

ฟังก์ชันวงกลม()

สัญลักษณ์แบบเต็มสำหรับค่ารูปร่างวงกลมคือ 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

มีตัวเลือกกล่องอ้างอิงอยู่ 2-3 ตัวเลือกให้เลือก ได้แก่ "margin-box", "border-box", "padding-box" และ "content-box" ชื่อของทั้งสองช่องจะสื่อถึงขอบเขตของขอบเขตเหล่านั้น ก่อนหน้านี้เราได้อธิบายเกี่ยวกับ "มาร์จิน-กล่อง" "กล่องเส้นขอบ" ถูกจำกัดโดยขอบด้านนอกของเส้นขอบขององค์ประกอบ ส่วน "กล่องระยะห่างจากขอบ" จะถูกจำกัดโดยระยะห่างจากขอบขององค์ประกอบ ขณะที่ "กล่องเนื้อหา" จะเหมือนกับพื้นที่จริงที่เนื้อหาใช้ภายในองค์ประกอบหนึ่ง

ใช้ช่องอ้างอิงสำหรับการประกาศ shape-outside ได้ครั้งละ 1 ช่องเท่านั้น ช่องอ้างอิงแต่ละช่องจะมีอิทธิพลต่อรูปร่างต่างๆ และบางครั้งก็มีลักษณะที่บอบบาง มีบทความอื่นที่เจาะลึกมากขึ้นและช่วยคุณเข้าใจกล่องอ้างอิงสำหรับรูปร่าง CSS

ฟังก์ชันวงรี()

วงรีมีลักษณะเหมือนวงกลมแบบย่อ มีการกำหนดเป็น ellipse(rx ry at cx cy) โดยที่ rx และ ry คือรัศมีสำหรับวงรีในแกน X และแกน Y ส่วน cx และ cy เป็นพิกัดสำหรับจุดศูนย์กลางของวงรี

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

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

อาจกำหนดรัศมีบนแกน X และ Y ได้ด้วยคีย์เวิร์ด เช่น farthest-side จะให้รัศมีเท่ากับระยะทางระหว่างจุดศูนย์กลางวงรีและด้านข้างของกล่องอ้างอิงที่ไกลที่สุด ขณะที่ closest-side หมายถึงสิ่งที่ตรงกันข้าม โดยใช้ระยะทางที่สั้นที่สุดระหว่างจุดศูนย์กลางและด้าน

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

วิธีนี้อาจมีประโยชน์เมื่อขนาดขององค์ประกอบ (หรือกล่องอ้างอิง) อาจเปลี่ยนแปลงในลักษณะที่คาดเดาไม่ได้ แต่คุณก็ต้องการให้รูปร่างวงรีปรับเปลี่ยนได้

นอกจากนี้ยังสามารถใช้คีย์เวิร์ด farthest-side และ closest-side เดียวกันสำหรับรัศมีในฟังก์ชันรูปร่าง circle() ได้อีกด้วย

ฟังก์ชันรูปหลายเหลี่ยม()

หากวงกลมและจุดไข่ปลามีขีดจำกัดมากเกินไป ฟังก์ชันรูปร่างรูปหลายเหลี่ยมจะเปิดโลกแห่งตัวเลือก รูปแบบคือ polygon(x1 y1, x2 y2, ...) ซึ่งคุณระบุคู่ของพิกัด x y สำหรับจุดยอดแต่ละจุด (จุด) ของรูปหลายเหลี่ยม จำนวนคู่ขั้นต่ำในการระบุรูปหลายเหลี่ยมคือ 3 รูป คือสามเหลี่ยม

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

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

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

มีพารามิเตอร์ fill-rule (ไม่บังคับ) นำเข้าจาก SVG ซึ่งจะบอกวิธีพิจารณา "ภายใน" ของรูปหลายเหลี่ยมในกรณีที่เป็นเส้นทางที่ตัดกันเองหรือรูปร่างที่ล้อมรอบ Joni Trithall อธิบายวิธีการทำงานของพร็อพเพอร์ตี้กฎการเติมสีใน SVG ได้เป็นอย่างดี หากไม่ได้กำหนดไว้ fill-rule จะมีค่าเริ่มต้นเป็น nonzero

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

ฟังก์ชัน inset()

ฟังก์ชันรูปร่าง inset() ช่วยให้คุณสร้างรูปร่างสี่เหลี่ยมผืนผ้าเพื่อตัดเนื้อหาได้ สิ่งนี้อาจฟังดูขัดกับเหตุผลเบื้องต้นที่ว่า CSS สร้างเนื้อหาเว็บที่ไม่มีค่าใช้จ่ายจากช่องที่เรียบง่าย ก็อาจจะน่าสนใจด้วย ฉันยังไม่พบ Use Case สำหรับ inset() ซึ่งยังใช้กับ Float และ ระยะขอบ หรือ polygon() ไม่ได้ แม้ว่า inset() จะให้นิพจน์ที่อ่านได้สำหรับรูปทรงสี่เหลี่ยมผืนผ้ามากกว่า polygon()

สัญกรณ์แบบเต็มสำหรับฟังก์ชันรูปร่างส่วนแทรกคือ inset(top right bottom left border-radius) อาร์กิวเมนต์ 4 ตำแหน่งแรกเป็นออฟเซ็ตจากขอบขององค์ประกอบ อาร์กิวเมนต์สุดท้ายคือรัศมีเส้นขอบสำหรับรูปร่างสี่เหลี่ยมผืนผ้า คุณไม่จำเป็นต้องกรอกข้อมูลนี้ก็ได้ ดังนั้นคุณสามารถยกเว้นได้ ซึ่งเป็นไปตามสัญลักษณ์ชวเลข border-radius ที่คุณใช้ใน CSS อยู่แล้ว

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

การสร้างรูปร่างจากกล่องอ้างอิง

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

หากใช้วงกลมเพื่อปัดเศษมุมขององค์ประกอบที่ลอยอยู่ คุณจะได้รับเอฟเฟกต์ตัดออก แต่พื้นที่แบบลอยจะยังคงเป็นรูปสี่เหลี่ยมผืนผ้า เพิ่ม shape-outside: border-box เพื่อล้อมรอบรูปร่างที่สร้างโดย border-radius

.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

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

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

วิธีการรับเอฟเฟ็กต์การดึงข้อความออฟเซ็ตเดียวกันที่มีความยืดหยุ่นมากขึ้นมีดังนี้

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

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

ขอบรูปร่าง

คุณจะสังเกตเห็นว่าการรวมเนื้อหาไว้รอบรูปร่างอาจทำให้เนื้อหาถูกับองค์ประกอบมากเกินไป คุณเพิ่มระยะห่างรอบๆ รูปร่างได้ด้วยคุณสมบัติ shape-margin

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

เอฟเฟกต์คล้ายกับที่คุณคุ้นเคยจากการใช้พร็อพเพอร์ตี้ margin ปกติ แต่ shape-margin จะส่งผลต่อพื้นที่รอบๆ ค่า shape-outside เท่านั้น ซึ่งจะเป็นการเพิ่มระยะห่างรอบๆ รูปร่างก็ต่อเมื่อระบบมีที่ว่างสำหรับรูปร่างนั้นๆ ดังนั้นในตัวอย่างข้างต้น รัศมีของวงกลมจึงตั้งค่าเป็น 40% ไม่ใช่ 50% หากตั้งค่ารัศมีเป็น 50% วงกลมดังกล่าวจะใช้พื้นที่ทั้งหมดในระบบพิกัดไป ทำให้ไม่มีเนื้อที่ว่างสำหรับผลของ shape-margin อย่าลืมว่าท้ายที่สุดแล้ว รูปร่างจะถูกจํากัดไว้ที่ margin-box ขององค์ประกอบ (องค์ประกอบบวกกับ margin อยู่รอบๆ) หากรูปร่างใหญ่ขึ้นและเกินเข้ามา ระบบจะตัดรูปร่างไปเป็น margin-box และคุณจะได้รูปร่างสี่เหลี่ยมผืนผ้า

โปรดทราบว่า shape-margin ยอมรับค่าบวกเพียงค่าเดียว โดยไม่มีเครื่องหมายระบุยาว แล้วรูปร่างขอบด้านบนสำหรับวงกลมคืออะไร

การทำให้รูปร่างเคลื่อนไหว

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

คุณทำให้รัศมีและศูนย์กลางของรูปร่าง circle() และ ellipse() เคลื่อนไหวได้ ตราบใดที่กำหนดไว้ในค่าที่เบราว์เซอร์ประมาณค่าได้ เป็นไปได้ที่จะเปลี่ยนจาก circle(30%) ไป circle(50%) อย่างไรก็ตาม ภาพเคลื่อนไหวระหว่าง circle(closest-side) ถึง circle(farthest-side) จะทำให้เบราว์เซอร์ขาดตอน

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

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

ผลกระทบที่น่าสนใจมากขึ้นสามารถเกิดขึ้นได้เมื่อทำให้รูปร่าง polygon() เคลื่อนไหว โปรดทราบว่ารูปหลายเหลี่ยมต้องมีจุดยอดมุมระหว่าง 2 สถานะนี้เท่าๆ กัน เบราว์เซอร์จะไม่สามารถประมาณค่าหากคุณเพิ่มหรือนำจุดยอดออก

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

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

การรวมเนื้อหาภายในรูปร่าง

ฉบับร่างเริ่มต้นของข้อกำหนดรูปร่าง CSS มีพร็อพเพอร์ตี้ shape-inside ที่ช่วยให้คุณตัดเนื้อหาไว้ในรูปร่างได้ และยังมีการติดตั้งใช้งานใน Chrome และ Webkit มาระยะหนึ่งแล้วอีกด้วย แต่การรวมเนื้อหาที่จัดวางตำแหน่งเองภายในเส้นทางที่กำหนดเองต้องอาศัยความพยายามและการวิจัยมากขึ้นเพื่อให้ครอบคลุมสถานการณ์ที่เป็นไปได้ทั้งหมดและหลีกเลี่ยงข้อบกพร่อง ด้วยเหตุนี้ พร็อพเพอร์ตี้ shape-inside จึงถูกเลื่อนเวลาเป็นรูปร่าง CSS ระดับ 2 และการใช้งานสำหรับพร็อพเพอร์ตี้ดังกล่าวถูกเพิกถอนไป

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

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

ตำแหน่งขององค์ประกอบ Stut .left-shape และ .right-shape ที่ด้านบนของคอนเทนเนอร์มีความสำคัญ เนื่องจากองค์ประกอบดังกล่าวจะลอยไปทางด้านซ้ายและขวาเพื่อขนาบเนื้อหา

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}

การจัดรูปแบบนี้ทำให้สตรัทที่ลอยอยู่ทั้ง 2 ชิ้นใช้พื้นที่ทั้งหมดภายในองค์ประกอบนั้น แต่พร็อพเพอร์ตี้ shape-outside จะช่วยตัดพื้นที่สำหรับเนื้อหาที่เหลือ

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

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

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

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

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

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

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

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

Lea Verou ได้เขียนเพิ่มเติมเกี่ยวกับวิธีใช้กฎ @supports ของ CSS

คำอธิบายจากการยกเว้น CSS

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

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

เครื่องมือสำหรับการทำงานกับรูปร่าง CSS

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

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

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

Google Chrome: ส่วนขยายเครื่องมือแก้ไขรูปร่าง CSS สำหรับ Google Chrome ขยายเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ด้วยการควบคุมเพื่อสร้างและแก้ไขรูปร่าง ซึ่งจะวางตัวแก้ไขแบบอินเทอร์แอกทีฟไว้ที่ด้านบนขององค์ประกอบที่เลือก

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

รูปทรงจากรูปภาพ: หากคุณต้องการสร้างรูปภาพและให้เบราว์เซอร์แยกรูปร่างจากรูปร่างเหล่านั้น Rebecca Hauck ได้เขียนบทแนะนำสำหรับ Photoshop ไว้เป็นอย่างดี

Polyfill: Google Chrome เป็นเบราว์เซอร์หลักแรกที่ให้บริการรูปร่าง CSS ฟีเจอร์นี้จะมีการรองรับใน iOS 8 และ Safari 8 ของ Apple ในเร็วๆ นี้ ผู้ให้บริการเบราว์เซอร์รายอื่นๆ อาจพิจารณาใช้ในอนาคต ในระหว่างนี้ เรามี polyfill รูปร่าง CSS ที่ให้การสนับสนุนเบื้องต้นอยู่

บทสรุป

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

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

ขอขอบคุณ Pearl Chen, Alan Stearns และ Zoltan Horvath มากที่อ่านบทความนี้และให้ข้อมูลเชิงลึกที่มีคุณค่า