Văn bản nhiều màu CSS

Văn bản này được tạo kiểu với một số thuộc tính định dạng văn bản. Tiêu đề sử dụng các thuộc tính text-align, text-transform và color. Đoạn văn được thụt lề, căn chỉnh và khoảng cách giữa các ký tự được chỉ định. Phần gạch chân đã bị xóa khỏi liên kết "Tự mình thử" có màu này

Tự mình thử »

---

Văn bản màu

Thuộc tính color được sử dụng để đặt màu cho văn bản. Màu sắc được chỉ định bởi

• một tên màu - như "đỏ"
• một giá trị HEX - như "#ff0000"
• một giá trị RGB - như "rgb(255,0,0)"

Xem Giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có

Màu văn bản mặc định cho một trang được xác định trong bộ chọn nội dung

---

Màu văn bản và màu nền

Trong ví dụ này, chúng tôi xác định cả thuộc tính background-color và thuộc tính color

Thí dụ

cơ thể người {
màu nền. xám nhạt;
màu. màu xanh da trời;
}

h1 {
màu nền. màu đen;
màu. trắng;
}

div {
màu nền. màu xanh da trời;
màu. trắng;
}

Tự mình thử »

Quan trọng. Độ tương phản cao rất quan trọng đối với những người có vấn đề về thị lực. Vì vậy, hãy luôn đảm bảo rằng độ tương phản giữa màu chữ và màu nền (hoặc hình nền) phải tốt

Tôi đã thấy hiệu ứng này cách đây một thời gian trên Twitter do Adam Argyle thực hiện và rất ngạc nhiên khi thấy hiệu ứng này có thể đạt được dễ dàng như thế nào trong CSS

Dưới đây là bản demo về những gì chúng ta sẽ tạo hôm nay

Xem Bút của Chris Bongers (@rebelchris) trên CodePen

Văn bản gradient nhiều màu CSS

Để tạo hiệu ứng này, trước tiên hãy bắt đầu với cấu trúc HTML của chúng ta. Điều này cực kỳ dễ dàng vì chúng ta chỉ cần một yếu tố

<h1>multi colored text in cssh1>

Sau đó, hãy chuyển sang tệp CSS của chúng tôi để thực hiện một số phép thuật 🪄

Hãy bắt đầu bằng cách xác định năm màu và góc bắt đầu của chúng ta

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

Chúng tôi sử dụng gốc để xác định các biến vì đây là cú pháp hợp lệ trong CSS cơ bản. Không cần SCSS ở đây

Sau đó, hãy thêm một số kiểu dáng cho cơ thể của chúng ta. Điều này được sử dụng để căn giữa văn bản của chúng tôi và làm cho nền của chúng tôi có màu đen. Hiệu ứng hoạt động tốt hơn trên màu đen nhưng cũng sẽ hoạt động trên các màu khác nhau

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

Sau đó, hãy bắt đầu tạo kiểu cho phần tử h1 của chúng ta

Tôi đang chia những điều này thành một vài bước để cung cấp thêm ý tưởng về những gì đang xảy ra

1. Kiểu tiêu đề cơ bản

Đối với kiểu dáng cơ bản của chúng tôi, chúng tôi muốn có một tiêu đề tương đối lớn

h1 {
  color: #fff;
  text-align: center;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 6.5vw;
  font-weight: 900;
  line-height: 6vw;
  text-transform: uppercase;
}

Điều này sẽ cung cấp cho chúng tôi đầu ra sau

2. Mỗi từ trên dòng riêng của mình

Như bạn có thể thấy ở trên, nó chỉ là một dòng lớn. Chúng ta có thể sử dụng bản hack CSS sau để lấy từng từ trên dòng riêng của nó

word-spacing: 100vw;

Tạo khoảng trắng cho mỗi từ trên một dòng

3. Nền chuyển màu văn bản CSS

Bây giờ chúng ta có thể di chuyển để thêm hiệu ứng chuyển màu. Chúng ta sẽ bắt đầu bằng cách chia dải màu thành năm bước, kết quả là mỗi từ có một màu

background: linear-gradient(
  var(--angle),
  var(--color-1) 19%,
  transparent 19%,
  transparent 20%,
  var(--color-2) 20%,
  var(--color-2) 39%,
  transparent 39%,
  transparent 40%,
  var(--color-3) 40%,
  var(--color-3) 59%,
  transparent 59%,
  transparent 60%,
  var(--color-4) 60%,
  var(--color-4) 79%,
  transparent 79%,
  transparent 80%,
  var(--color-5) 80%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

Ở đây, chúng tôi xác định các màu chúng tôi có trong định nghĩa phần tử

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

0 của chúng tôi. Cũng như góc cơ bản bằng 0. Chúng tôi thêm một đường viền trong suốt giữa mỗi màu cho hoạt ảnh của chúng tôi sau này. Cũng như đặt chế độ cắt thành văn bản

Tạo hiệu ứng chuyển màu nền tuyến tính trong CSS

Để tạo hiệu ứng chuyển màu khá phức tạp. Chúng tôi đang áp dụng hack chính bằng cách xác định biến

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

1

Sau đó, chúng ta có thể thêm hoạt ảnh vào phần tử h1 của mình

________số 8_______

Hoạt hình này trông như sau

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Tuy nhiên, điều này vẫn chưa làm được gì nhiều, vì trình duyệt không biết

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

3 là một giá trị. Chúng ta có thể khắc phục điều này bằng cách xác định một

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

4 cho biến

:root {
  --color-1: #442288;
  --color-2: #6ca2ea;
  --color-3: #b5d33d;
  --color-4: #fed23f;
  --color-5: #eb7d5b;
  --angle: 0deg;
}

1

@property --angle {
  syntax: '>';
  initial-value: 0deg;
  inherits: false;
}

Ghi chú. Ý tưởng này được lấy từ bài viết Thủ thuật CSS thú vị này

Và chúng ta đi. Một hiệu ứng hoạt hình văn bản CSS cực hay. Tôi hy vọng bạn thích bài viết này

Cảm ơn bạn đã đọc, và chúng ta hãy kết nối

Cảm ơn bạn đã đọc blog của tôi. Vui lòng đăng ký nhận bản tin email của tôi và kết nối trên Facebook hoặc Twitter

Làm cách nào để kết hợp hai màu trong CSS?