ตัวสร้างปุ่ม CSS | เครื่องมือส่วนหน้า - ตัวสร้าง HTML / CSS ประสิทธิภาพสูงและใช้งานง่าย (2023)

วิธีการใช้เครื่องมือ

รายชื่อเครื่องกำเนิดไฟฟ้า

• CSS Gradation Generator เป็นตัวสร้างสำหรับการใช้การไล่สีกับพื้นหลัง โดยรองรับการไล่ระดับเชิงเส้น การไล่ระดับแนวรัศมี (วงกลม) การไล่ระดับทรงกรวย (รูปร่างพัดลม) ฯลฯ ของการไล่ระดับพื้นฐาน (เชิงเส้น) และสามารถสร้างการไล่สีได้อย่างง่ายดาย เนื่องจากยังรองรับข้อกำหนดของการไล่สีหลายระดับด้วย จึงเป็นไปได้ที่จะสร้างสีที่ผสมการไล่สีหลายระดับด้วยการทำให้สีที่ระบุของการไล่สีข้างต้นโปร่งใส ในการไล่สีแบบวงกลม / รูปพัด นอกเหนือจากการเตรียมเครื่องมือสำหรับการไล่สีอย่างสังหรณ์ใจ เมื่อใช้งานในตำแหน่งกึ่งกลาง อีกทั้งยังมีฟังก์ชันที่สามารถใช้งานมุม (องศา) ของการไล่ระดับเชิงเส้น/รูปพัดได้อย่างง่ายดาย ฉันยังรองรับการไล่สีซ้ำๆ อีกด้วย คุณยังสามารถเลือกและปรับแต่งจากตัวอย่างมากกว่า 70 ประเภท!
• เครื่องสร้างปุ่ม CSSเป็นเครื่องมือสร้างปุ่มอัตโนมัติประสิทธิภาพสูงที่ช่วยให้คุณสามารถสร้างปุ่มต่างๆ ได้อย่างง่ายดาย สีพื้นหลัง การไล่สีพื้นหลัง เงาของปุ่ม (เงากล่อง) เงาอักขระ (เงาข้อความ) ขนาด (ความกว้าง ความสูง) เส้นขอบ (เส้นขอบ) มุมโค้งมน (เส้นขอบ-รัศมี) ซึ่งสอดคล้องกับการเปลี่ยนแปลง (ภาพเคลื่อนไหว) ฯลฯ เนื่องจากมันยังรองรับองค์ประกอบหลอก (ก่อน, หลัง), โฮเวอร์เมาส์ (โฮเวอร์) และองค์ประกอบหลอกหลังจากโฮเวอร์เมาส์ จึงเป็นไปได้ที่จะสร้างปุ่มที่มีการออกแบบที่หลากหลาย ตัวอย่าง 20 ประเภทที่เรามีข้างต้น!
• CSS Box Shadow Generatorเครื่องมือกล่องเงาที่ช่วยให้คุณสามารถเพิ่มเงาให้กับรูปภาพและองค์ประกอบได้ คุณสามารถเลือกจากตัวอย่างมากมายและปรับแต่งได้ นอกจากนี้ยังรองรับการสร้างเงาภายใน (ภาพประกอบ) และหลายเงา นอกจากนี้ยังรองรับองค์ประกอบหลอก เช่น ก่อนและหลัง นอกจากนี้ยังมีตัวอย่างฟิสิกส์ปอดด้วย
• CSS Text Shadow Generatorเป็นเครื่องมือสร้างเงาข้อความอัตโนมัติที่สามารถเพิ่มเงาต่างๆ ให้กับตัวอักษรได้ คุณสามารถเลือกจากตัวอย่างที่มีอยู่มากมายและปรับแต่งได้ คุณสามารถลองออกแบบได้หลากหลายโดยรองรับการเปลี่ยนแปลงข้อความแบบเรียลไทม์และหลายเงา
• CSS Border Generatorเป็นเครื่องมือสร้าง CSS อัตโนมัติสำหรับการเพิ่มเส้นขอบ นอกเหนือจากความสามารถในการระบุขึ้น ลง ซ้ายและขวาทีละรายการแล้ว คุณยังสามารถสร้างเส้นประ เส้นประ เส้นคู่ และเส้นสามมิติ (ร่อง) / สันเขา / isnet / outset) เพิ่มขึ้น. คุณยังสามารถระบุขนาดตัวอย่าง (กว้าง / สูง) และมุมโค้งมน (เส้นขอบ-รัศมี)
• CSS Filter Generatorเครื่องมือตัวกรอง css ที่ทำให้ง่ายต่อการใช้เอฟเฟกต์กับรูปภาพและองค์ประกอบ เบลอ ความสว่าง คอนทราสต์ ระดับสีเทา หมุนเฉดสี กลับด้าน ความอิ่มตัวของสี ซีเปีย เงา คุณสามารถระบุได้หลายรายการ (เงา) และอื่นๆ สำหรับผู้ที่ไม่ทราบวิธีใช้งาน เราได้เตรียมตัวอย่างตัวกรอง CSS นอกจากนี้ คุณยังสามารถสลับระหว่างรูปภาพตัวอย่างหลายรายการและองค์ประกอบ HTML เป็นตัวอย่าง และอัปโหลดของคุณ ภาพของตัวเองชั่วคราว คุณยังสามารถดูตัวอย่างได้!
• เครื่องสร้างฟิลเตอร์ฉากหลัง CSSเครื่องมือกรองแบบดรอปด้านหลังที่ช่วยให้คุณสามารถใช้เอฟเฟกต์เบื้องหลังองค์ประกอบที่ระบุได้ ความเบลอ ความสว่าง คอนทราสต์ ระดับสีเทา การหมุนเฉดสี กลับด้าน ความอิ่มตัว ซีเปีย เงา คุณสามารถระบุได้หลายรายการ (เงา) และอื่นๆ สำหรับผู้ที่ไม่ทราบวิธีใช้งาน เราได้เตรียมตัวอย่างตัวกรอง CSS นอกจากนี้ คุณยังสามารถสลับระหว่างรูปภาพตัวอย่างหลายรายการและองค์ประกอบ HTML เป็นตัวอย่าง และอัปโหลดของคุณ ภาพของตัวเองชั่วคราว คุณยังสามารถดูตัวอย่างได้!
• CSS Transform 2D/3D Generatorเป็นเครื่องมือสำหรับจำลองผลลัพธ์การดำเนินการของ trasnsform ด้วยการใช้งานที่ใช้งานง่าย แปล (ย้าย) หมุน ปรับขนาด (ขยาย / ลดขนาด) เอียง (บิดเบี้ยว) ได้อย่างเป็นธรรมชาติในทิศทาง 2D / 3D นอกจากนี้ยังรองรับจุดเริ่มต้นการแปลง (แกนหมุน), มุมมอง (มุมมอง / มุมมอง), มุมมอง - ต้นกำเนิด (จุดที่หายไป) นอกจากนี้ องค์ประกอบเป้าหมายและแกน X, Y, Z ดั้งเดิมสามารถแสดงได้ด้วยสายตา
• CSS Transition Generatorเครื่องมือสร้างการเปลี่ยนแปลงสำหรับแอนิเมชั่นธรรมดา รองรับการค่อยๆ เปลี่ยน ระยะเวลา ดีเลย์ ฯลฯ คุณสามารถเลือกจากตัวอย่างและแก้ไขได้ คุณสามารถกำหนดสไตล์ก่อนและหลังภาพเคลื่อนไหวได้อย่างละเอียด เพื่อใช้จำลองการเปลี่ยนแปลงได้ นอกจากนี้ คุณยังสามารถเปลี่ยนการเล่นย้อนกลับและความเร็วในการเล่นของภาพเคลื่อนไหวได้ คุณยังสามารถหยุดตรงกลางหรือจำลองสถานะขององค์ประกอบในเวลาใดก็ได้ที่ผ่านไป

