ลิงก์บางส่วนเกี่ยวกับการไล่ระดับสี CSS

ดูเหมือนว่าผู้สนใจในบล็อกจะรวมตัวกันในหัวข้อใดหัวข้อหนึ่งเป็นครั้งคราว และเหมือนกับว่าบทความที่บันทึกไว้ในโฟลเดอร์บุ๊กมาร์กของฉันกำลังสนทนาอยู่ การสนทนาที่อยู่ในนั้นตอนนี้เป็นเรื่องเกี่ยวกับ CSS Gradients และฉันคิดว่าฉันจะเชื่อมโยงส่วนที่น่าสนใจกว่านี้บางส่วน

• วันที่ 22: การไล่ระดับสีแบบกรวย — Manuel Matuzovic ดูที่การไล่ระดับสีแบบกรวยในวันที่ 21 ของซีรีส์ 100 วันของเขาเกี่ยวกับ CSS สมัยใหม่ โดยให้ภาพระดับสูงที่ดีแก่สี มุม ตำแหน่ง และการหยุดสี จากนั้นบน วันที่ 22, เขาใช้มันบน ::backdrop องค์ประกอบหลอก (อีกอย่าง ทวิตเตอร์กะทันหัน ระงับบัญชีของเขา — มาช่วยกันแก้ไขเรือลำนั้นถ้าเราทำได้)
• คุณเข้าใจ CSS radial-gradients จริงหรือไม่? - แพทริก บรอสเซ็ต ได้ทำงานที่ควรค่าแก่การแนะนำที่นี่ และฉันยังคงพยายามอย่างเต็มที่ แต่ฉันยินดีเป็นอย่างยิ่งที่เขาจะขอบคุณสำหรับคำอธิบายและการสาธิตที่ชัดเจนของเขาเกี่ยวกับสิ่งที่ฉันยังคงปิดปากอยู่ เช่น คำหลักสำหรับขนาดและรูปร่างของการไล่ระดับสีในแนวรัศมี ฉันเชื่อมโยงสิ่งนี้กับตัวเราเองแล้ว คู่มือการไล่ระดับสี CSS!
• การไล่ระดับสีพื้นหลังที่ปรับแต่งได้สูง — เฮ้ พูดถึงเรเดียลเกรเดียนท์ สกอตต์ แวนเดเฮย์สูตรสำหรับหนึ่งที่มีหลายสีทำให้รอบเมื่อสัปดาห์ที่แล้ว ความท้าทายของเขาคือการสร้างรูปแบบการไล่ระดับสีที่สามารถรองรับรูปแบบสีต่างๆ ได้ ซึ่งปกติแล้วจะเป็นปัญหาของคลาส CSS และค่าสีสำหรับแต่ละรูปแบบหากไม่ได้ใช้ คุณสมบัติที่กำหนดเอง. ด้วยวิธีนี้ เขาสามารถกำหนดคุณสมบัติที่กำหนดเองสำหรับสีต่างๆ และค่าตำแหน่งสำหรับแต่ละจุดสี จากนั้นเพียงอัปเดตค่าตามบริบท และยิ่งไปกว่านั้น วิธีที่คุณสมบัติที่กำหนดเองสามารถอัปเดตด้วย JavaScript ที่อนุญาตให้ Scott สร้างเครื่องมือสำหรับปรับแต่งรูปแบบการไล่ระดับสีซึ่งถูกแชร์อย่างไม่เห็นแก่ตัวในตอนท้ายของโพสต์
• รูปแบบ CSS Halftone - มิเชล บาร์เกอร์ พร้อมรายละเอียดรูปแบบ “ฮาล์ฟโทน” ของอานา ทิวดอร์ ลักษณะพิเศษเป็นเหมือนการพิมพ์หมึกประของหนังสือพิมพ์โรงเรียนเก่า ในขณะที่อานาใช้ ฮูดินี่ ภายใต้ฮูดสำหรับแอนิเมชั่นและเอฟเฟกต์โฮเวอร์ มิเชลล์จะมองหาเอฟเฟกต์ฮาล์ฟโทนโดยเฉพาะและวิธีสร้างเอฟเฟกต์ด้วยการไล่ระดับสีในแนวรัศมี ฉันชอบวิธีที่ Michelle แสดงให้เห็นวิธีรับจากตารางจุดที่ตรงไปตรงมาไปยังจุดที่รูปแบบถูกเซเล็กน้อย และคอยดูจนจบเพื่อดูว่าเธอคั่นเอ็ฟเฟ็กต์ด้วย a . อย่างไร mask-image ที่ใช้การไล่ระดับสีเชิงเส้นเพื่อสร้างเอฟเฟกต์การซีดจาง แต่งลายนี้นิดหน่อยและปิดท้ายด้วยบางสิ่งที่ดูเรียบร้อยซึ่งดูเหมือนตัวกรองหยดหมึกน้ำมูกไหล
• โซลูชัน Navbar อันห้าวหาญ — Eric Meyer ได้รับความท้าทายด้านการออกแบบที่น่าสนใจสำหรับเมนูที่มีเส้นประออกมาจากลิงก์ "หน้าปัจจุบัน" และกลายเป็นส่วนหนึ่งของเส้นขอบประที่ใหญ่ขึ้นตามขอบด้านซ้ายของคอนเทนเนอร์เนื้อหา เอริคเป็นตัวอย่างที่ดีของ .เสมอ วิธีคิดแบบ Front-end Developerและเขาทำมันที่นี่ในขณะที่เขาอธิบายเส้นทางสำรองที่เขาใช้การไล่ระดับสีเชิงเส้นเมื่อเขาชนกับอุปสรรค์ด้วยวิธีการตั้งค่ามาตรฐาน border-style: dotted บนองค์ประกอบ
• เส้นประไล่ระดับสีที่สวมหน้ากาก — เอริคกับการติดตามลิงก์สุดท้ายนั้นแสดงให้เห็นว่าเขาไม่เพียงเชื่อมโยงเส้นประของเส้นขอบด้านซ้ายกับเส้นประของภาพแรสเตอร์เท่านั้น แต่ยังแสดงให้เห็นว่าการออกแบบที่เฉียบแหลมของเขาโน้มน้าวให้เขาเปลี่ยนวิธีแก้ปัญหาเพื่อเลียนแบบความละเอียดที่ต่ำกว่าของ ขีดกลางของรูปภาพโดยใช้การไล่ระดับสีพื้นหลังเชิงเส้นซ้ำสองครั้งเป็นa mask-image บนการไล่ระดับสีพื้นหลัง โง่และยอดเยี่ยมมาก!