Hướng dẫn đầy đủ về CSS Gradients | Thủ thuật CSS – Gradient trong css là gì

Một gradient xuyên tâm cũng không phải bắt đầu ở tâm mặc định. Nó có thể chỉ định một điểm nhất định bằng cách sử dụng at như một phần của tham số đầu tiên, như:

  .gradient {
  hình nền:
    radial-gradient (
      vòng tròn ở trên cùng bên phải,
      # ff8a00,
      # e52e71
    );
}  

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

10 *

36 < / p>

10

12

15.4

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

4 *

15.4

Độ dốc CSS conic

Một gradient hình nón tương tự như một gradient xuyên tâm. Cả hai đều là hình tròn và sử dụng tâm của phần tử làm điểm nguồn cho các điểm dừng màu. Tuy nhiên, khi màu dừng của một gradient xuyên tâm xuất hiện từ tâm của vòng tròn, thì một gradient hình nón sẽ đặt chúng xung quanh vòng tròn.

Chúng được gọi là "hình nón" vì chúng có xu hướng trông giống như hình dạng của một hình nón đang được nhìn từ trên xuống. Chà, ít nhất là khi có một góc riêng biệt được cung cấp và độ tương phản giữa các giá trị màu đủ lớn để tạo ra sự khác biệt.

Cú pháp

Cú pháp gradient conic dễ hiểu hơn bằng tiếng Anh đơn giản:

Tạo conic-gradient nằm ở [một số điểm] bắt đầu bằng [một màu] ở một số góc độ và kết thúc bằng [màu khác] ở [một số góc độ]

Đây là cú pháp chính thức:

  conic-gradient (
  [từ & lt; angle & gt; ]? [tại & lt; vị trí & gt; ] ?,
  & lt; angle-color-stop-list & gt;
)  

Cách sử dụng

Ở cấp độ cơ bản nhất, nó trông giống như sau:

  .gradient {
  hình nền:
    conic-gradient (
      # ff8a00, # e52e71
    );
}  

Dự phòng nhúng CodePen

… trong đó giả định rằng vị trí của gradient bắt đầu ở chính giữa phần tử ( 50% 50% ) và được phân phối đồng đều giữa các giá trị màu giữa hai màu.

