Home-theater-designers
หากคุณใช้อินเทอร์เน็ตนานกว่าสองสามนาที มีโอกาสที่คุณจะเจอ CSS gradient คุณสมบัติพื้นหลัง CSS สามารถใช้เพื่อสร้างช่วงของสไตล์ที่แตกต่างกัน และประเภทที่น่าสนใจที่สุดประเภทหนึ่งคือสิ่งที่สามารถทำได้ด้วยค่าการไล่ระดับสี
การรู้วิธีออกแบบและสร้างการไล่ระดับสี CSS ที่แตกต่างกันถือเป็นทรัพยากรสำหรับนักออกแบบซอฟต์แวร์หรือนักพัฒนาซอฟต์แวร์ จากบทความนี้ คุณจะได้เรียนรู้ทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อเริ่มผสมผสานการไล่ระดับสี CSS ในโครงการของคุณ
การไล่ระดับสี CSS คืออะไร?
การไล่ระดับสี CSS คือการรวมกันของสองสีขึ้นไปที่เปลี่ยนจากสีหนึ่งไปเป็นสีถัดไปอย่างราบรื่น สถานะการเปลี่ยนผ่านของการไล่ระดับสี CSS ขึ้นอยู่กับประเภทของการไล่ระดับสีที่ใช้ การไล่ระดับสีที่ใช้กันทั่วไปในการออกแบบซอฟต์แวร์มีสองประเภทหลัก: เชิงเส้นและแนวรัศมี
อย่างไรก็ตาม มีการไล่ระดับสีประเภทที่สามที่ไม่ค่อยได้รับความนิยมและรู้จักกันในชื่อการไล่ระดับสีแบบกรวย
ไวยากรณ์การไล่ระดับสี CSS
Background-image: gradient-type (direction, color1, color2);
ควรกำหนดการไล่ระดับสี CSS ให้กับคุณสมบัติ CSS ของรูปภาพพื้นหลัง ประเภทการไล่ระดับสีสามารถเป็นหนึ่งในหลาย ๆ แบบ การไล่ระดับเชิงเส้น การไล่ระดับแนวรัศมี หรือแบบการไล่ระดับสีแบบกรวย ประเภทการไล่ระดับสีตามด้วยวงเล็บเปิดและปิดที่มีทิศทางการเปลี่ยนผ่านของการไล่ระดับสี เช่นเดียวกับสีที่จะรวมอยู่ในการไล่ระดับสี
ที่เกี่ยวข้อง: วิธีการตั้งค่าภาพพื้นหลังใน CSS
ตัวอย่างด้านบนแสดงสองสี แต่การไล่ระดับสีสามารถมีได้หลายสี ข้อกำหนดเพียงอย่างเดียวคือแต่ละสีในรายการคั่นด้วยเครื่องหมายจุลภาค
การไล่ระดับสีเชิงเส้นคืออะไร?
การไล่ระดับสีเชิงเส้นเป็นการไล่ระดับสี CSS ที่ได้รับความนิยมมากที่สุด สร้างการไล่ระดับสีในแนวนอน แนวตั้ง หรือแนวทแยงโดยใช้สีตั้งแต่สองสีขึ้นไป
ตัวอย่างการไล่ระดับสีเชิงเส้น CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
รหัสด้านบนจะสร้างการไล่ระดับสี CSS ต่อไปนี้:
มีองค์ประกอบหลักอย่างหนึ่งของไวยากรณ์การไล่ระดับสีที่ละเว้นจากตัวอย่างด้านบน องค์ประกอบนี้เป็นทิศทางการเปลี่ยนผ่านของการไล่ระดับสี และถูกละไว้เนื่องจากการจัดตำแหน่งเริ่มต้นของการไล่ระดับสีเชิงเส้นเป็นแนวตั้ง (บนลงล่าง) นั่นคือผลลัพธ์ที่ต้องการในตัวอย่างนี้
รหัสด้านบนให้ผลลัพธ์เหมือนกับบรรทัดของรหัสต่อไปนี้ ข้อแตกต่างระหว่างทั้งสองคือส่วนทิศทางของรหัส
การใช้ตัวอย่างการไล่ระดับเชิงเส้นด้านล่าง
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
ดังที่คุณเห็นจากผลลัพธ์ โค้ดด้านบนสร้างการไล่ระดับสีที่เริ่มต้นด้วยสีน้ำเงินที่ด้านบน จากนั้นค่อยๆ เปลี่ยนเป็นสีส้มที่ด้านล่าง หากคุณต้องการเปลี่ยนลำดับของสี คุณก็สามารถเปลี่ยน ไปด้านล่าง กับ ด้านบน และสิ่งนี้จะกลับทิศทางของการไล่ระดับสีโดยให้ผลลัพธ์ดังต่อไปนี้:
คล้ายกับการจัดแนวแนวตั้ง การจัดแนวแนวนอนของการไล่ระดับสีสามารถทำได้โดยใช้คีย์เวิร์ดทิศทางสองชุด: ทางซ้าย และ ไปทางขวา ซึ่งจะให้ผลลัพธ์ตามลําดับ
วิธีทำ snapchat streak
การไล่ระดับเชิงเส้นในแนวทแยง
เป็นไปได้ที่จะบรรลุการเปลี่ยนการไล่ระดับสีเชิงเส้นในแนวทแยงในทิศทางใดก็ได้ของการไล่ระดับสีเชิงเส้น มีรายการคำหลักเฉพาะสี่รายการที่คุณต้องรู้เพื่อให้เป็นไปได้
- ล่างขวา
- ไปทางซ้ายล่าง
- ด้านบนขวา
- ซ้ายบน
การใช้ตัวอย่างการไล่ระดับเชิงเส้นในแนวทแยง
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
ตัวอย่างข้างต้นสร้างผลลัพธ์ต่อไปนี้:
ดังที่คุณเห็นจากผลลัพธ์ด้านบน การไล่ระดับสีแบบเส้นตรงทำให้การเปลี่ยนแปลงเป็นแนวทแยงโดยเคลื่อนจากด้านซ้ายบนไปยังส่วนด้านขวาล่างของการไล่ระดับสี
การไล่ระดับสีเชิงเส้นหลากสี
การไล่ระดับสีแบบเส้นตรงสามารถมีสีได้ตั้งแต่สองสีขึ้นไป แต่สีอื่นๆ จะมีลักษณะอย่างไรในการไล่ระดับสี การจัดเรียงสีการไล่ระดับสีเชิงเส้นแบบหลากสีนั้นขึ้นอยู่กับทิศทางของมัน สีที่เปลี่ยนในแนวนอนจะมีสีใหม่ปรากฏขึ้นทางด้านซ้ายหรือด้านขวาของการไล่ระดับสีเชิงเส้น ขึ้นอยู่กับทิศทางที่แน่นอนของการไล่ระดับสีเชิงเส้น
ตัวอย่างการไล่ระดับสีเชิงเส้นหลากสี
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
บรรทัดของรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้:
คุณจะเห็นได้ว่าสีใหม่แต่ละสีถูกเพิ่มเข้าไปที่ด้านขวาของการไล่ระดับสี ทำให้เกิดการเปลี่ยนแปลงเป็นรุ้งในที่สุด ผลลัพธ์เดียวกันสามารถทำได้ในแนวตั้ง อย่างไรก็ตาม การจัดเรียงสีเฉพาะบนการไล่ระดับสีแบบเส้นตรงจะขึ้นอยู่กับคำหลักของทิศทางแนวตั้ง (บนหรือล่าง)
Radial Gradient คืออะไร?
การไล่ระดับสีแบบเรเดียลสร้างการไล่ระดับสีแบบหมุนวนของสองสีเพิ่มเติมที่เริ่มต้นจากจุดศูนย์กลางโดยค่าเริ่มต้น ในกรณีที่การไล่ระดับสีแบบเส้นตรงทำให้เกิดการไล่ระดับสีแบบตรงซึ่งไหลในแนวตั้งหรือแนวนอน การไล่ระดับสีแบบแนวรัศมีจะสร้างการไล่ระดับสีแบบวงกลมที่ไหลจากจุดศูนย์กลางไปยังขอบด้านนอก
การใช้ตัวอย่างการไล่ระดับแนวรัศมี
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
บรรทัดของรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้:
การเปลี่ยน Radial Gradient Center
ตามค่าเริ่มต้น การไล่ระดับสีในแนวรัศมีเริ่มต้นที่ศูนย์กลางของการไล่ระดับสี อย่างไรก็ตาม คุณสามารถเปลี่ยนจุดเริ่มต้นได้ด้วยการแนะนำคำหลักสองสามคำ
windows 10 รีเซ็ตเป็นค่าเริ่มต้นจากโรงงานจาก bios
การเปลี่ยนตัวอย่างตำแหน่งเริ่มต้นของ Radial Gradient
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
บรรทัดของรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้:
ดังที่คุณเห็นจากผลลัพธ์ด้านบน การไล่ระดับสีจะเริ่มจากมุมขวาบนแทนที่จะเป็นศูนย์กลาง การเปลี่ยนแปลงนี้เป็นไปได้เนื่องจากการรวมคำหลัก ขวาบน ในรหัสด้านบน รายการคำหลักต่อไปนี้สามารถใช้เพื่อเปลี่ยนจุดกำเนิดของการไล่ระดับสีในแนวรัศมี:
- บนซ้าย
- ล่างขวา
- ล่างซ้าย
การไล่ระดับสีแบบเรเดียลหลากสี
เช่นเดียวกับการไล่ระดับสีเชิงเส้น การไล่ระดับสีในแนวรัศมีสามารถใช้สองสีได้มากกว่า ความแตกต่างที่สำคัญคือการที่การไล่ระดับสีเชิงเส้นเพิ่มให้กับการไล่ระดับสีในเส้นตรง การไล่ระดับสีแบบรัศมีจะเพิ่มสีใหม่ที่ขอบด้านนอก
ตัวอย่างการไล่ระดับสีแบบเรเดียลหลากสี
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
บรรทัดของรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้:
การปรับแต่งการไล่ระดับสี
จนถึงตอนนี้ คุณได้เห็นวิธีเปลี่ยนทิศทางและจุดศูนย์กลางของการไล่ระดับสีแล้ว แต่คุณยังไม่เห็นวิธีปรับแต่งการไล่ระดับสี การปรับแต่งการไล่ระดับสีอาจดูเหมือนเป็นงานหนัก แต่เมื่อคุณเข้าใจพื้นฐานของการสร้างการไล่ระดับสีพื้นหลัง CSS ขั้นตอนต่อไปที่ชัดเจนคือการเรียนรู้วิธีทำให้การไล่ระดับสี CSS ของคุณมีเอกลักษณ์มากขึ้น
วิธีขายหนังสือการ์ตูนที่ดีที่สุด
ตามค่าเริ่มต้น สีในการไล่ระดับสีจะใช้พื้นที่จำนวนเท่าๆ กันโดยที่แต่ละสีจะค่อยๆ เปลี่ยนไปเป็นสีที่ตามมาอย่างราบรื่น ดังนั้น หากนำสองสีมารวมกันเพื่อสร้างการไล่ระดับสี แต่ละสีจะใช้พื้นที่ครึ่งหนึ่งที่มีอยู่ในขณะที่เปลี่ยนจากสีหนึ่งไปเป็นอีกสีหนึ่ง หากนำสามสีมารวมกัน แต่ละสีจะใช้พื้นที่หนึ่งในสามของพื้นที่ที่มี
ด้วยการไล่ระดับสีที่กำหนดเอง คุณจะได้กำหนดปริมาณของพื้นที่สีที่จะใช้ในการไล่ระดับสีโดยกำหนดอย่างชัดเจน ตำแหน่งหยุดสี .
การปรับแต่งตัวอย่างการไล่ระดับสีเชิงเส้น 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
บรรทัดของรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้:
ผลลัพธ์ด้านบนแสดงสีที่สองในการไล่ระดับสีเชิงเส้นที่หยุดที่จุด 30% ของสีแรกในการไล่ระดับสี แทนที่จะเป็นตำแหน่งปกติ และเนื่องจากสีที่สองเป็นสีสุดท้ายในการไล่ระดับสีจึงขยายไปถึงส่วนท้ายอย่างเป็นธรรมชาติ .
หากคุณต้องวาง 30% ในโค้ดด้านบนที่ส่วนท้ายของสีแรก สิ่งต่างๆ จะชัดเจนขึ้น
การปรับแต่งตัวอย่างการไล่ระดับสีเชิงเส้น 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
รหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้
ผลลัพธ์ด้านบนแสดงสีแรกอย่างชัดเจนในการไล่ระดับสีที่จุด 30% ของสีที่สองในการไล่ระดับสี ตัวอย่างนี้พร้อมกับตัวอย่างด้านบนจะช่วยให้การปรับแต่งการหยุดสีง่ายขึ้นสำหรับคุณที่จะเข้าใจ
การปรับแต่งการไล่ระดับสีในแนวรัศมีทำได้ในลักษณะเดียวกับการไล่ระดับสีเชิงเส้น สิ่งเดียวที่คุณต้องทำเพื่อให้ได้ผลลัพธ์เดียวกันข้างต้นในการไล่ระดับสีในแนวรัศมีคือการเปลี่ยนประเภทและทิศทางการไล่ระดับสี
สร้าง CSS Gradients ง่ายกว่าที่เคย
บทความบทช่วยสอนนี้มีเครื่องมือในการระบุและสร้างการไล่ระดับสีเชิงเส้นและแนวรัศมี หากคุณมาถึงจุดนี้ คุณได้เรียนรู้วิธีการเปลี่ยนทิศทางและจุดศูนย์กลางของการไล่ระดับสี นอกจากนี้ ตอนนี้คุณมีทักษะในการปรับแต่งการไล่ระดับสี CSS และสร้างการไล่ระดับสีพื้นหลังที่ไม่เหมือนใคร
อย่างไรก็ตาม หากคุณไม่ต้องการสร้างการไล่ระดับสีใหม่ที่ไม่เหมือนใครโดยตรง คุณสามารถเริ่มต้นด้วยการสร้างการไล่ระดับสีที่มีอยู่แล้วที่ดูดี
แบ่งปัน แบ่งปัน ทวีต อีเมล 27 ตัวอย่างการไล่ระดับสีพื้นหลัง CSS อย่างมีสไตล์สีทึบเป็นปีที่แล้ว ไล่สีมาแล้ว! แต่คุณจะสร้างมันขึ้นมาใน CSS ได้อย่างไร?
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- การเขียนโปรแกรม
- การพัฒนาเว็บ
- ออกแบบเว็บ
- CSS
Kadeisha Kean เป็นนักพัฒนาซอฟต์แวร์ฟูลสแตกและนักเขียนด้านเทคนิค/เทคโนโลยี เธอมีความสามารถที่ชัดเจนในการทำให้แนวคิดทางเทคโนโลยีที่ซับซ้อนที่สุดบางส่วนง่ายขึ้น การผลิตวัสดุที่สามารถเข้าใจได้ง่ายโดยสามเณรเทคโนโลยี เธอหลงใหลในการเขียน พัฒนาซอฟต์แวร์ที่น่าสนใจ และเดินทางไปทั่วโลก (ผ่านสารคดี)
เพิ่มเติมจาก Kadeisha Keanสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก