Độ dốc màu văn bản CSS

Linear-gradient là một loại kiểu dáng văn bản trong đó văn bản được lấp đầy bằng mã màu gradient tuyến tính. Những loại hiệu ứng này thường được sử dụng trong các trang web hoặc ứng dụng có chủ đề tối để làm cho văn bản trông hấp dẫn và đậm nét hơn. Chúng gần như phù hợp với các chủ đề tối và không phù hợp với các chủ đề nhẹ hơn

Cách tiếp cận. Vui lòng tham khảo phương thức linear-gradient() để tạo nền gradient và sau đó sử dụng các thuộc tính webkit để phủ nền đó bằng văn bản của chúng tôi

Chỉ cần đảm bảo không lạm dụng nó. Không bao giờ được sử dụng chuyển màu cho văn bản dài hơn. Thay vào đó, hãy sử dụng chúng để làm cho tiêu đề hoặc các từ cụ thể bắt mắt hơn

Điều có thể làm bạn ngạc nhiên — đặc biệt nếu bạn đã có kinh nghiệm trước đó với các công cụ thiết kế — là bạn không thể trực tiếp đặt chuyển màu làm màu văn bản. Ví dụ: color: linear-gradient(yellow, red) sẽ không hoạt động

Nhưng văn bản chuyển màu có thể đạt được trong CSS, nó chỉ yêu cầu một vài bước bổ sung

Tốt nhất là bắt đầu với một số văn bản in đậm lớn. Điều này sẽ làm cho gradient rõ hơn và văn bản dễ đọc hơn

Văn bản tôi sẽ sử dụng được tạo kiểu bằng tốc ký phông chữ với các giá trị sau

font: bold 120px Poppins, sans-serif;

Bước 1. Thêm một dải màu

Đầu tiên, chúng ta cần thêm gradient làm nền

Theo mặc định, gradient sẽ đi từ trên xuống dưới, nhưng chúng ta cũng có thể chỉ định hướng

Nếu bạn muốn chuyển màu theo chiều ngang, thì

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

0 sẽ phù hợp, nhưng một góc nhỏ như

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

1 trông tự nhiên hơn

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

Nếu bạn muốn tìm hiểu cách tạo bất kỳ dải màu nào bạn muốn hoặc chỉ đơn giản là cần làm mới lại, hãy xem Hướng dẫn cơ bản về Dải màu CSS của tôi

Bước 2. kẹp nó

Bây giờ chúng ta cần làm cho gradient chỉ hiển thị vị trí của văn bản. Chúng ta có thể làm điều đó bằng cách sử dụng

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

2

Bạn có thể tìm hiểu thêm về điều này và các thuộc tính nền khác, trong bài viết của tôi về tất cả các thuộc tính nền

Bạn có thể đã biết rằng thuộc tính này cho phép chúng ta cắt nền vào đường viền, phần đệm hoặc hộp nội dung của một phần tử

Nhưng nó cũng có thể cắt nền cho văn bản

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
}

Nếu bạn thử mã này, nó sẽ giống như gradient vừa biến mất. Đó là bởi vì độ dốc nằm dưới văn bản

Bước 3. Tiết lộ

Để hiển thị gradient bên dưới văn bản của chúng tôi, chúng tôi cần làm cho văn bản trong suốt. Chúng ta có thể làm điều đó bằng cách đặt

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

3

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  color: transparent;
}

Bạn có thể muốn sử dụng tốc ký nền ở đây. Đừng

Thật không may, phiên bản viết tắt của

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

0 của

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

2 không hỗ trợ từ khóa

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

2

dự phòng

Nếu bạn phải hỗ trợ Internet Explorer, bạn sẽ cần chuyển sang màu phẳng

Đóng gói mọi thứ chúng tôi đã viết trước đây trong quy tắc

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

3. Bằng cách này, nó sẽ chỉ được hiển thị trong các trình duyệt hiện đại

Sau đó, bên ngoài khối

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

3, đặt màu dự phòng cho văn bản. Nó có thể là một màu xuất hiện trong dải màu của bạn và hoạt động tốt với phần còn lại của thiết kế

________số 8

Đảm bảo dự phòng xuất hiện trước các kiểu gradient thực tế

GHI CHÚ. Mặc dù bản thân quy tắc @supports cũng không được hỗ trợ trong IE, mọi thứ bên trong vẫn sẽ bị bỏ qua, đó chính xác là những gì chúng tôi muốn

Tôi có thể sử dụng gradient trên CSS văn bản không?

Nhưng có thể đạt được văn bản chuyển màu trong CSS, nó chỉ yêu cầu một vài bước bổ sung . Tốt nhất là bắt đầu với một số văn bản in đậm lớn. Điều này sẽ làm cho gradient rõ hơn và văn bản dễ đọc hơn.

Chúng ta có thể thêm màu gradient trong CSS không?

Độ dốc CSS cho phép bạn hiển thị chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định . CSS xác định ba loại độ dốc. Chuyển màu tuyến tính (đi xuống/lên/trái/phải/đường chéo) Chuyển màu xuyên tâm (được xác định bởi tâm của chúng)

Phông chữ gradient là gì?

Gradient nhằm mục đích kiểu chữ chuyển tiếp , kết nối các tính năng được tạo theo phong cách sans-serif với chữ viết tay vui tươi.

Độ dốc hình nón trong CSS là gì?

Chuyển màu hình nón được chỉ định bằng cách chỉ định góc xoay, tâm của dải màu, sau đó chỉ định danh sách các điểm dừng màu . Không giống như gradient tuyến tính và xuyên tâm, có các điểm dừng màu được đặt bằng cách chỉ định độ dài, các điểm dừng màu của gradient hình nón được chỉ định bằng một góc.