การไล่ระดับสีเชิงเส้น CSS3 [เคล็ดลับ CSS3]
ลาด เป็นคุณสมบัติสีที่ยอดเยี่ยมใน CSS3 แทนที่จะเพิ่มเพียงสีเดียวตอนนี้เราสามารถเพิ่มชุดค่าผสมหลายสีในหนึ่งบล็อคการประกาศโดยไม่ต้องอาศัยรูปภาพซึ่งสามารถลดคำขอ HTTP ในเว็บไซต์ของเราทำให้เว็บไซต์โหลดเร็วขึ้น.
หากคุณเล่นกับการไล่ระดับสีใน CSS3 คุณอาจคุ้นเคยกับทั้งสองวิธี: การไล่ระดับสีแบบรัศมีและเชิงเส้น โพสต์ของวันนี้จะเกี่ยวกับหลัง.
การสร้างการไล่ระดับสี
ข้อมูลจำเพาะระบุว่าการไล่ระดับสีใน CSS3 เป็นรูปภาพจึงไม่มีคุณสมบัติพิเศษเช่นการเพิ่มคุณสมบัติใหม่อื่น ๆ ดังนั้นจึงมีการประกาศโดยใช้ ภาพพื้นหลัง ทรัพย์สินแทน.
ถ้าเราดูที่ syntax ที่สมบูรณ์สำหรับการไล่ระดับสีมันจะดูเล็กน้อย overstuffed, ซึ่งอาจนำไปสู่ความสับสนสำหรับบางคน.
div background-image: -webkit-linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%); ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, # FF5A00 0%, # FFAE00 100%); ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, # FF5A00 0%, # FFAE00 100%); background-image: linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%);
ลองขุดลงไปในแต่ละส่วนของไวยากรณ์ทีละตัวเพื่อให้ชัดเจนขึ้น.
ก่อนอื่นการไล่ระดับสีเชิงเส้นจะถูกประกาศด้วย เชิงเส้นลาด () ฟังก์ชัน ฟังก์ชั่นมีสามค่าหลัก ค่าแรกกำหนดตำแหน่งเริ่มต้นการไล่ระดับสี คุณสามารถใช้คำหลักที่สื่อความหมายเช่น ด้านบน เพื่อเริ่มการไล่ระดับสีที่ไหลออกจาก ด้านบน;
div background-image: linear-gradient (ด้านบน, # FF5A00, # FFAE00);
ตัวอย่างด้านบนเป็นรุ่นอย่างเป็นทางการจาก W3C เพื่อสร้างการไล่ระดับสี มันง่ายกว่าและค่อนข้างอธิบายตนเองและจะสร้างการไล่ระดับสีต่อไปนี้.
คุณยังสามารถใช้ ด้านล่าง ทำตรงกันข้ามหรืออย่างอื่น ขวา และ ซ้าย.
นอกจากนี้เรายังสามารถสร้างการไล่ระดับสีในแนวทแยงโดยใช้ มุมองศา เป็นตำแหน่งเริ่มต้นการไล่ระดับสี นี่คือตัวอย่าง:
div background-image: linear-gradient (45deg, # FF5A00, # FFAE00);
ตัวอย่างด้านบนจะสร้างการไล่ระดับสีต่อไปนี้:
ค่าที่สองของฟังก์ชั่นจะบอก สีแรก ข้อมูลและ หยุดตำแหน่ง ซึ่งระบุไว้ในอัตราร้อยละ ตำแหน่งหยุดจริงเป็นทางเลือก เบราว์เซอร์นั้นฉลาดพอที่จะกำหนดตำแหน่งที่เหมาะสมดังนั้นเมื่อเราไม่ระบุสีแรกของการหยุดเบราว์เซอร์จะใช้ 0% เป็นค่าเริ่มต้น.
และค่าต่อไปคือ สีที่สอง การรวมกัน มันทำงานเหมือนค่าก่อนหน้าเฉพาะในกรณีที่เป็นสีสุดท้ายที่นำไปใช้และเราไม่ได้ระบุ หยุดตำแหน่ง, ค่าของ 100% จะถูกนำมาเป็นค่าเริ่มต้น ตอนนี้เรามาดูตัวอย่างด้านล่าง:
div background-image: linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%);
ตัวอย่างด้านบนจะสร้างการไล่ระดับสีเหมือนกับที่เราเห็นก่อนหน้านี้ (ไม่แตกต่างกัน) แต่ตอนนี้เราระบุตำแหน่งหยุดสี
ตอนนี้ขอเปลี่ยน หยุดสี, และครั้งนี้เราจะระบุ 50% สำหรับสีแรกและ 51% สำหรับสีที่สองและมาดูกันว่ามันจะเปิดออก;
div background-image: linear-gradient (บนสุด, # FF5A00 50%, # FFAE00 51%);
ความโปร่งใส
การสร้าง ความโปร่งใส ในการไล่ระดับสีก็เป็นไปได้เช่นกัน ในการสร้างเอฟเฟกต์เราจำเป็นต้องแปลสี แม่มด เข้าไป RGBA โหมดและลดช่องอัลฟา.
div background-image: linear-gradient (ด้านบน, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
ตัวอย่างด้านบนจะลดความเข้มของสีลง 20%, และการไล่ระดับสีจะออกมาเช่นนี้
หลายสี
หากคุณต้องการเพิ่มสีให้มากขึ้นเพียงเพิ่มสีที่อยู่ติดกับตัวคั่นด้วยเครื่องหมายจุลภาคและให้เบราว์เซอร์กำหนดตำแหน่งหยุดสีแต่ละสี.
div background-image: linear-gradient (ด้านบน, สีแดง, สีส้ม, สีเหลือง, สีเขียว, สีน้ำเงิน, สีคราม, สีม่วง);
ตัวอย่างด้านบนจะสร้างรุ้งต่อไปนี้.
ความเข้ากันได้ของเบราว์เซอร์
น่าเสียดายที่ในขณะที่เขียนนี้เบราว์เซอร์ปัจจุบันทั้งหมดยังไม่สนับสนุนไวยากรณ์มาตรฐาน พวกเขายังต้องการคำนำหน้าผู้ขาย (-WebKit-, -moz-, -นางสาว- และ -โอ-) ดังนั้นนั่นคือเหตุผลที่ไวยากรณ์ทั้งหมดปรากฏดังนี้:
div background-image: -webkit-linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%); ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, # FF5A00 0%, # FFAE00 100%); ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, # FF5A00 0%, # FFAE00 100%); background-image: linear-gradient (บนสุด, # FF5A00 0%, # FFAE00 100%);
ในทางกลับกัน Internet Explorer โดยเฉพาะรุ่น 9 และต่ำกว่านั้นอยู่ไกลจากมาตรฐาน การไล่ระดับสีใน IE9 และประกาศด้านล่างด้วย กรอง, ดังนั้นหากเราต้องการเพิ่มการไล่ระดับสีบนเบราว์เซอร์เหล่านั้นเราต้องเขียนสิ่งนี้
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
กรอง มีข้อ จำกัด : ประการแรกมันไม่อนุญาตให้เพิ่มมากกว่าสามสีและการสร้างเอฟเฟกต์ความโปร่งใสนั้นค่อนข้างยุ่งยาก - มันไม่อนุญาต RGBA, แต่ IE กรอง การใช้งาน #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
นี่คือเครื่องมือที่จะช่วยคุณแปลง RGBA ไปยัง #ARGB.
- การสาธิต
- แหล่งดาวน์โหลด
การเขียนไวยากรณ์เร็วขึ้น
ดังที่คุณเห็นด้านบนเพื่อรักษาความเข้ากันได้ของการไล่ระดับสีบนเบราว์เซอร์เราจำเป็นต้องเพิ่มโค้ดอีกห้าบรรทัดที่ไม่มีประสิทธิภาพ.
มีหลายวิธีที่เราสามารถทำได้เพื่อทำให้งานง่ายขึ้น เช่นการใช้คำนำหน้าฟรี, Prefixr, LESS หรือ Sass เพื่อช่วยรวบรวมรหัส แต่เหนือสิ่งอื่นใดเราขอแนะนำให้ใช้เครื่องมือนี้ ColorZilla Gradient เครื่องมือนี้จะสร้างรหัสที่จำเป็นทั้งหมดเพื่อให้การไล่ระดับสีทำงานในเบราว์เซอร์ทั้งหมด.
คำพูดสุดท้าย
วันนี้เราได้พูดคุยกันมากเกี่ยวกับการสร้างการไล่ระดับสีเราได้ตรวจสอบแต่ละส่วนของไวยากรณ์การสร้างเอฟเฟกต์ที่โปร่งใส ดังนั้น ณ จุดนี้เราหวังว่าคุณจะมีความเข้าใจในเรื่องนี้ดีขึ้น.
ยังมีอีกหลายสิ่งที่เราวางแผนที่จะสำรวจ การไล่ระดับสี CSS3 ในโพสต์ของเราในอนาคตดังนั้นอย่าลืมติดตาม Hongkiat.com สุดท้ายนี้ขอขอบคุณสำหรับการอ่านโพสต์นี้เราหวังว่าคุณจะสนุกกับมัน.
อ่านเพิ่มเติม
- เบราว์เซอร์ bullet Proof Cross RGBA พื้นหลัง - Lea Verou
- ภาพ CSS3 - W3.org
- เมื่อใดที่ฉันสามารถใช้การไล่ระดับสี CSS3 - CanIUse.com