รายการเครื่องมืออื่นๆ

• ตัวนับอักขระเป็นเครื่องมือในการนับอักขระ ตัวเลข สัญลักษณ์ ตัวแบ่งบรรทัด ฯลฯ ที่วัดแบบเรียลไทม์ โปรดใช้เมื่อคุณนึกถึงมาตรการ SEO และจำนวนอักขระในบทความในบล็อก นอกจากนี้ยังรองรับการเปล่งเสียงแบบครึ่งความกว้าง เครื่องหมายเสียงและเครื่องหมายเสียงกึ่งเปล่งเสียง / คู่ตัวแทน

คำอธิบายของคุณสมบัติ CSS แต่ละรายการ

กล่องเงา

คุณสมบัติ box-shadow ช่วยให้คุณสามารถตั้งค่าเงาบนองค์ประกอบได้

แต่ละค่าสามารถระบุได้ดังนี้
กล่องเงา:เงาเข้าด้านใน(แทรก)ปริมาณการกระจัดในแนวนอนปริมาณการกระจัดในแนวตั้งจำนวนเงาที่เบลอขนาดเงาสีเงา

• ค่าลบสำหรับปริมาณการกระจัดในแนวนอนปริมาณการกระจัดในแนวตั้งจะวางไว้ในแนวตั้งด้านบนและแนวนอนไปทางซ้ายตามลำดับ
• ค่าบวกสำหรับขนาดเงาทำให้มีขนาดใหญ่ขึ้น ในขณะที่ค่าลบจะทำให้มีขนาดเล็กลง

คำอธิบายตัวอย่าง) กล่องเงา: ใส่ 2px 2px 3px 4px #000;

หากไม่จำเป็นต้องใส่คำอธิบายก็ไม่จำเป็นเช่นกัน

• หากมีการระบุเพียงสองค่า ค่าเหล่านั้นจะถูกตั้งค่าเป็นปริมาณการกระจัดในแนวนอนปริมาณการกระจัดในแนวตั้ง
• หากระบุเพียงสามค่า ค่าที่สามเพิ่มเติมจะถูกตั้งค่าเป็นจำนวนเงาที่เบลอ
• หากระบุเพียงสี่ค่า ค่าที่สี่เพิ่มเติมจะถูกตั้งค่าเป็นขนาดเงา

ค่าเริ่มต้นสำหรับปริมาณการกระจัดในแนวนอนปริมาณการกระจัดในแนวตั้งจำนวนเงาที่เบลอขนาดเงาเป็น 0 สำหรับแต่ละ
ค่าเริ่มต้นสำหรับสีเงาคือ currentColor (ค่าที่ตั้งไว้สำหรับสี)

หากระบุขอบเขตรัศมี เงาจะสะท้อนการปัดเศษนั้นด้วย

หากระบุขอบเขตรัศมี เงาจะสะท้อนการปัดเศษนั้นด้วย
หากต้องการระบุเงาหลายรายการ ให้คั่นด้วยเครื่องหมายจุลภาค "," เงาแรกที่ระบุจะอยู่เบื้องหน้า
คำอธิบายตัวอย่าง) กล่องเงา: ใส่ 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

ใช้ text-shadow เพื่อเพิ่มเงาให้กับข้อความ

ชายแดน

คุณสมบัติ border ช่วยให้คุณสามารถกำหนดเส้นขอบ (ขอบเขตองค์ประกอบ) บนองค์ประกอบได้

แต่ละค่า (ค่า) สามารถระบุได้ดังนี้
ชายแดน:ความกว้างของเส้นขอบประเภทเส้นขอบสีเส้นขอบ
คำอธิบายตัวอย่าง) เส้นขอบ: 1px solid #333
ลำดับของค่าไม่สำคัญ ค่าเริ่มต้นของเส้นขอบคือไม่มี

แต่ละค่าสามารถระบุแยกกันได้เช่นกัน

• เส้นขอบกว้าง
• สไตล์เส้นขอบ
• เส้นขอบสี

คุณสมบัติ.
คำอธิบายตัวอย่าง) ความกว้างของเส้นขอบ: 10px;
คำอธิบายตัวอย่าง) รูปแบบเส้นขอบ: ทึบ;

แต่ละสิ่งเหล่านี้สามารถมุ่งเน้นได้
ตัวอย่างความกว้างของเส้นขอบ

• เส้นขอบด้านบนกว้าง
• เส้นขอบขวาความกว้าง
• เส้นขอบด้านล่างกว้าง
• เส้นขอบซ้ายความกว้าง

ตัวอย่างรูปแบบเส้นขอบ

• สไตล์เส้นขอบด้านบน
• สไตล์เส้นขอบขวา
• สไตล์เส้นขอบด้านล่าง
• สไตล์เส้นขอบซ้าย

ตัวอย่างสีขอบ

• ขอบด้านบนสี
• เส้นขอบขวาสี
• ขอบล่างสี
• ขอบซ้ายสี

นอกจากค่าทึบแล้ว ยังสามารถระบุค่าต่อไปนี้สำหรับลักษณะเส้นขอบได้

