Share code tạo hiệu ứng màu cho tiêu đề bài đăng blogger

Hôm nay mình sẽ chia sẻ cho anh em hiệu ứng chuyển động màu cho tiêu đề. Chỉ cần thêm một chút css là có ngay hiệu ứng màu tuyệt đẹp cho blog. Hãy cùng bắt đầu ngay thôi nào

Chuẩn bị như thế nào ?

Để tạo hiệu ứng ta cần dùng CSS. Ở đây mình đang làm trên CSS3 được hỗ trợ hầu hết trên các trình duyệt. Như vậy bạn không phải lo về vấn đề tương thích nữa.

Cách sử dụng

Bước 1: Bạn vào Blogger chuyển đến phần Giao diện rồi nhấp vào Chỉnh sửa HTML

Bước 2: Tìm đến cuối phần lưu trữ CSS cho blog

Bước 3: Chèn đoạn mã này vào:

/* Title post */
h1{
line-height:42px;
font-size:30px;
text-align:left;
background:linear-gradient(60deg,#FC5C7D  0%,#6A82FB 25%,#FC5C7D 50%,#6A82FB 75%,#FC5C7D 100%);color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:10s ChuyenDongMau linear infinite}
@keyframes ChuyenDongMau{
100%{background-position:100vw 0}
} 

Bước 4: Lưu lại và xem thành quả thôi nào!

Phân tích CSS hiệu ứng màu

Đầu tiên mình dùng bộ chọn CSS đánh dấu thực thi lên tất cả các thẻ h1. Nếu bạn không muốn ảnh hưởng lên các thẻ h1 chức năng khác thì có thể thay bằng h1 .post-title (tức là chọn tất cả các thẻ h1 có class post-title)

Các thành phần chính

• background:linear-gradient(...); Tạo hiệu ứng dải màu cho nền
• -webkit-background-clip:text; Chuyển dải màu nền thành dải màu cho chữ. Nếu không có dòng này trình duyệt sẽ cho kết quả như nền chứa dải màu.
• animation:10s ChuyenDongMau linear infinite Đánh dấu hiệu ứng chuyển động cho dải màu nền.
• @keyframes ChuyenDongMau{...} Tạo hiệu ứng chuyển động màu với đích là ChuyenDongMau mà chúng ta gọi bên trên.

Vậy là đã xong rồi. Nếu có thắc mắc gì hãy để lại ở phần bình luận nha

Chúc các bạn thành công!