CSS ที่เจาะลึกลงไปในการไล่ระดับสีแบบเรเดียลและรูปกรวย

การไล่ระดับสี CSS เป็นคุณสมบัติ CSS ที่มีประโยชน์ซึ่งสามารถใช้เพื่อสร้างเอฟเฟกต์ UI ที่น่าสนใจ หรือแม้แต่ช่วยเราในการวาดบางสิ่งโดยไม่จำเป็นต้องสร้างองค์ประกอบ HTML สำหรับมัน การไล่ระดับสีสองแบบที่ฉันอยากจะเน้นในบทความนี้คือ conic-gradient radial-gradient แต่ละแบบทำงานต่างกัน (การไล่ระดับสีแบบรูปกรวยเป็นแบบโค้ง ในขณะที่การไล่ระดับสีแบบรัศมีเป็นเส้นตรง)

ในการปฏิบัติตาม คุณไม่จำเป็นต้องรู้เกี่ยวกับ radial-gradient หรือ conic-gradient ฉันจะพยายามอธิบายให้ดีที่สุด

มาดำน้ำกันเถอะ!

• Radial Gradient คืออะไร?
  • ตัวอย่างพื้นฐานที่สุด
  • Radial Gradient ทำงานอย่างไร?
• Conic Gradient คืออะไร?
• ใช้กรณีสำหรับการไล่ระดับสีเรเดียล
  • radial-gradient ในส่วนฮีโร่
  • เอฟเฟกต์ลายจุด
  • เอฟเฟกต์ภาพ
• ใช้กรณีสำหรับ Conic Gradients
  • แผนภูมิวงกลม
  • พื้นหลังและรูปแบบ
  • รูปแบบ UI
  • การไล่สี Conic แบบเคลื่อนไหวด้วย @property
  • ตัดมุมด้วยรูปทรงที่กำหนดเอง
  • Conic Gradients
  • พื้นหลังมาตรา

Radial Gradient คืออะไร?

จากชื่อ radial-gradient ทำให้เราสามารถวาดองค์ประกอบในแนวรัศมี เช่น วงกลมหรือวงรีได้

ลองดูที่ไวยากรณ์พื้นฐานที่สุด

ตัวอย่างพื้นฐานที่สุด