• สองเท่า. เส้นตรงสองเส้น (เส้นคู่) จะปรากฏขึ้น และความกว้างทั้งหมดคือขนาด px ที่ระบุในความกว้างของเส้นขอบ
• ร่อง. จะแสดงเป็นเส้นหดสามมิติ เป็นการย้อนกลับของสันเขา
• สันเขา ปรากฏเป็นเส้นยกสามมิติตรงข้ามกับร่อง
• สิ่งที่ใส่เข้าไป เส้นบนและซ้ายจะดูเข้มขึ้น เส้นล่างและขวาจะดูจางลง และทั้งภาพจะดูราวกับถูกกดทับแบบสามมิติ นี่คือสิ่งที่ตรงกันข้ามกับการเริ่มต้น
• เริ่มแรก เส้นบนและซ้ายจะดูจางลง ในขณะที่เส้นล่างและขวาจะเข้มขึ้น ทำให้เกิดเป็นสันสามมิติ สิ่งที่ตรงกันข้ามกับสิ่งที่ใส่เข้าไป
• ประ แสดงเส้นประ แสดงชุดของขีดกลางหรือส่วนของเส้นตรงที่มีมุมสี่เหลี่ยมจัตุรัสสั้นๆ
• จุด จะแสดงเป็นเส้นประ โดยเฉพาะอย่างยิ่ง จะแสดงชุดจุดกลม รัศมีของจุดคือครึ่งหนึ่งของความกว้างเส้นขอบที่คำนวณได้ของขอบเดียวกัน

อย่างไรก็ตาม โปรดทราบว่าจุด เส้นประ ฯลฯ อาจแสดงผลแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน

คุณยังสามารถกำหนดทิศทางที่จะระบุเส้นขอบได้

• ขอบด้านบน
• ขอบล่าง
• เส้นขอบขวา
• ขอบซ้าย

คำอธิบายตัวอย่าง) ขอบซ้าย: 10px solid #333;

รัศมีชายแดน

คุณสมบัติ border-radius ช่วยให้คุณสามารถปัดเศษมุมขององค์ประกอบได้
การตั้งค่ารัศมีหนึ่งอันจะทำให้ได้มุมวงกลม การตั้งค่ารัศมีสองอันส่งผลให้มุมเป็นวงรี

โดยสามารถระบุค่าเป็นหน่วย px, em, % เป็นต้น และสามารถระบุได้ดังนี้
คำอธิบายตัวอย่าง) รัศมีเส้นขอบ: 5px;
ค่าเริ่มต้นคือ 0

แต่ละตำแหน่งจากสี่ตำแหน่ง (ซ้ายบน ขวาบน ขวาล่าง และซ้ายล่าง) สามารถระบุได้ด้วยคุณสมบัติต่อไปนี้

• ขอบบนซ้ายรัศมี
• ขอบบนขวา-รัศมี
• เส้นขอบล่างขวารัศมี
• เส้นขอบล่างซ้ายรัศมี

คำอธิบายตัวอย่าง) รัศมีขอบบนซ้าย: 10px;

ก่อนหลัง

ก่อนและหลังสร้างองค์ประกอบหลอกเป็นลูกขององค์ประกอบ
before ถูกสร้างขึ้นเป็นองค์ประกอบลูกแรกขององค์ประกอบ และหลังเป็นองค์ประกอบลูกสุดท้ายขององค์ประกอบ
นอกจากนี้ จำเป็นต้องมีคุณสมบัติเนื้อหาด้วย
เมื่ออธิบาย "before" จะมีเครื่องหมาย uma (โคลอน) อยู่ข้างหน้า
อย่างไรก็ตาม เพื่อแยกความแตกต่างจากคลาสหลอก จึงมักอธิบายด้วยเครื่องหมายทวิภาคสองตัว
คำอธิบายตัวอย่าง)
.ทดสอบ::ก่อน {
เนื้อหา: "";
}

นอกจากสตริงแล้ว ยังสามารถแทรกเครื่องหมายคำพูด ตัวนับ รูปภาพ ฯลฯ ในคุณสมบัติเนื้อหาได้
เนื่องจากถูกสร้างขึ้นเป็นองค์ประกอบแบบอินไลน์ จึงต้องแปลงเป็นองค์ประกอบบล็อกเมื่อระบุขนาด เช่น ความกว้าง

