CSS Gradient

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

ในการทำงานกับการไล่ระดับสีใน CSS มีสองคุณสมบัติที่คุณสามารถใช้ได้:การไล่ระดับสีเชิงเส้นและการไล่ระดับแนวรัศมี คุณสมบัติเหล่านี้ช่วยให้คุณสร้างการไล่ระดับสีเชิงเส้นและแนวรัศมีได้ตามลำดับ

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

การไล่ระดับสี CSS

ในการออกแบบ การไล่ระดับสีเป็นการเปลี่ยนสีระหว่างสองสีขึ้นไป การไล่ระดับสีอาจเป็นการเปลี่ยนแบบง่ายๆ แต่ยังสามารถรวมมุม หลายสี และสามารถจัดสไตล์ได้หลากหลายวิธี

CSS รองรับการไล่ระดับสีสองประเภท เหล่านี้คือ:

• การไล่ระดับสีเชิงเส้น
• การไล่ระดับแนวรัศมี

การไล่ระดับสีเชิงเส้นสร้างการเปลี่ยนสีระหว่างสองสีขึ้นไปจากบนลงล่างหรือจากซ้ายไปขวา การไล่ระดับสีแบบเรเดียลคือการเปลี่ยนสีที่แผ่ออกมาจากจุดกำเนิด เช่น รูปร่าง

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

นี่คือไวยากรณ์สำหรับการใช้คุณสมบัติพื้นหลัง:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

background: typeOfBackground;

ตอนนี้เราพร้อมที่จะเริ่มสร้างการไล่ระดับสีใน CSS แล้ว เริ่มต้นด้วยการพูดถึงการไล่ระดับสีเชิงเส้น

CSS การไล่ระดับสีเชิงเส้น

การไล่ระดับสีเชิงเส้นเป็นการเปลี่ยนสีระหว่างสองสีขึ้นไปตามแนวเส้นตรง

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

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

นี่คือไวยากรณ์สำหรับฟังก์ชันการไล่ระดับสีเชิงเส้นใน CSS:

background: linear-gradient (direction, color1, color2 ...);

ในไวยากรณ์นี้ ทิศทางแสดงถึงทิศทางของการไล่ระดับสี และ color1, สี 2 และอื่นๆ แสดงถึงการหยุดสีในการไล่ระดับสีของเรา

มาสำรวจตัวอย่างเล็กน้อยของการไล่ระดับสีเชิงเส้นใน CSS

ไล่ระดับจากบนลงล่าง

สมมติว่าเราต้องการสร้างการไล่ระดับสีที่ปรากฏจากบนลงล่างของกล่อง นี่คือการไล่ระดับสีเริ่มต้นที่สร้างด้วย linear-gradient() คุณสมบัติ.

การไล่ระดับสีของเราควรเริ่มต้นที่สี #00C9FF (สีน้ำเงินอ่อน) และสิ้นสุดที่สี #92FE9D (สีเขียวอ่อน) นี่คือรหัสที่เราสามารถใช้เพื่อสร้างการไล่ระดับสีของเรา:

