01 จาก 04
การสร้าง Linear Gradients แบบ Cross-Browser ด้วย CSS3
Linear Gradients
การไล่ระดับสีที่พบบ่อยที่สุดที่คุณจะเห็นคือการไล่ระดับสีแบบเส้นตรงสองสี ซึ่งหมายความว่าการไล่ระดับสีจะเคลื่อนไปตามเส้นตรงที่เปลี่ยนไปเรื่อย ๆ จากสีแรกเป็นสีที่สองตามแนวเส้นนั้น ภาพบนหน้านี้แสดงการไล่ระดับสีจากซ้ายไปขวาอย่างง่ายจาก # 999 (สีเทาเข้ม) เป็น #fff (สีขาว)
การไล่ระดับสีแบบเส้นตรงเป็นวิธีที่ง่ายที่สุดในการกำหนดและมีการสนับสนุนในเบราว์เซอร์มากที่สุด การไล่ระดับสีแบบ CSS3 มีการสนับสนุนใน Android 2.3 ขึ้นไป Chrome 1+, Firefox 3.6+, Opera 11.1+ และ Safari 4+ Internet Explorer สามารถเพิ่มการไล่ระดับสีโดยใช้ตัวกรองและสนับสนุน IE 5.5 ได้ นี่ไม่ใช่ CSS3 แต่เป็นตัวเลือกสำหรับความเข้ากันได้ของ cross-browser
เมื่อคุณกำหนดการไล่ระดับสีคุณจำเป็นต้องกำหนดสิ่งที่แตกต่างกันหลาย:
- ประเภทของการไล่ระดับสีคือเส้นตรงหรือแนวรัศมี
- ที่ลาดควรเริ่มต้น
- ในกรณีที่การไล่ระดับสีควรหยุดลง
- สีอะไรที่อยู่ในการไล่ระดับสีและสถานที่ที่พวกเขาควรเริ่มต้นและหยุด
เมื่อต้องการกำหนดการไล่ระดับสีแบบเส้นตรงโดยใช้ CSS3 คุณจะต้องเขียน:
linear-gradient ( มุม หรือ ด้านข้างหรือมุม , หยุด สี , หยุดสี )
- ขั้นแรกคุณกำหนดประเภทของการไล่ระดับสีโดยใช้ชื่อ linear -gradient
- จากนั้นคุณจะกำหนดจุดเริ่มต้นและจุดหยุดของการไล่ระดับสีในหนึ่งในสองวิธีดังนี้มุมของเส้นในองศาตั้งแต่ 0 ถึง 359 โดยมี 0 องศาชี้ขึ้นตรง หรือด้วยฟังก์ชัน "ด้านข้างหรือมุม" เช่นซ้าย, ขวา, ล่างและด้านบน ซึ่งจะอธิบายรายละเอียดเพิ่มเติมในหน้าถัดไป ถ้าคุณปล่อยให้ออกมานี้การไล่ระดับสีจะไหลจากด้านบนไปยังด้านล่างขององค์ประกอบ
- จากนั้นคุณกำหนดสีหยุด คุณกำหนดสีหยุดด้วยรหัสสีและเปอร์เซ็นต์ตัวเลือก ร้อยละบอกเบราว์เซอร์ที่ในบรรทัดที่จะเริ่มต้นหรือจบลงด้วยสีที่ ค่าดีฟอลต์คือการวางสีอย่างสม่ำเสมอตามแนวเส้น คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับป้ายหยุดสีในหน้า 3
ดังนั้นเพื่อกำหนด gradient ข้างต้นกับ CSS3 คุณเขียน:
linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
และกำหนดเป็นส่วนหลังของ DIV ที่คุณเขียนไว้:
div {
ภาพพื้นหลัง: linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%;
}
ส่วนขยายของเบราว์เซอร์สำหรับ CSS3 Linear Gradients
เพื่อให้การไล่ระดับสีของคุณทำงานได้แบบข้ามเบราว์เซอร์คุณต้องใช้ส่วนขยายเบราว์เซอร์สำหรับเบราว์เซอร์ส่วนใหญ่และตัวกรองสำหรับ Internet Explorer 9 และต่ำกว่า (จริง 2 ตัวกรอง) องค์ประกอบเหล่านี้ใช้องค์ประกอบเดียวกันในการกำหนดการไล่ระดับสีของคุณ (ยกเว้นว่าคุณสามารถกำหนดการไล่ระดับสี 2 สีใน IE เท่านั้น)
ตัวกรองและส่วนขยายของ Microsoft --Internet Explorer เป็นสิ่งท้าทายที่สุดที่จะสนับสนุนเพราะคุณต้องมี 3 บรรทัดที่แตกต่างกันเพื่อสนับสนุนเบราว์เซอร์เวอร์ชันต่างๆ เพื่อให้ได้สีเทาไปเป็นสีขาวไล่ระดับสีคุณจะเขียน:
/ * IE 5.5-7 * /
ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
ส่วนขยายของ Mozilla - ส่วนขยาย --moz- ทำงานเหมือนกับคุณสมบัติ CSS3 เพียงกับส่วนขยาย --moz- เพื่อให้ได้การไล่ระดับสีเหนือสำหรับ Firefox ให้เขียน:
-moz-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
ส่วนขยาย Opera - ส่วนขยาย - - - เพิ่มการไล่ระดับสีไปยัง Opera 11.1 ขึ้นไป เพื่อให้ได้การไล่ระดับสีเหนือให้เขียน:
-o-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
ส่วนขยายของ Webkit - ส่วนขยาย - เว็บ - ไซต์ทำงานเหมือนกับคุณสมบัติ CSS3 หากต้องการกำหนดการไล่ระดับสีเหนือสำหรับ Safari 5.1 ขึ้นไปหรือ Chrome 10+ คุณจะต้องเขียน
-webkit-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
นอกจากนี้ยังมีส่วนขยาย Webkit รุ่นเก่าที่ทำงานร่วมกับ Chrome 2+ และ Safari 4+ ในนั้นคุณกำหนดชนิดของการไล่ระดับสีเป็นค่ามากกว่าในชื่อคุณสมบัติ หากต้องการให้การไล่ระดับสีเทาเป็นสีขาวมีนามสกุลนี้ให้เขียน:
-webkit-gradient (เส้นตรงด้านซ้ายบนขวาด้านบน color-stop (0%, # 999999), color-stop (100%, # ffffff));
โค้ด CSS CSS Linear Gradient CSS แบบสมบูรณ์
สำหรับการสนับสนุนเบราว์เซอร์แบบข้ามเบราว์เซอร์เต็มรูปแบบเพื่อให้การไล่ระดับสีเทาเป็นสีขาวเหนือคุณควรรวมสีทึบ fallback สำหรับเบราว์เซอร์ที่ไม่สนับสนุนการไล่ระดับสีและรายการสุดท้ายควรเป็นลักษณะ CSS3 สำหรับเบราว์เซอร์ที่มีคุณสมบัติครบถ้วน ดังนั้นคุณจะเขียน:
พื้นหลัง: # 999999;
พื้นหลัง: -moz-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
พื้นหลัง: ด้านบนซ้ายด้านขวาด้านบนสีหยุด (0%, # 999999), สีหยุด (100%, # ffffff));
พื้นหลัง: -webkit-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
พื้นหลัง: -o-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
พื้นหลัง: -ms-linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
พื้นหลัง: linear-gradient (ซ้าย, # 999999 0%, #ffffff 100%);
หน้าถัดไปในบทแนะนำนี้อธิบายส่วนของการไล่ระดับสีในรายละเอียดเพิ่มเติมและหน้าสุดท้ายจะชี้ไปที่เครื่องมือซึ่งเป็นวิธีที่ยอดเยี่ยมในการสร้างการไล่ระดับสี CSS3 โดยอัตโนมัติ
ดูการไล่ระดับสีแบบเส้นตรงนี้ในการดำเนินการโดยใช้ CSS เพียงอย่างเดียว
02 จาก 04
การสร้าง Gradients ในแนวทแยง - มุมของ Gradient
จุดเริ่มต้นและจุดหยุดกำหนดมุมของการไล่ระดับสี การไล่ระดับสีเชิงเส้นมากที่สุดคือจากบนลงล่างหรือซ้ายไปขวา แต่ก็เป็นไปได้ที่จะสร้างการไล่ระดับสีที่เคลื่อนที่บนเส้นทแยงมุม ภาพในหน้านี้แสดงการไล่ระดับสีที่เรียบง่ายซึ่งเคลื่อนที่ในมุม 45 องศาจากภาพจากขวาไปซ้าย
มุมเพื่อกำหนดเส้นไล่โทน
มุมเป็นเส้นบนวงกลมจินตนาการตรงกลางของชิ้นส่วน จุด 0deg ขึ้น 90deg ชี้ไปทางขวา 180 จุดและลง 270 จุดไปทางซ้าย คุณสามารถกำหนดมุมได้ตั้งแต่ 0 ถึง 359 องศา
คุณควรทราบว่าในรูปสี่เหลี่ยมผืนผ้ามุม 45 องศาจะเคลื่อนจากมุมบนซ้ายไปทางขวาล่าง แต่ในรูปสี่เหลี่ยมผืนผ้าจุดเริ่มต้นและจุดสิ้นสุดจะอยู่ด้านนอกเล็กน้อยรูปร่างตามที่เห็นในภาพ
วิธีทั่วไปในการกำหนดเส้นทแยงมุมคือการกำหนดมุมเช่นด้านบนขวาและการไล่ระดับสีจะย้ายจากมุมนั้นไปยังมุมตรงข้าม คุณสามารถกำหนดตำแหน่งเริ่มต้นด้วยคำหลักต่อไปนี้:
- ด้านบน
- ขวา
- ด้านล่าง
- ซ้าย
- ศูนย์
และสามารถรวมกันให้เจาะจงมากขึ้นได้เช่น:
- ด้านบนขวา
- บนซ้าย
- กลางด้านบน
- ล่างขวา
- ล่างซ้าย
- กลางด้านล่าง
- ขวากลาง
- ซ้ายตรงกลาง
นี่คือ CSS สำหรับการไล่ระดับสีแบบเดียวกับภาพที่มีภาพสีแดง - ขาวที่เลื่อนจากมุมขวาบนไปยังด้านล่างซ้าย:
พื้นหลัง: ## 901A1C;
ภาพพื้นหลัง: -moz-linear-gradient (ด้านขวาสุด # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (เส้นตรงด้านบนซ้ายด้านล่างสีหยุด (0, # 901A1C), สีหยุด (1, #FFFFFF));
พื้นหลัง: -webkit-linear-gradient (ด้านขวาสุด # 901A1C 0%, #ffffff 100%);
พื้นหลัง: -o-linear-gradient (ด้านขวา, # 901A1C 0%, #ffffff 100%);
พื้นหลัง: -ms-linear-gradient (ด้านขวาสุด # 901A1C 0%, #ffffff 100%);
พื้นหลัง: linear-gradient (ด้านขวาสุด # 901A1C 0%, #ffffff 100%);
คุณอาจสังเกตเห็นว่าไม่มีตัวกรอง IE ในตัวอย่างนี้ นั่นคือเนื่องจาก IE อนุญาตให้ใช้ตัวกรองทั้งสองแบบเท่านั้น: บนลงล่าง (ค่าดีฟอลต์) และจากซ้ายไปขวา (ด้วยสวิตช์ GradientType = 1)
ดูการไล่ระดับสีแบบทแยงมุมในการดำเนินการโดยใช้ CSS เพียงอย่างเดียว
03 จาก 04
หยุดสี
ด้วยการไล่ระดับสีแบบ CSS3 คุณสามารถเพิ่มสีหลายสีในการไล่ระดับสีของคุณเพื่อสร้างเอฟเฟ็กต์ที่น่าสนใจ เมื่อต้องการเพิ่มสีเหล่านี้คุณจะต้องเพิ่มสีเพิ่มเติมในตอนท้ายของพร็อพเพอร์ตี้โดยคั่นด้วยเครื่องหมายจุลภาค คุณควรระบุตำแหน่งที่บรรทัดควรมีสีเริ่มต้นหรือสิ้นสุดด้วยเช่นกัน
ตัวกรอง Internet Explorer สนับสนุนเฉพาะจุดสีสองสีดังนั้นเมื่อคุณสร้างการไล่ระดับสีนี้คุณควรรวมเฉพาะสีที่หนึ่งและสองที่คุณต้องการแสดงเท่านั้น
นี่คือ CSS สำหรับการไล่ระดับสี 3 สีข้างต้น:
พื้นหลัง: #ffffff;
พื้นหลัง: -moz-linear-gradient (ซ้าย, #ffffff% 0, # 901A1C 51%, #ffffff 100%);
พื้นหลัง: ด้านบนซ้ายด้านขวาด้านบนสีหยุด (0%, # ffffff), หยุดสี (51%, # 901A1C), สีหยุด (100%, # ffffff));
พื้นหลัง: -webkit-linear-gradient (ซ้าย, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
พื้นหลัง: -o-linear-gradient (ซ้าย, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
พื้นหลัง: -ms-linear-gradient (ซ้าย, #ffffff% 0%, # 901A1C 51%, # ffffff 100%);
ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
พื้นหลัง: linear-gradient (ซ้าย, #ffffff% 0, # 901A1C 51%, # ffffff 100%);
ดูการไล่ระดับสีแบบเส้นตรงนี้ด้วยการหยุดสี 3 สีโดยใช้ CSS เพียงอย่างเดียว
04 จาก 04
ทำให้ Gradient อาคารง่ายขึ้น
มีสองไซต์ที่ฉันแนะนำเพื่อช่วยให้คุณสามารถสร้างการไล่ระดับสีแต่ละอันมีประโยชน์และข้อเสียแก่พวกเขาฉันไม่พบตัวสร้างการไล่ระดับสีที่ทำทุกอย่าง
Ultimate Gradient Generator ของเอเซอร์
เครื่องกำเนิดไฟฟ้าไล่ระดับสีนี้เป็นที่นิยมมากเพราะทำในลักษณะที่คล้ายคลึงกับโปรแกรมสร้างภาพไล่ระดับสีในโปรแกรมต่างๆเช่น Photoshop ฉันยังชอบมันเพราะมันทำให้คุณทุกส่วนขยาย CSS ไม่ใช่แค่ Webkit และ Mozilla ปัญหาเกี่ยวกับเครื่องกำเนิดไฟฟ้านี้คือการสนับสนุนการไล่ระดับสีในแนวนอนและแนวตั้งเท่านั้น ถ้าคุณต้องการทำ gradients แนวทแยงคุณต้องไปที่เครื่องกำเนิดไฟฟ้าอื่น ๆ ที่ผมแนะนำ
เครื่องไล่ระดับสี CSS3
เครื่องกำเนิดไฟฟ้านี้ทำให้ฉันเข้าใจได้ง่ายกว่าครั้งแรก แต่สนับสนุนการเปลี่ยนทิศทางไปเป็นเส้นทแยงมุม
หากคุณรู้จักเครื่องสร้าง CSS Gradient Generator อื่นที่คุณต้องการมากกว่านี้โปรด แจ้งให้เราทราบ