เนื่องจากโปรแกรมอ่านหน้าจออาจไม่สามารถเข้าถึงองค์ประกอบหลอกได้ จึงจำเป็นต้องพิจารณาว่าควรใช้องค์ประกอบหลอกสำหรับข้อมูลที่จำเป็นสำหรับผู้ใช้หรือไม่

โฮเวอร์

โฮเวอร์อนุญาตให้ผู้ใช้ระบุพฤติกรรมของเคอร์เซอร์ (ตัวชี้เมาส์) เมื่อโฮเวอร์ (ผ่าน) องค์ประกอบ
คำอธิบายตัวอย่าง)
.test:โฮเวอร์ {
สี: สีแดง;
}

หากคุณต้องการทำให้ภาพเคลื่อนไหวเคลื่อนไหว ให้ระบุคุณสมบัติการเปลี่ยนแปลงให้กับตัวเลือกก่อนภาพเคลื่อนไหว เพื่อให้ภาพเคลื่อนไหวเกิดขึ้นเมื่อวางเมาส์เหนือและเมื่อปล่อยเมาส์เหนือ
คำอธิบายตัวอย่าง)
.ทดสอบ {
การเปลี่ยนแปลง: .3s;
}
.test:โฮเวอร์ {
สี: สีแดง;
}

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

ข้อความเงา

คุณสมบัติ text-shadow ช่วยให้คุณสามารถตั้งค่าเงาให้กับตัวละคร (ข้อความ)

แต่ละค่า (ค่า) สามารถระบุได้ดังนี้
ข้อความเงา:การกระจัดในแนวนอนการกระจัดในแนวตั้งจำนวนเงาเบลอสีเงา
คำอธิบายตัวอย่าง) ข้อความ-เงา: 2px 2px 3px rgba(0, 0, 0, .5)

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

สามารถระบุเงาได้หลายแบบ
หากต้องการระบุเงาหลายรายการ ให้คั่นด้วยเครื่องหมายจุลภาค "," เงาแรกที่ระบุจะอยู่เบื้องหน้า
คำอธิบายตัวอย่าง) ข้อความเงา: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

แปลง

คุณสมบัติการแปลงช่วยให้สามารถแปลงองค์ประกอบได้
มีค่าหลักสี่ค่าสำหรับการแปลงที่สามารถระบุได้

• แปลภาษา
• หมุน
• มาตราส่วน
• ลาด

แม้ว่าจะสามารถระบุทีละรายการได้ แต่หากระบุรวมกัน ให้คั่นด้วยช่องว่าง
คำอธิบายตัวอย่าง) การแปลง: ขนาด (1.1) เอียง (10deg);
ค่าเริ่มต้นคือไม่มี
หากมีการระบุองค์ประกอบหลายรายการ องค์ประกอบเหล่านั้นจะถูกนำไปใช้กับองค์ประกอบตามลำดับที่ระบุไว้

ค่าอื่นที่ไม่ใช่ค่าเอียงสามารถระบุได้ในทิศทางของแกน X, Y และ Z (3D) การเอียงสามารถระบุได้ในทิศทางของแกน X และ Y เท่านั้น
ตัวอย่างเช่น หากต้องการระบุเฉพาะแกน X สำหรับการแปล สามารถระบุสิ่งต่อไปนี้ได้
คำอธิบายตัวอย่าง) การแปลง: TranslateX(10px);

แต่ละการกำหนดสามารถระบุได้ดังต่อไปนี้
แปลภาษา

• แปล (ระยะการเดินทางของแกน X, ระยะการเดินทางของแกน Y)
• แปล X (ระยะการเคลื่อนที่ของแกน X)
• แปล Y (ระยะการเดินทางของแกน Y)
• แปล Z (ระยะการเคลื่อนที่ของแกน Z)
• แปล 3d (ระยะการเคลื่อนที่ของแกน X, ระยะการเคลื่อนที่ของแกน Y, ระยะการเคลื่อนที่ของแกน Z)

มาตราส่วน

• สเกล (อัตราส่วนสเกลในทิศทางแกน X, อัตราส่วนสเกลในทิศทางแกน Y)
• scaleX (อัตราส่วนสเกลในทิศทางแกน X)
• สเกลY(อัตราส่วนสเกลในทิศทางแกน Y)
• scaleZ (อัตราส่วนสเกลในทิศทางแกน Z)
• scale3d(อัตราส่วนสเกลในทิศทางแกน X, อัตราส่วนสเกลในทิศทางแกน Y, อัตราส่วนสเกลในทิศทางแกน Z)

