เอฟเฟกต์ภาพ

ความลึกและพื้นผิว

• วางเงาหลายชั้นเพื่อให้ได้เอฟเฟกต์ความลึกที่นุ่มนวลและสมจริง
• ใช้ filter: drop-shadow() แทน box-shadow สำหรับรูปร่างที่ไม่ใช่สี่เหลี่ยมผืนผ้าหรือ PNG แบบโปร่งใส
• ใช้ mix-blend-mode และ background-blend-mode สำหรับการวางซ้อนแสง (จำกัดขอบเขตด้วย isolation: isolate)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

การไล่ระดับสีและcolor-mix()

ใช้ in oklch หรือ in oklab เพื่อระบุขอบเขตสีการประมาณค่าในช่วงสำหรับการไล่ระดับสีหรือ color-mix() อย่างชัดเจน

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

Fallback

เบราว์เซอร์บางรุ่นที่เปิดตัวก่อนปี 2024 ไม่รองรับพื้นที่การประมาณค่าสีแบบไล่ระดับสี หากต้องการรองรับเบราว์เซอร์เหล่านี้ ให้ใช้โทเค็นเฉพาะเมื่อการใช้งานปลอดภัยโดยการกำหนดตัวแปร ดังนี้

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

จากนั้นใช้คำว่า "ชอบ" ดังนี้

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• สำคัญ: หากใช้เทคนิคนี้ โปรดตรวจสอบว่ามีข้อความนำการไล่ระดับสีที่ไม่ว่างเปล่าอยู่เสมอโดยไม่มีเทคนิคนี้ ไม่เช่นนั้นจะเกิดข้อผิดพลาดทางไวยากรณ์ในเบราว์เซอร์รุ่นเก่า
• คุณไม่จำเป็นต้องใช้สิ่งนี้สำหรับ color-mix() หากเบราว์เซอร์รองรับ color-mix() ก็จะรองรับอาร์กิวเมนต์ in <color-space> ด้วย

รูปแบบ

คุณสร้างรูปแบบได้หลายรูปแบบผ่านการไล่ระดับสี CSS + จุดหยุดแบบคงที่ ซึ่งมีความยืดหยุ่นและมีประสิทธิภาพมากกว่า SVG หรือรูปภาพภายนอก เนื่องจากเข้าถึงตัวแปร CSS และความยาวจากบริบทโดยรอบได้ คุณไม่จำเป็นต้องระบุตำแหน่งซ้ำ 2 ครั้ง เพียงใช้ 0 หรือ 0% แล้วการแก้ไขการไล่ระดับสีจะปรับตำแหน่งให้โดยอัตโนมัติ

ดูตัวอย่างด้านล่าง

แถบแนวตั้งกว้าง 1em แต่ละแถบ:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

แถบแนวทแยงที่มีความกว้าง 1em แต่ละแถบ:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

รูปแบบกระดานหมากรุกที่มีสี่เหลี่ยมจัตุรัส 1em รูป:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

ลายจุดที่มีจุดรัศมี .5em ห่างกัน 2em (แนวนอน/แนวตั้ง - คูณด้วย sqrt(2) สำหรับระยะทแยงมุม):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

แผนภูมิวงกลมแบบง่าย:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

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