.gradient {
	background: linear-gradient(#00C9FF, #92FE9D);
}

รหัสของเราส่งคืน:

ไล่สีจากซ้ายไปขวา

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

.gradient {
	background: linear-gradient(to right, #00C9FF, #92FE9D);
}

รหัสของเราส่งคืน:

การไล่ระดับสีระหว่างสองสีของเราจากซ้ายไปขวา การเปลี่ยนแปลงนี้เกิดขึ้นเนื่องจากเราระบุ to left เป็นทิศทางการไล่ระดับของเรา หรือถ้าเราต้องการให้การไล่ระดับสีของเราปรากฏขึ้นจากขวาไปซ้าย เราก็สามารถใช้ to left แทน to right ในรหัสของเรา

การไล่ระดับแนวทแยง

คุณสามารถสร้างการไล่ระดับสีในแนวทแยงโดยใช้ linear-gradient() คุณสมบัติโดยการระบุจุดเริ่มต้นแนวนอนและแนวตั้งสำหรับการไล่ระดับสี

หากคุณต้องการสร้างการไล่ระดับสีที่เปลี่ยนไปทางขวาล่าง คุณสามารถทำได้โดยระบุ to bottom right เป็นการไล่ระดับสีของคุณ หรือถ้าคุณต้องการการไล่ระดับสีที่เปลี่ยนไปทางซ้ายบน คุณสามารถใช้ to top left เป็นการไล่ระดับสีของคุณ

สมมติว่าเราต้องการสร้างการไล่ระดับสีที่เปลี่ยนไปด้านบนขวาของกล่องของเรา เราสามารถทำได้โดยใช้รหัสนี้:

.gradient {
	background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

รหัสของเราส่งคืน:

การไล่ระดับสีของเราเริ่มต้นด้วยสีฟ้าอ่อนที่ด้านซ้ายล่าง จากนั้นเปลี่ยนเป็นสีเขียวที่ด้านขวาบนของกล่อง

หยุดสี

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

สมมติว่าเราต้องการสร้างการไล่ระดับสีที่เปลี่ยนจากสี #00D2FF (ฟ้าอ่อน) เป็น #92FE9D (เขียวอ่อน) เป็น #3A47D5 (สีน้ำเงินเข้ม) การเปลี่ยนแปลงนี้ควรเกิดขึ้นจากซ้ายไปขวา เราสามารถสร้างการไล่ระดับสีนี้โดยใช้รหัสนี้:

.gradient {
background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5);
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ การไล่ระดับสีของเราจะเปลี่ยนระหว่างสามสีที่ต่างกันจากซ้ายไปขวา

มุมต่างๆ

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

ควรระบุมุมเป็นค่าแรกในการไล่ระดับสีเชิงเส้น แทนที่ตำแหน่งที่คุณจะระบุทิศทาง

สมมติว่าคุณต้องการสร้างช่วงเปลี่ยนผ่านระหว่าง #00C9FF และ #92FE9D ที่มุม 120 องศา คุณสามารถทำได้โดยใช้รหัสนี้:

.gradient {
	background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

รหัสของเราส่งคืน:

ในตัวอย่างของเรา เราระบุการไล่ระดับสีที่เปลี่ยนระหว่างสีน้ำเงินและสีเขียวที่มุม 120 องศาจากซ้ายไปขวา ตัวอย่างเช่น หากเราต้องการสร้างการไล่ระดับสีที่เปลี่ยนจากมุม 40 องศา เราสามารถระบุ 40deg เป็นมุมของเรา

การไล่ระดับแบบโปร่งใส

การไล่ระดับสี CSS สามารถทำให้โปร่งใสมากหรือน้อยได้โดยใช้สี RGBA

สี RGBA ใช้วิธี RGB (แดง เขียว น้ำเงิน) ในการนำเสนอสี อย่างไรก็ตาม สี RGBA มีพารามิเตอร์เพิ่มเติมที่เรียกว่าอัลฟ่าซึ่งกำหนดความโปร่งใสของสี ค่าของพารามิเตอร์อัลฟ่าควรอยู่ระหว่าง 0 ถึง 1 (ค่ายิ่งต่ำ สีก็จะยิ่งโปร่งใสมากขึ้น)

สมมติว่าเราต้องการสร้างการไล่ระดับสีจากซ้ายไปขวาระหว่างสี #00C9FF และ #92FE9D สีแรกควรเริ่มโปร่งใส 50% และสีสุดท้ายควรโปร่งใส 30% เราสามารถใช้รหัสต่อไปนี้เพื่อสร้างการไล่ระดับสีนี้:

.gradient {
	background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));
}

รหัสของเราส่งคืน:

หากเราเปรียบเทียบสิ่งนี้กับการไล่ระดับสีครั้งก่อน เราจะเห็นว่าสีของเรามีความโปร่งใสมากขึ้น ในตัวอย่างนี้ เราใช้ค่า RGBA เพื่อระบุสีของเราแทนที่จะใช้ค่าฐานสิบหก

เราระบุ 0.5 เป็นค่าอัลฟาสำหรับสีแรกของเรา (สีน้ำเงิน) ซึ่งทำให้สีโปร่งใส 50% เราระบุ 0.3 เป็นค่าอัลฟาสำหรับสีที่สองของเรา (สีเขียว) ซึ่งทำให้สีมีความโปร่งใส 70% (จำไว้ว่า ยิ่งค่าอัลฟาต่ำเท่าใด สีก็จะยิ่งโปร่งใสมากขึ้นเท่านั้น)

ฮาร์ดไลน์

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

ในการระบุฮาร์ดไลน์ คุณควรใช้ไวยากรณ์ต่อไปนี้:

linear-gradient(direction, hard-line, colors);

ดังนั้น หากคุณต้องการให้มีเส้นทึบที่เกิดขึ้นครึ่งทางของการไล่ระดับสีดำและสีเขียว คุณสามารถใช้ black 50% , green 50% เป็นสายแข็ง หรือถ้าคุณต้องการให้มีเส้นทึบที่ปรากฏ 70% ผ่านการไล่ระดับสีฟ้าและชมพู คุณสามารถใช้ blue 70% , pink 30% เป็นสายแข็ง

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

.gradient {
	background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

รหัสของเราส่งคืน:

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

CSS Radial Gradients

การไล่ระดับสีแบบเรเดียลเป็นการเปลี่ยนสีระหว่างสองสีขึ้นไปที่เปล่งประกายจากจุดกำเนิด จุดกำเนิดของการไล่ระดับสีเชิงเส้นอาจเป็นวงรีหรือวงกลมก็ได้

การไล่ระดับสีแบบรัศมีต้องมีอย่างน้อยสองสต็อปสี และไม่มีการจำกัดจำนวนสต็อปสีในการไล่ระดับสีของคุณ นี่คือไวยากรณ์สำหรับการไล่ระดับสีแบบรัศมี:

background: radial-gradient(shape size position, start color, next colors …, final color);

มาแยกย่อยไวยากรณ์นี้:

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

ตอนนี้เรารู้ไวยากรณ์สำหรับการสร้างการไล่ระดับสีแบบรัศมีใน CSS แล้ว เราสามารถสำรวจตัวอย่างบางส่วนได้

การไล่ระดับสีแบบเรเดียลเริ่มต้น

สมมติว่าเราต้องการสร้างการไล่ระดับสีในแนวรัศมีที่เป็นวงรีและการเปลี่ยนผ่านระหว่าง #4B6CB7 และ #D9E7FF เราสามารถทำได้โดยใช้รหัสนี้:

.gradient {
	background: radial-gradient(#4B6CB7, #D9E7FF);
}

รหัสของเราส่งคืน:

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

จุดสีต่างๆ

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

สมมติว่าเราต้องการสร้างการไล่ระดับสีในแนวรัศมีที่เปลี่ยนจาก #4B6CB7 เป็น #D9E7FF เป็น #9198E5 สีแรกควรคิดเป็น 25% ของการไล่ระดับสี สีกลางควรคิดเป็น 50% ของการไล่ระดับสี และสีสุดท้ายควรคิดเป็น 25% ของการไล่ระดับสี

เราสามารถสร้างการไล่ระดับสีนี้โดยใช้รหัสต่อไปนี้:

.gradient {
	background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

รหัสของเราส่งคืน:

การไล่ระดับสีของเราระหว่างสามสี ณ จุดที่เราระบุไว้ในโค้ดของเรา เพื่อให้บรรลุผลนี้ ก่อนอื่นเราระบุสีที่เราต้องการรวมในการไล่ระดับสี จากนั้นเราระบุการไล่ระดับสีที่สีควรคำนึงถึง ตัวอย่างเช่น สีกลางของเรา #D9E7FF ใช้การไล่ระดับสี 50%

รูปทรงต่างๆ

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

สมมติว่าคุณต้องการสร้างการไล่ระดับสีที่เปลี่ยนระหว่าง #4B6CB7 และ #D9E7FF จุดศูนย์กลางของการไล่ระดับสีในแนวรัศมีของคุณควรเป็นวงกลม คุณสามารถสร้างการไล่ระดับสีนี้โดยใช้รหัสต่อไปนี้:

.gradient {
	background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

รหัสของเราส่งคืน:

ในตัวอย่างของเรา เราได้สร้างการไล่ระดับสีในแนวรัศมีระหว่างสี #4B6CB7 และ #D9E7FF จุดศูนย์กลางของการไล่ระดับสีในแนวรัศมีของเราคือวงกลม แทนที่จะเป็นวงรี

ตำแหน่งการไล่ระดับแนวรัศมี

ตำแหน่งของวัตถุกึ่งกลางของการไล่ระดับสีในแนวรัศมีสามารถเปลี่ยนแปลงได้ มีคำหลักสี่คำที่ใช้ในการกำหนดตำแหน่งของวัตถุศูนย์กลางในการไล่ระดับแนวรัศมี เหล่านี้คือ:

• มุมที่ใกล้ที่สุด
• มุมที่ไกลที่สุด
• ด้านที่ใกล้ที่สุด
• ด้านที่ไกลที่สุด

สมมติว่าเราต้องการสร้างการไล่ระดับสีในแนวรัศมีวงกลมที่ปรากฏที่มุมที่ไกลที่สุดที่ตำแหน่ง 50px 50px เราสามารถทำได้โดยใช้รหัสนี้:

.gradient {
	background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

รหัสของเราส่งคืน:

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

บทสรุป

ใช้การไล่ระดับสีเพื่อสร้างการเปลี่ยนระหว่างสองสีขึ้นไปใน CSS การไล่ระดับสีหลักสองประเภทที่ใช้ใน CSS คือการไล่ระดับสีเชิงเส้นและการไล่ระดับสีในแนวรัศมี

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