หมุน

• หมุน (มุมการหมุน)
• หมุน3d(มุมการหมุนรอบแกน X, มุมการหมุนรอบแกน Y, มุมการหมุนรอบแกน Z, มุมการหมุน)
• RotX (มุมการหมุนรอบแกน X)
• หมุนY (มุมการหมุนรอบแกน Y)
• RotZ (มุมการหมุนรอบแกน Z)

ลาด

• เอียง (มุมเอียงของแกน X, มุมเอียงของแกน Y)
• skewX (มุมเอียงของแกน X)
• เอียง (มุมเอียงของแกน Y)

ตำแหน่ง

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

คุณสมบัติตำแหน่งสามารถตั้งค่าเป็นค่าต่อไปนี้

• สัมพันธ์：ตำแหน่งขององค์ประกอบนั้นจะไม่เปลี่ยนแปลงแม้ว่าจะระบุไว้ก็ตาม แต่จะไม่เหมือนกับคงที่ (ค่าเริ่มต้น) ซึ่งจะได้รับผลกระทบหากระบุด้านบน ฯลฯ
• สัมบูรณ์：หากมีการระบุองค์ประกอบบรรพบุรุษที่ไม่ใช่แบบคงที่ องค์ประกอบนั้นจะถูกวางไว้โดยสัมพันธ์กับองค์ประกอบบรรพบุรุษที่ระบุที่ใกล้ที่สุด
• คงที่：องค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับหน้าจอ
  ตำแหน่งไม่เปลี่ยนแปลงเมื่อเลื่อน
• เหนียว：เหมือนคงที่ มันจะแก้ไขตำแหน่งเมื่อเลื่อน แต่ไม่สามารถออกจากขอบเขตขององค์ประกอบหลักได้

คำอธิบายตัวอย่าง) ตำแหน่ง: ญาติ;

การไล่สี

มีวิธีการไล่ระดับสีหลักสามวิธีใน CSS ที่สามารถใช้เพื่อแสดงการไล่ระดับสีได้
คุณสามารถระบุพื้นหลังโดยทั่วไปได้ทุกที่ที่คุณสามารถระบุพื้นหลังได้
เบราว์เซอร์สร้างการไล่ระดับสี ดังนั้นจึงดูดีขึ้นเมื่อขยายใหญ่ขึ้นและสามารถปรับขนาดได้ทันที โดยเฉพาะมีสามอย่าง

• การไล่ระดับสีเชิงเส้น
  มันแสดงถึงการไล่ระดับสีบนเส้นตรง โดยพื้นฐานแล้ว สามารถระบุจุดการเปลี่ยนสีได้หลายจุดระหว่าง 0% ~ 100% และสามารถระบุมุมของการไล่ระดับสีได้ด้วย
  สามารถระบุสิ่งต่อไปนี้ได้: linear-gradient(มุมหรือทิศทางการไล่ระดับสี,สีเริ่มต้น,สีระหว่างทาง (ผ่าน),สีสุดท้าย)
  มุมหรือทิศทางของการไล่ระดับสีไม่จำเป็น แต่สามารถระบุเป็นมุมได้ เช่น 60deg (โดยที่ deg หมายถึง องศา) หรือเป็นข้อความ เช่น จากบน ไปทางขวา ล่าง ซ้าย เป็นต้น ค่าเริ่มต้นคือ 180deg ( เช่นเดียวกับการระบุด้านล่าง)
  ที่สีระหว่างทาง (ผ่าน)สามารถละเว้นได้ หากมีการระบุสีกลาง คุณสามารถระบุตำแหน่งเริ่มต้นของแต่ละสีได้โดยการแยกแต่ละสีด้วยการเว้นวรรคเดียว หากจำเป็น
  คำอธิบายตัวอย่าง) ภาพพื้นหลัง: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 50%, rgba(35, 102, 247, 1) 90 %);
