เครื่องสร้างพื้นหลังลวดลาย

CSS ล้วน ไม่มีไฟล์ภาพ

ลวดลายทุกแบบวาดด้วยเกรเดียนต์ CSS บน background-color สีทึบ จึงไม่มีไฟล์ภาพที่ต้องโฮสต์หรือเรียกเพิ่ม ตัวอย่างลายจุดมีลักษณะดังนี้:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

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

แต่ละลวดลายสร้างขึ้นจากอะไร

เคล็ดลับเรื่องสีและคอนทราสต์

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

ใช้ที่ไหนได้บ้าง

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

เนื่องจากลวดลายเป็น CSS ไม่ใช่ไฟล์พื้นหลังแยกต่างหาก จึงไม่เพิ่มคำขอไฟล์ภาพ และยังแก้ค่าเกรเดียนต์ ขนาด และตำแหน่งภายหลังได้ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์