Tạo dòng chữ có nhiều màu xen kẽ cho blogspot-Create colorful the text with just css

Với các tiêu đề blogspot không dùng hình ảnh, việc trang trí sao cho đẹp với các chữ là một vấn đề khó.Ta có thể tạo hiệu ứng cho tiêu đề bằng cách sử dụng javascript với các hiệu ứng chữ chuyển động hoặc thay đổi màu.

Với một dòng chữ tĩnh nhưng có nhiều màu sắc xen kẽ cũng là một style khá đẹp.Vậy để tạo được dòng chữ có nhiều màu xen kẽ chỉ với CSS cho blogspot ta phải làm như thế nào? Sau đây sẽ là hướng dẫn giúp bạn làm được điều đó.

DEMO

Tạo dòng chữ có nhiều màu xen kẽ cho blogspot

Các bước thực hiện

Thêm CSS

.gradient-text {
  font-size:3.0rem;
  background-image: linear-gradient(
    to right,
    tomato, 
    gold 40%,
    blueviolet,
    mediumspringgreen 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  position: relative; 
}

Khi dùng sử dụng HTML

<div class="gradient-text">
Dòng chữ của bạn</div>

Dùng cho tiêu đề blogspot

Bạn vào mẫu tại phần header

Tìm tới dòng:

class='title'>

Thay tất cả thành:

class='title gradient-text'>

Phần màu sắc tại

tomato, 
    gold 40%,
    blueviolet,
    mediumspringgreen 90%

Bạn có thể thay đổi tùy thích và thay trị số màu là chữ thành trị số css(ví dụ: #abcdef)