How to เปลี่ยนพื้นหลังเรียบๆ เป็นพื้นหลังแบบว้าวๆ ด้วย CSS Gradients

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

CSS Linear Gradients

linear-gradient() คือ ค่าproperty ของ background-image การที่จะสร้าง linear gradient ได้ เราต้องกำหนดสีขึ้นมาอย่างน้อยสองสีและเราสามารถกำหนดจุดเริ่มต้น ทิศทางหรือมุมของตัว gradient ได้อีกด้วย หากเขียนโดยไม่ได้กำหนดใดๆ จะใช้ทิศทางบนลงล่างเป็นทิศทางโดยเริ่มต้น โดยใช้ syntax ดังนี้

Syntax แบบใช้ทิศทางในการกำหนด (แบบแนวทแยงมุมก็ได้)

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

Syntax แบบใช้มุมในการกำหนด

background-image: linear-gradient(angle, color-stop1, color-stop2);

CSS Radial Gradients

Radial Gradient ถูกกำหนดโดยใช้จุดศูนย์กลางของตัวเอง และต้องกำหนดสีขึ้นมาอย่างน้อยสองสี หากเขียนโดยไม่ได้กำหนดใดๆ จะใช้รูปร่างเป็นวงรี กำหนดขนาดโดยจะใช้ระยะที่ไกลที่สุดและกำหนดตำแหน่งโดยจะใช้ตำแหน่งตรงกลาง (อาจจะงงๆแต่พอดูตัวอย่างจะเข้าใจ) โดยใช้ syntax ดังนี้

background-image: radial-gradient(shape size at position, start-color, …, last-color);

ด้านบนก็เป็นตัวอย่างการใช้งาน gradient ในแบบต่างๆ เมื่อใช้เทคนิคนี้แค่นี้เราก็สามารถเปลี่ยนพื้นหลังเรียบๆเป็นพื้นหลังแบบว้าวๆได้แล้ว แล้วพบกันใหม่ในบทความต่อไปจ้า :)

อ้างอิงและอ่านเพิ่มเติม

https://css-tricks.com/css3-gradients/?fbclid=IwAR2EDmwn0vB4Bn7UsAY-lfU5iYgZvpS4v7C_qt0o3c92Sw-B1TpDZKrTGVw

https://www.w3schools.com/css/css3_gradients.asp?fbclid=IwAR2E-8qBtqPJkELeinR4OvQx8XbBz-cfD2nfBBe0XvRR3163yl_yR5J90uY