การไล่ระดับสีซ้ำ CSS3 [เคล็ดลับ CSS3]

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

ในโพสต์ก่อนหน้าของเราเราได้พูดถึงการไล่ระดับสีสองประเภทที่สามารถทำให้สำเร็จด้วย CSS3:

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

คราวนี้เราจะดูพี่น้องของพวกเขา: การไล่ระดับสีซ้ำ.

ทำซ้ำขั้นพื้นฐาน

ทำซ้ำการไล่ระดับสี เป็นหลักนามสกุล ไวยากรณ์คล้ายกับที่เรากำหนด Radial และ Linear gradients เฉพาะที่เป็นชื่อที่แสดงถึงมันจะทำซ้ำสีในทิศทางที่กำหนด ในการทำซ้ำการไล่ระดับสีเชิงเส้นเราสามารถใช้ฟังก์ชันนี้: ซ้ำเชิงเส้นลาด, ในขณะที่ทำซ้ำการไล่ระดับสีรัศมีหรือรูปไข่เราใช้ฟังก์ชั่นนี้: ซ้ำรัศมีลาด.

 / * เป็น Linear * / .gradient พื้นหลัง: ทำซ้ำ - ไล่ระดับสีเชิงเส้น (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient พื้นหลัง: การทำซ้ำ - เรเดียน - การไล่ระดับสี (50% 50%, วงกลม, # f9f9f9, #cccccc 20px);  

ไม่มีอะไรแตกต่างกันมากสำหรับส่วนที่เหลือในรหัสยกเว้นสำหรับ การทำซ้ำสี. ด้านล่างเป็นภาพประกอบง่าย ๆ เพื่ออธิบายว่าการทำซ้ำสีนี้ทำงานอย่างไร.

แม้ว่าภาพด้านบนจะแสดงเฉพาะสำหรับการไล่ระดับสีเชิงเส้นซ้ำ ๆ แต่ความคิดพื้นฐานยังใช้กับการไล่ระดับสีแบบรัศมีซึ่งสีจะทำซ้ำอย่างไม่สิ้นสุดในกรณีนี้ไม่ว่าในทิศทางใด ตามลิงค์ด้านล่างเพื่อดูตัวอย่าง.

• ดูการสาธิต

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

ตัวอย่าง: การสร้างรูปแบบ

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

 .การไล่ระดับสี พื้นหลัง: การทำซ้ำเชิงเส้นไล่ระดับสี (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

สังเกตว่าเรากำหนดสีที่ต่างกันสองสีอย่างไร - # f9f9f9 และ #cccccc - ในจุดเดียวกัน, 20px. ตัวอย่างนี้จะเพิ่มความแตกต่างระหว่างสองสีนี้และกำจัดความเลือน.

ในการกำหนดทิศทางเราเพียงแค่เปลี่ยนมุม - 90deg จะกำหนดแนวนอนในขณะที่ 45deg จะนำมันเส้นทแยงมุมและอื่น ๆ.

• ดูการสาธิต

ตัวอย่าง: การสร้าง Paperline

ในตัวอย่างที่สองนี้เราจะสร้างกระดาษที่คุณมักจะเห็นในสมุดบันทึก ในการสร้างเอฟเฟกต์นี้เราต้องการเพียง div, ไม่มีภาพมี แต่ CSS เท่านั้น.

 .การไล่ระดับสี width: auto; ความสูง: 500px; มาร์จิ้น: 0 50px; พื้นหลัง: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); พื้นหลัง: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); พื้นหลัง: -o-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); พื้นหลัง: การทำซ้ำเชิงเส้นไล่ระดับสี (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); ขนาดพื้นหลัง: 100% 21px;  

แจ้งให้ทราบล่วงหน้าเรายังเพิ่ม CSS3 พื้นหลังขนาด เพื่อระบุขนาดของภาพพื้นหลังสำหรับ 100%, 20px. แม้ว่าการไล่ระดับสี CSS3 จะแสดง 'สี' แต่ก็จัดเป็นรูปภาพได้จริง, ไม่ใช่สี.

ต่อไปเราจะใช้ :ก่อน องค์ประกอบหลอก เพื่อเพิ่มแถบทางด้านซ้ายของกระดาษ.

 .การไล่ระดับสี: ก่อน เนื้อหา: ""; จอแสดงผล: บล็อกแบบอินไลน์; ความสูง: 500px; ความกว้าง: 4px; ขอบซ้าย: 4px double # FCA1A1; ตำแหน่ง: ญาติ; ซ้าย: 30px;  

และเราเสร็จแล้วมันง่ายมากใช่มั้ย ตอนนี้เราสามารถเห็นพวกเขาทั้งหมดได้จากลิงก์ด้านล่าง.

• ดูการสาธิต
• แหล่งดาวน์โหลด

แหล่งข้อมูลเพิ่มเติม

• การไล่ระดับสีของ Webkit CSS3
• การไล่ระดับสี CSS3 ที่ Microsoft Developer Network