Chúng tôi có thể viết điều này theo một số cách khác, tất cả đều hợp lệ:

  .gradient {
  / * Ví dụ ban đầu * /
  background-image: conic-gradient (# ff8a00, # e52e71);
  / * Nêu rõ điểm trung tâm vị trí * /
  background-image: conic-gradient (ở 50% 50%, # ff8a00, # e52e71);
  / * Nêu rõ góc của màu bắt đầu * /
  background-image: conic-gradient (từ 0deg, # ff8a00, # e52e71);
  / * Nêu rõ góc của màu bắt đầu và vị trí điểm trung tâm * /
  background-image: conic-gradient (từ 0deg ở trung tâm, # ff8a00, # e52e71);
  / * Nêu rõ các góc của cả hai màu dưới dạng phần trăm thay vì độ * /
  background-image: conic-gradient (# ff8a00 0%, # ff8a00, # e52e71);
  / * Nêu rõ góc của màu bắt đầu theo độ và màu kết thúc bằng một lượt hoàn toàn của vòng tròn * /
  background-image: conic-gradient (# ff8a00 0deg, # e52e71 1turn);
}  

Nếu chúng tôi không chỉ định góc cho các màu, thì giả sử rằng gradient được chia đều giữa các màu, bắt đầu ở 0deg và kết thúc ở 360deg . Điều đó tạo ra một "điểm dừng" trong đó các màu sắc tương phản với nhau ở 0deg và 360deg . Nếu chúng tôi giới thiệu giá trị thứ ba, thì giá trị đó sẽ tạo ra một gradient mượt mà hơn và chúng tôi bắt đầu có được phối cảnh hình nón tuyệt đẹp đó.

  .gradient {
  hình nền:
    conic-gradient (
      # ff8a00,
      # e52e71,
      # ff8a00
    );
}  

Dự phòng nhúng CodePen

Chúng ta có thể giải trí với các gradient hình nón. Ví dụ: chúng tôi có thể sử dụng nó để tạo ra cùng một loại mẫu mà bạn có thể thấy trong công cụ chọn màu hoặc chỉ báo quả bóng bãi biển quay nổi tiếng của Mac:

  .conic-gradient {
  hình nền:
    conic-gradient (
      màu đỏ,
      màu vàng,
      Vôi,
      nước,
      màu xanh da trời,
      đỏ tươi,
      màu đỏ
    );
}  

Dự phòng nhúng CodePen

Hoặc, hãy thử biểu đồ hình tròn đơn giản bằng cách thêm các điểm dừng cố định giữa ba giá trị màu:

  .gradient {
  hình nền:
    conic-gradient (
      vôi 40%,
      màu vàng 0 70%,
      màu đỏ 0
    );
}  

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

69

83

Không

79

12.1

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

101

12.2-12.5

Các gradient CSS lặp lại

Lặp lại các gradient là một mẹo mà chúng tôi có thể làm với việc sử dụng quảng cáo color-stop trên linear-gradient () và radial-gradient () ký hiệu và cung cấp nó cho chúng tôi. Ý tưởng là chúng tôi có thể tạo các mẫu từ các gradient mà chúng tôi tạo ra và cho phép chúng lặp lại vô hạn.

Cú pháp

Có ba loại chuyển màu lặp lại, cả ba loại này hiện được hỗ trợ trong đặc điểm kỹ thuật chính thức và một loại nằm trong bản nháp đang hoạt động hiện tại. Cú pháp cho mỗi ký hiệu giống như kiểu gradient liên quan của nó. Ví dụ: repeat-linear-gradient () tuân theo cùng một cú pháp với linear-gradient () .

Gradient lặp lại Kí hiệu có liên quan Ví dụ repeat-linear-gradient linear-graadient repeat-linear-gradient ( 45deg, # ff8a00, # ff8a00 10px, # e52e71 10px, # e52e71 20px); repeat-radial-gradient radial-gradient repeat-radial -gradient (# ff8a00 0 8%, # e52e71 8% 16%); repeat-conic-gradient conic-gradient repeat-conic- gradient (từ 0deg, # ff8a00 0deg 30deg, # e52e71 30deg 60deg);

Cách sử dụng

Dưới đây là một gradient tuyến tính lặp lại xen kẽ giữa hai màu cứ sau mỗi 10 pixel ở một góc 45 độ:

  .gradient {
  hình nền:
    lặp lại-tuyến tính-gradient (
      45deg,
      # ff8a00,
      # ff8a00 10px,
      # e52e71 10px,
      # e52e71 20px
    );
}
 

Dự phòng nhúng CodePen

Chúng ta có thể làm điều tương tự, nhưng với một gradient xuyên tâm. Sự khác biệt? Bên cạnh ký hiệu, chúng tôi đang xác định hình dạng và điểm bắt đầu:

  .gradient {
  hình nền:
    lặp lại-radial-gradient (
      vòng tròn ở 0 0,
      # ff8a00,
      # ff8a00 10px,
      # e52e71 10px,
      # e52e71 20px
    );
}  

Dự phòng nhúng CodePen

Độ chuyển màu của conic không khác nhau nhiều! Một lần nữa, sự khác biệt lớn giữa gradient xuyên tâm và conic là các màu conic chuyển đổi xung quanh phần tử, trong đó các màu trong gradient xuyên tâm chuyển từ trung tâm của nguồn gradient.

  .gradient {
  hình nền:
    lặp lại-conic-gradient (
      từ 0deg,
      # ff8a00 0deg 30deg,
      # e52e71 30deg 60deg
  );
}  

Hỗ trợ trình duyệt

Điều này dành riêng cho các gradient lặp lại tuyến tính và xuyên tâm.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Edge

Safari

10 *

3.6 *

10

12

5.1 *

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

4 *

5.0-5.1 *

Hoa văn

Chúng tôi đã thấy cách các gradient có thể tạo ra các mẫu thú vị khi chúng tôi xem xét các gradient lặp lại. Nhưng có rất nhiều mẫu khác mà chúng ta có thể tạo ra! Giống như bàn cờ:

Dự phòng nhúng CodePen

Chúng tôi cũng có thể tạo mẫu chữ v có lặp lại:

Dự phòng nhúng CodePen

Chris có một đoạn mã tạo thành mẫu giấy đồ thị:

Dự phòng nhúng CodePen

Những mẫu này được ghi lại rất nhiều trên web, nhưng hãy xem Thư viện mẫu gradient CSS của Lea Verou để biết một số ví dụ thực sự hấp dẫn.

Gradient đường viền

Chúng tôi có thể tạo đường viền từ các gradient!

Dự phòng nhúng CodePen

Chúng tôi thậm chí có thể sử dụng thủ thuật hoa văn để có hiệu ứng đường viền vui nhộn:

Dự phòng nhúng CodePen

Hoặc, này, chúng tôi có thể đặt các điểm dừng để sử dụng hiệu ứng nội dung chồng chéo:

Dự phòng nhúng CodePen

Chuyển sắc động

Chúng tôi có thể sử dụng background-position tp để làm cho nó xuất hiện như thể sự chuyển đổi giữa các màu trong một gradient đang chuyển động.

Dự phòng nhúng CodePen

Tuy nhiên, như trường hợp của bất kỳ hoạt ảnh nào, hãy lưu ý đến khả năng tiếp cận, đặc biệt là những người nhạy cảm với chuyển động. Hãy xem phần Hỗ trợ tiếp cận để biết thêm.

Hãy xem bản trình diễn này của Marty! Đây là một cách sử dụng siêu thông minh của gradient xuyên tâm để mô phỏng ánh sáng mặt trời dựa trên vị trí của con trỏ chuột.

Dự phòng nhúng CodePen

Khả năng tiếp cận

Các gradient CSS nên xem xét sự tương phản giữa màu nền và màu nền trước, giống như cách bạn làm với background-color . Bí quyết là đảm bảo rằng tất cả các màu được sử dụng trong gradient và quá trình chuyển đổi giữa chúng không ảnh hưởng đến mức độ dễ đọc của bất kỳ nội dung nào nằm trên đó. Đó là lúc việc sử dụng công cụ kiểm tra độ tương phản trở nên hữu ích.

Thứ gì khác để xem? Ảnh động. Chuyển đổi giữa hai màu nền đồng nhất, chẳng hạn như khi di chuột, thường không phải là vấn đề. Nhưng nếu background-position được sử dụng để làm xuất hiện độ dốc đang di chuyển, thì bạn nên xem xét truy vấn phương tiện prefers-Reduce-motion để hoạt ảnh được phân phát cho đúng người dùng.

Đặc điểm

Thuộc tính liên quan