Hiệu ứng hình ảnh

Tính năng web: box-shadow filter mix-blend-mode background-blend-mode isolation Gradients Gradient interpolation Conic gradients color-mix() Oklab and OkLCh @supports Custom properties aspect-ratio

Độ sâu và kết cấu

  • Xếp chồng nhiều bóng để tạo hiệu ứng chiều sâu mềm mại và chân thực.
  • Sử dụng filter: drop-shadow() thay vì box-shadow cho các hình dạng không phải hình chữ nhật hoặc PNG trong suốt.
  • Sử dụng mix-blend-mode và background-blend-mode cho lớp phủ ánh sáng (giới hạn phạm vi bằng isolation: isolate)
.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Chuyển màu và color-mix()

Sử dụng in oklch hoặc in oklab để chỉ định rõ ràng không gian màu sắc nội suy cho dải màu hoặc color-mix().

  • in oklch giữ sắc độ tốt hơn nhưng có thể dễ dàng vượt ra ngoài gam màu của thiết bị, đặc biệt là khi có sự khác biệt lớn hơn giữa các màu
  • in oklab dễ dàng nằm trong gam màu hơn (giả sử các điểm cuối nằm trong gam màu) nhưng có thể tạo ra màu sắc bị nhạt đi ở giữa, đặc biệt là khi nội suy giữa các sắc thái màu đối lập.
  • KHÔNG sử dụng in srgb trừ phi bạn có lý do cụ thể để làm như vậy (ví dụ: bạn đang tạo một công cụ chọn màu cần nội suy trong srgb).

Dự phòng

Một số trình duyệt trước năm 2024 không hỗ trợ không gian nội suy màu chuyển màu. Để hỗ trợ các trình duyệt này, hãy chỉ sử dụng mã thông báo khi việc sử dụng mã thông báo đó là an toàn bằng cách xác định một biến:

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

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

Sau đó, hãy sử dụng như sau:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}
  • Quan trọng: Nếu bạn sử dụng kỹ thuật này, hãy đảm bảo luôn có một chỉ dẫn mở đầu về dải chuyển màu không trống, nếu không, lỗi cú pháp sẽ xảy ra trong các trình duyệt cũ.
  • Bạn KHÔNG cần làm việc này cho color-mix(). Nếu một trình duyệt hỗ trợ color-mix(), thì trình duyệt đó cũng hỗ trợ đối số in <color-space>.

Mẫu

Bạn có thể tạo nhiều mẫu thông qua dải chuyển màu CSS + điểm dừng cứng. Các mẫu này có thể linh hoạt và hiệu quả hơn SVG hoặc hình ảnh bên ngoài vì chúng có thể truy cập vào các biến và độ dài CSS từ ngữ cảnh xung quanh. Bạn không cần lặp lại vị trí hai lần, chỉ cần sử dụng 0 hoặc 0% và tính năng sửa lỗi chuyển màu sẽ tự động điều chỉnh.

Xem ví dụ bên dưới.

Các sọc dọc có chiều rộng 1em:

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

Sọc chéo, mỗi sọc rộng 1em:

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

Mẫu bàn cờ có 1em ô vuông:

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

Chấm bi có bán kính .5em, khoảng cách giữa các chấm là 2em (theo chiều ngang/chiều dọc — nhân với sqrt(2) để tính khoảng cách theo đường chéo):

--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);

Biểu đồ hình tròn đơn giản:

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

Quan trọng: Khi sử dụng dải chuyển màu để kết xuất biểu đồ, hãy đảm bảo có văn bản dự phòng cho trình đọc màn hình. BẮT BUỘC: Bạn PHẢI cung cấp một bảng dữ liệu ngữ nghĩa làm phương án thay thế dễ tiếp cận, như được trình bày chi tiết trong Nguyên tắc lập trình hỗ trợ tiếp cận theo nguyên tắc về văn bản và nội dung nghe nhìn thay thế.