Tag Archives: gradient

ตามที่สัญญากันไว้ครับ หลายท่านอาจเคยเห็นบางเว็บไซต์ทำขอบเฉียงๆ กันมาบ้างแล้ว อาจจะใช้คุณสมบัติของ CSS Border ทำให้ขอบบางส่วนใส หรือการดัดด้วย transform: skew, SVG element เป็นต้น แต่ด้วยข้อเสียบางอย่างของวิธีการดังกล่าว เช่น CSS Border จำเป็นต้องรู้ขนาดตายตัวเป็น pixel หรือหน่วยที่สัมพันธ์เหมือนกัน (em, rem, vh, vw เป็นต้น) หรือ transform: skew ก็ต้องดัด element นั้นจริงๆ หากต้องใส่ใน element อื่นต้องคำนวนระยะมุมด้วย เป็นต้น หลังจากที่ค้นหาข้อมูลอยู่นาน ผมก็เจอ Fiddle อันหนึ่งที่ใช้การทำขอบเฉียงด้วย CSS Gradient ซึ่งเป็นอะไรที่ถูกใจแจ้จริงๆ ก็เลยนำมาประยุกต์ใช้ครับ ลองดูตัวอย่างนี้ดูครับ มันทำได้อย่างไรกันนี่!? เทคนิค linear gradient ที่เราจะใช้ก็คือการใส่พื้นหลังแบบไล่สีง่ายๆ นี่แหละครับ ตาม syntax ของ W3C linear-gradient() ซึ่งเป็นมาตรฐานที่สรุปแน่นอนแล้ว จะสามารถใช้คำสั่ง…