ในตัวอย่างนี้ เรามีการ radial-gradient มีสต็อปสองสี ส่งผลให้มีการไล่ระดับรูปวงรี

 .element { background: radial-gradient(#9c27b0, #ff9800); }

ด้านบนนี้เป็นการ radial-gradient พื้นฐานที่สุดที่เราสามารถทำได้ใน CSS คุณอาจสงสัยว่าทำไมมันถึงผิดนัดเป็นวงรี? ให้ฉันอธิบาย

หากไม่มีชื่อรูปร่างที่กำหนดไว้ในการไล่ระดับสี (วงกลมหรือวงรี) จะมีค่าเริ่มต้นเป็นวงรีในกรณีต่อไปนี้

• ไม่มีการกำหนดขนาด
• หรือมีสองค่า (สำหรับความกว้างและความสูง)

Radial Gradient ทำงานอย่างไร?

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

ก่อนอื่น กลับมาที่ตัวอย่างเริ่มต้นกันก่อน

 .element { background: radial-gradient(#9c27b0, #ff9800); }

เมื่อมีสองสีโดยไม่ได้ระบุรูปร่าง การไล่ระดับสีจะมีค่าเริ่มต้นเป็นวงรี ดังนี้:

วงรีกำลังเติมความกว้างและความสูงของภาชนะ มันดูเบลอเพราะเบราว์เซอร์สันนิษฐานว่าจุดเริ่มต้นและจุดหยุดคือ 0% และ 100% ตามลำดับ

นี่คือวิธีที่เบราว์เซอร์เห็นการไล่ระดับสี:

 .element { background: radial-gradient(#9c27b0 0%, #ff9800 100%); }

หากเราต่อท้าย circle ก่อนหยุดสีแรก จะมีลักษณะดังนี้:

 .element { background: radial-gradient(circle, #9c27b0, #ff9800); }

ตอนนี้ คุณมีแนวคิดเกี่ยวกับลักษณะของวงกลมและวงรีโดยค่าเริ่มต้นแล้ว มาเริ่มกันที่ Positioning

โดยค่าเริ่มต้น ทั้งคู่จะจัดกึ่งกลางในแนวนอนและแนวตั้งในคอนเทนเนอร์ กล่าวอีกนัยหนึ่งที่ 50% 50% :

สิ่งสำคัญที่ควรสังเกตในที่นี้คือ การวางตำแหน่งเกิดขึ้นจากจุดศูนย์กลางของวงกลมหรือวงรี ดังนั้นเราจึงจัดตำแหน่งวงกลมที่ top left สิ่งที่จะถูกจัดตำแหน่งคือจุดศูนย์กลาง

มาดูตัวอย่างกันให้ละเอียดยิ่งขึ้น

 .element { background: radial-gradient(circle at top left, #9c27b0, #ff9800); }

เรายังตั้งศูนย์ไว้ทางด้านขวาได้ด้วย การเพิ่มไป right จะทำให้วงกลมอยู่ตรงกลาง right 50% :

 .element { background: radial-gradient(circle at right, #9c27b0, #ff9800); }

นี่คือลักษณะ:

Conic Gradient คืออะไร?

ฟังก์ชัน CSS conic-gradient() สร้างการไล่ระดับสีที่หมุนรอบศูนย์กลางขององค์ประกอบ มาดูตัวอย่างพื้นฐานกัน

 .element { background: conic-gradient(#9c27b0, #ff9800); }

ดูว่าการไล่ระดับสีเริ่มจากจุดศูนย์กลางขององค์ประกอบอย่างไร มันหมุนจาก 0deg ถึง 360 โดยค่าเริ่มต้น

มาดูกันว่าจะเกิดอะไรขึ้นเมื่อเราเพิ่มค่าฮาร์ดสต็อปให้กับสีแรก

 .element { background: conic-gradient(#9c27b0 50%, #ff9800); }

ตอนนี้สีแรกจะเติม 50% ขององค์ประกอบ ในขณะที่สีที่สองจะค่อยๆ แสดงจนถึง 100%

จะเกิดอะไรขึ้นถ้าเราใช้ฮาร์ดสต็อปกับสีที่สองด้วย? ในตัวอย่างด้านล่าง สีแรกจะเติม 50% ขององค์ประกอบ สีที่สองจะเริ่มจาก 50% จนถึงจุดสิ้นสุด ( 100% )

 .element { background: conic-gradient(#9c27b0 50%, #ff9800 0); }

การเพิ่มค่าหยุดสีแรกจะสร้างการเติมมุม:

 .element { background: conic-gradient(#9c27b0 65%, #ff9800 0); }

ไม่เพียงแค่นั้น เรายังสามารถสร้างการไล่ระดับสีซ้ำได้โดยใช้ฟังก์ชัน CSS repeating-conic-gradient() ดังที่แสดงด้านล่าง

 .element { background: repeating-conic-gradient( #9c27b0 0 15deg, #ff9800 15deg 30deg ); }

ตัวอย่างข้างต้นเติมสีแรกจาก 0deg ถึง 15deg จากนั้นสีที่สองจะถูกเติมจาก 15deg ถึง 30deg เมื่อทำซ้ำจะมีลักษณะดังรูปด้านล่าง:

ใช้กรณีสำหรับการไล่ระดับสีเรเดียล

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

radial-gradient ในส่วนฮีโร่

การใช้การไล่ระดับสีวงรีที่มีสีเดียวกับพื้นหลังสามารถช่วยทำให้เนื้อหาโดดเด่น ในตัวอย่างต่อไปนี้ สังเกตว่าเนื้อหาซ้อนทับกับพื้นหลังอย่างไร ทำให้การจดจ่อกับการอ่านยากกว่าการดูรูปแบบเล็กน้อย:

การแก้ไขทั่วไปสำหรับสิ่งนั้นคือการเพิ่มวงรีที่มีสีเดียวกับพื้นหลังด้านล่าง (เพื่อให้กลมกลืนกับมัน)

นี่คือส่วนฮีโร่ที่มีวงรี (สีเทา เพื่อการสาธิตเท่านั้น):

นี่คือวิธีสะท้อนสิ่งนั้นใน CSS:

 .hero { background-color: #fbfafa; background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg"); background-position: center; background-size: 70% 70%, cover; background-repeat: no-repeat; }

ด้วยวิธีนี้ เราครอบคลุมรูปแบบภายใต้เนื้อหา ตอนนี้อ่านง่ายขึ้นมาก

เอฟเฟกต์ลายจุด

เพื่อสร้างเอฟเฟกต์ของรูปแบบจุด เราสามารถใช้ radial-gradient นี่คือลักษณะ:

เพื่อให้บรรลุสิ่งนั้น เราสามารถสร้างวงกลมเล็กๆ และการไล่ระดับสีที่เหลือจะโปร่งใส

นี่คือลักษณะที่ปรากฏด้วยตัวเอง:

เมื่อรูปแบบนี้ซ้ำ จะมีลักษณะดังนี้:

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

 .dot-pattern { --color-1: #9c27b0; --color-2: rgba(0,0,0,0); background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0); background-size: 15px 15px; }

เอฟเฟกต์ภาพ

เมื่อรวมกับ mix-blend-mode ไล่ระดับสีในแนวรัศมีสามารถสร้างเอฟเฟกต์ UI ที่น่าสนใจสำหรับรูปภาพได้ ในตัวอย่างต่อไปนี้ สังเกตว่าวงกลมอยู่ในตำแหน่งที่มุมซ้ายบน เราสามารถใช้ประโยชน์จากสิ่งนั้นโดยเล่นกับโหมดผสมผสานเพื่อให้ได้เอฟเฟกต์เฉพาะ

 .thumb:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, #9c27b0, #ff9800); mix-blend-mode: hard-light; opacity: 0.4; }

ใช้กรณีสำหรับ Conic Gradients

แผนภูมิวงกลม

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

 .pie-chart { width: 100px; height: 100px; background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0); border-radius: 50%; }

พื้นหลังและรูปแบบ

มีความเป็นไปได้มากมายที่จะสร้างลวดลายด้วยการไล่ระดับสีแบบกรวย สำหรับตัวอย่างนี้ ฉันจะเน้นที่รูปแบบกระดานหมากรุก

นี่คือสิ่งที่เกิดขึ้นในการไล่ระดับต่อไปนี้:

• #fff สีครอบคลุม 90deg ขององค์ประกอบ
• จากนั้นตามด้วย #000 ถึง 180deg ;
• จากนั้นตามด้วย #fff ถึง 270deg ;
• ในที่สุด #000 ก็เต็มจนถึงมุมสิ้นสุด ( 360deg )

 .checkerboard { --size: 25px; width: 200px; height: 100px; background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0); background-size: var(--size) var(--size); }

เมื่อทำซ้ำและควบคุมผ่าน background-size จะมีลักษณะดังนี้:

ไม่เพียงเท่านั้น แต่เราสามารถบรรลุผลที่น่าสนใจจริงๆ ได้ด้วยการหมุนค่าบางค่าในลักษณะที่ต่างออกไป นี่คือตัวอย่าง:

 .element { background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0); }

รูปแบบ UI

บางครั้ง เราอาจต้องสร้างรูปแบบ UI แบบสุ่มที่มีรูปทรงต่างกัน เราสามารถใช้ conic-gradient เพื่อให้ได้สิ่งนั้น แนวคิดคือเราควบคุมขนาดการไล่ระดับสีผ่าน background-size จากนั้นเปลี่ยนมุม conic-gradient เพื่อให้ได้เอฟเฟกต์ที่แตกต่างกัน

เรามีองค์ประกอบที่มีความกว้างและความสูง 200px ภายในองค์ประกอบนี้ เราจะทำซ้ำพื้นหลัง

 .element { --size: 20px; width: 200px; height: 200px; background-size: var(--size) var(--size); }

เพื่อให้จินตนาการดีขึ้น แต่ละพื้นหลังจะมีขนาด 20px สำหรับทั้งความกว้างและความสูง และจะทำซ้ำในแนวนอนและแนวตั้ง

ตอนนี้ แต่ละตารางที่คุณเห็นจะมี conic-gradient สำหรับตอนนี้ ฉันจะเพิ่มเฉดสีฟ้าสองเฉดเพื่อแสดงแนวคิดนี้ให้ดีขึ้น

 .element { --size: 20px; width: 200px; height: 200px; background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0); background-size: var(--size) var(--size); }

นี่คือลักษณะการไล่ระดับสีแบบกรวยโดยไม่ต้องทำซ้ำ:

ซ้ำก็จะได้ประมาณนี้ ประเด็นคือต้องทำให้สีที่สองโปร่งใส ซึ่งจะส่งผลให้ได้รูปสามเหลี่ยม

ด้วยมุมที่แตกต่าง เราสามารถสุ่มรูปร่างของลวดลายเพื่อให้ได้เอฟเฟกต์ที่น่าสนใจ

การไล่สี Conic แบบเคลื่อนไหวด้วย @property

เราสามารถสร้างเอฟเฟกต์แอนิเมชั่นที่น่าสนใจด้วย conic-gradient อย่างไรก็ตาม ไม่สามารถทำได้โดยค่าเริ่มต้น เราจำเป็นต้องใช้คำจำกัดความ @property เพื่อกำหนดคุณสมบัติที่กำหนดเองที่เราจะใช้สำหรับแอนิเมชั่น

 @property --conic-mask { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .conic-mask { --conic-mask: 0%; -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000); transition: --conic-mask 1s ease-out; } .conic-mask: hover { --conic-mask: 100%; }

ตัดมุมด้วยรูปทรงที่กำหนดเอง

นี่คือตัวอย่างโดย Temani Afif แนวคิดคือการใช้ conic-gradient เป็นหน้ากากเพื่อสร้างเอฟเฟกต์แบบตัดมุม:

Conic Gradients

เราสามารถใช้ conic-gradient เพื่อสร้างเอฟเฟกต์การไล่ระดับสีแบบละเอียดที่มีมุมที่เข้มกว่าหรือมุมที่สว่างกว่าด้วยสีอื่นๆ Conic.css เป็นไลบรารี CSS ขนาดเล็กโดย Adam Argyle ที่มีการไล่ระดับสีรูปกรวยที่สวยงามมากมาย

การใช้ Conic Gradients สำหรับพื้นหลังของส่วน

ฉันเห็นสิ่งนี้ในการสาธิตที่แบ่งปันโดย Scott Kellum ฉันชอบวิธีการทำงานของเทคนิคนี้ในการเพิ่มสีบางส่วนให้กับส่วนท้าย ในขณะเดียวกันก็ดูเรียบเนียน

 .footer { background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%); }

• ดูเดโม →

บทสรุป

ดังที่คุณเห็นแล้ว การใช้ฟังก์ชัน CSS radial-gradient และ conic-gradient อาจทำให้ UI น่าสนใจ (และมีประโยชน์) อย่างไรก็ตาม ไม่มีขาวดำเมื่อต้องใช้แต่ละอย่าง ส่วนใหญ่ขึ้นอยู่กับกรณีการใช้งานในมือ

ฉันหวังว่าคุณจะพบว่าบทความมีประโยชน์ ขอบคุณมากสำหรับการอ่าน!

อ่านเพิ่มเติมเกี่ยวกับ Smashing Magazine

• เจาะลึกเข้าไปใน object-fit และ background-size ใน CSS
• ปัญหา CSS ทั่วไปสำหรับโครงการส่วนหน้า
• การใช้สี HSL ใน CSS
• ปัญหาล้นใน CSS