• รัศมีลาด
  เช่นเดียวกับการไล่ระดับสีเชิงเส้น สามารถระบุจุดการเปลี่ยนสีได้หลายสีระหว่าง 0% ถึง 100%
  สามารถระบุสิ่งต่อไปนี้ได้: รัศมี-การไล่ระดับสี(วงรีหรือวงกลม ตำแหน่งตั้งแต่ต้นจนจบการไล่ระดับสีที่ตำแหน่งกึ่งกลาง,เริ่มสี,สีระหว่างทาง (ผ่าน),สีสุดท้าย);
  คุณยังสามารถเลือกกวงกลมหรือวงรีด้วยค่าเริ่มต้นของวงรี
  ตำแหน่งตั้งแต่ต้นจนจบการไล่สีสามารถระบุได้จากสี่ตัวเลือก ได้แก่ ด้านที่ใกล้ที่สุด ด้านไกลที่สุด มุมที่ใกล้ที่สุด และมุมที่ไกลที่สุด โดยที่มุมไกลที่สุดเป็นค่าเริ่มต้น
  ตำแหน่งกึ่งกลาง(ตำแหน่งเริ่มต้นที่การไล่ระดับสีเริ่มต้น) สามารถละเว้นได้หากค่าเริ่มต้นอยู่ตรงกลางบน ล่าง ซ้าย หรือขวาขององค์ประกอบ (X: 50%, Y: 50%)
  เช่นเดียวกับการไล่ระดับสีเชิงเส้นสีระหว่างทาง (ผ่าน)สามารถละเว้นได้ และหากจำเป็น สามารถระบุตำแหน่งเริ่มต้นของแต่ละสีได้โดยการแยกแต่ละสีด้วยช่องว่างครึ่งหนึ่ง
  คำอธิบายตัวอย่าง) ภาพพื้นหลัง: การไล่ระดับสีแบบรัศมี (วงกลมด้านที่ไกลที่สุดที่ 17% 89%, rgba (247, 166, 12, 1) 10%, rgba (255, 34, 87, 1) 50%, rgba (35 , 102, 247, 1) 90%);
• รูปกรวยลาด
  มันแสดงถึงการไล่ระดับสีในรูปแบบของพัด โดยพื้นฐานแล้ว คุณสามารถระบุจุดการเปลี่ยนสีได้หลายจุดระหว่าง 0 ~ 360 องศา (มุมองศา) และคุณยังสามารถระบุมุมเริ่มต้นของการไล่ระดับสีได้อีกด้วย
  สามารถระบุข้อมูลต่อไปนี้ได้: conic-gradient(fromมุมเริ่มต้นของการไล่ระดับสีที่ตำแหน่งกึ่งกลาง,เริ่มสี,สีระหว่างทาง (ผ่าน),สีสุดท้าย)
  ที่มุมเริ่มต้นของการไล่ระดับสีเป็นทางเลือกและค่าเริ่มต้นคือ 0deg
  ที่ตำแหน่งกึ่งกลางเช่นเดียวกับการไล่ระดับสีแบบรัศมี สามารถละเว้นได้โดยค่าเริ่มต้นคือด้านบน ล่าง ซ้าย ขวา และกึ่งกลางขององค์ประกอบ (X: 50%, Y: 50%)
  เช่นเดียวกับการไล่ระดับสีเชิงเส้นสีกลาง (ผ่าน)สามารถละเว้นได้ และหากจำเป็น สามารถระบุตำแหน่งเริ่มต้นของแต่ละสีได้โดยการแยกแต่ละสีด้วยช่องว่างครึ่งหนึ่ง
  คำอธิบายตัวอย่าง) ภาพพื้นหลัง: รูปกรวยไล่ระดับสี (จาก 15 องศาที่ 26% 30%, rgba (247, 166, 12, 1) 36deg, rgba (255, 34, 87, 1) 180deg, rgba (35, 102, 247 , 1) 324องศา);

แม้ว่ามักจะระบุผิดพลาดในคุณสมบัติสีพื้นหลัง แต่ก็มีการระบุไว้ในคุณสมบัติพื้นหลังภาพ
คำอธิบายตัวอย่าง) ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (สีแดง, สีน้ำเงิน);

คุณยังสามารถระบุการไล่ระดับสีแบบทำซ้ำด้วยคุณสมบัติการไล่ระดับสีแบบทำซ้ำเชิงเส้น การไล่ระดับสีแบบรัศมีซ้ำ และการไล่ระดับสีแบบกรวยแบบซ้ำได้

การไล่ระดับสีเหล่านี้สามารถระบุได้หลายเลเยอร์ โดยคั่นด้วยเครื่องหมายจุลภาค "," การไล่ระดับสีแรกที่ระบุจะเป็นการไล่ระดับสีด้านบน (เลเยอร์) ระวังอย่าเพิ่มความโปร่งใสด้วย rgba หรือวิธีอื่น ไม่เช่นนั้นจะมองไม่เห็นการไล่ระดับสีด้านล่าง
อันแรกที่ระบุจะเป็นค่าสูงสุดและอันสุดท้ายจะเป็นค่าต่ำสุด
คำอธิบายตัวอย่าง) พื้นหลัง: การไล่ระดับสีเชิงเส้น (217deg, rgba (255,0,0,.8), rgba (255,0,0,0) 70.71%), การไล่ระดับสีเชิงเส้น (127deg, rgba (0,255,0, 8), rgba (0,255,0,0) 70.71%), การไล่ระดับสีเชิงเส้น (336deg, rgba (0,0,255,.8), rgba (0,0,255,0) 70.71%);
ตัดตอนมาจากเอกสารเว็บ MDN

สี

เมื่อระบุสีบนเว็บ มักใช้ "HEX," "RGB" และ "HSL"

ประการแรก HEX ที่คุณเห็นบ่อยที่สุด (เลขฐานสิบหก) เป็นวิธีการแสดงสีในรูปแบบเลขฐานสิบหก แสดงไว้ในรูปแบบ #1234ab
ตัวเลขหกหลักหลัง # คือค่าของสีแดง (หลักที่ 1~2), สีเขียว (หลักที่ 3~4) และสีน้ำเงิน (หลักที่ 5~6) สีต่างๆ จะแสดงตามความเข้มของสีแต่ละค่า
หากแต่ละตัวเลขในสองหลักมีค่าเท่ากัน สามารถใช้นิพจน์สามหลักได้ ตัวอย่างเช่น #aa9933 สามารถแสดงเป็น #a93 ได้
หากคุณต้องการระบุความโปร่งใสเป็นเลขฐานสิบหก คุณสามารถใช้ตัวเลข 8 หลักได้ โดยที่ตัวเลขที่ 7 ถึงหลักที่ 8 จะเป็นเลขฐานสิบหกด้วย ตัวอย่างเช่น สามารถระบุความโปร่งใส 80% ด้วย #aa9933CC

RGB เช่นเดียวกับ HEX สามารถแสดงสีเป็นสีแดง เขียว และน้ำเงินได้
แต่ละค่าสามารถระบุได้ในช่วง 0 ~ 255 และแสดงเป็น rgb(ค่าสีแดง,ค่าสีเขียว,ค่าสีน้ำเงิน).
คำอธิบายตัวอย่าง) rgb(10, 50, 220)
หากคุณต้องการระบุความโปร่งใส คุณสามารถใช้ rgba(ค่าสีแดง,ค่าสีเขียว,ค่าสีน้ำเงิน,ความโปร่งใส(อัลฟา)).
ค่าอัลฟ่าสามารถระบุได้ในช่วง 0~1 เช่น rgba(0, 0, 255, .5)

HSL ย่อมาจาก Hue, Saturation และ Lightness
เมื่อระบุสีใน HSL สีจะถูกระบุโดยใช้องค์ประกอบทั้งสามนี้ เมื่อกำหนดเฉดสี (ประเภทและเฉดสี) แล้ว จะสามารถกำหนดสีได้โดยการปรับความอิ่มตัวและความสว่าง ซึ่งใช้งานง่ายกว่า RGB
สามารถระบุได้ดังต่อไปนี้: hsl(สีสัน,ความอิ่มตัว,ความเบา)

• ฮิว：โดยทั่วไป คุณสามารถระบุตัวเลขได้ระหว่าง 0 ถึง 360 หากคุณระบุตัวเลขที่เกินช่วงนี้ จะถือเป็นเส้นรอบวง ตัวอย่างเช่น หากคุณระบุ 380 ก็จะเท่ากับ 20
• Lightness：คุณสามารถระบุค่าระหว่าง 0 ถึง 100%; ยิ่งใกล้ 100% ภาพก็จะยิ่งสว่างขึ้น ในทางกลับกัน ยิ่งค่าเข้าใกล้ 0% มากเท่าใด ค่าก็จะยิ่งเข้มขึ้นเท่านั้น

หากต้องการระบุความโปร่งใสก็มี hsla เช่นเดียวกับ rgba สุดท้าย a แสดงถึงอัลฟ่า (ความโปร่งใส)
ค่าอัลฟ่าสามารถระบุได้ตั้งแต่ 0 ถึง 1 เช่น hsla(80, 80%, 50%, .5)

ลิงค์