Hướng dẫn tạo hiệu ứng văn bản sử dụng Gradient Text CSS
Bài viết được sự cho phép của tác giả Nguyễn Thành Nam
Hiệu ứng văn bản với gradient text là một cách tuyệt vời để tạo điểm nhấn cho văn bản trên trang web của bạn. Sử dụng CSS, bạn có thể dễ dàng áp dụng hiệu ứng gradient text để làm cho văn bản trở nên hấp dẫn và nổi bật. Dưới đây là một ví dụ sử dụng hiệu ứng gradient text được tạo bằng CSS.
Để làm được như trên, bạn làm theo các bước hướng dẫn dưới đây:
Bước 1: Tạo HTML cơ bản
Đầu tiên, chúng ta cần tạo 1 khối HTML để chứa văn bản.
<div>
<p>thanhnamnguyen.dev</p>
</div>
Bước 2: Thêm CSS Gradient
Sử dụng CSS sau để tạo hiệu ứng chuyển màu trên văn bản (gradient text). Mình sử dụng thuộc tính background: linear-gradient
để tạo dải màu sắc tương ứng. Gradient này chạy từ trái qua phải và bao gồm bốn màu: #7953cd
, #00affa
, #0190cd
, và #764ada
(các mã màu này đang áp dụng ở chế độ darkmode). Các con số (20%, 30%, 70%, 80%) xác định vị trí của màu trong gradient.
-webkit-background-clip
vàbackground-clip
: Định nghĩa việc clip gradient vào văn bản.-webkit-text-fill-color
vàtext-fill-color
: Đặt màu chữ trong suốt để hiển thị gradient.background-size
: Đặt kích thước của background gradient là500%
theo chiều ngang vàtự động
theo chiều dọc.- Sử dụng
animation
textShine với thời gian 5 giây, kiểueasing-in-out
, lặp vô hạn và thay đổi đối diện.
p {
background: linear-gradient(to right, #7953cd 20%, #00affa 30%, #0190cd 70%, #764ada 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 500% auto;
animation: textShine 5s ease-in-out infinite alternate;
}
Cùng với CSS ở trên, chúng ta cũng cần thêm hiệu ứng bằng cách sử dụng @keyframes textShine { ... }:
Định nghĩa animation textShine. Nó bắt đầu với một vị trí background ở 0%
theo chiều ngang và 50% theo chiều dọc, và kết thúc ở vị trí 100%
theo chiều ngang và 50% theo chiều dọc, tạo hiệu ứng di chuyển gradient từ trái sang phải.
@keyframes textShine {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
Bước 3. Kết quả
Và bây giờ, bạn đã tạo thành công hiệu ứng gradient text trên văn bản. Thử nghiệm và tùy chỉnh gradient màu sắc và góc theo ý muốn.
Việc này chỉ là một ví dụ đơn giản, và bạn có thể tùy chỉnh nó theo nhu cầu của bạn để tạo ra hiệu ứng gradient text độc đáo cho trang web của bạn.
Đó là cách bạn có thể tạo hiệu ứng văn bản với gradient text sử dụng CSS. Hãy thử và sáng tạo để làm cho trang web của bạn trở nên thú vị hơn!
Bài viết gốc được đăng tải tại blog.thanhnamnguyen.dev
Xem thêm:
- CSS Loader là gì? Cách sử dụng CSS Loader trong trang Web của bạn
- Bí kíp code CSS hiệu quả hơn mà các bạn nên biết
- Tìm hiểu Conditional Border Radius trong CSS
Xem thêm Việc làm IT hấp dẫn tại TopDev
- M Mới ra trường không kinh nghiệm, sao làm BA?
- C Chuyển đổi SA key sang Workload Identity
- U Use Case Diagram và 5 sai lầm thường gặp
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- D Dart là gì? Ứng dụng của ngôn ngữ lập trình Dart
- C Chuẩn Hóa CV, Nhận Ngay Phím Chất
- S So sánh MySQL và MongoDB: Nên chọn CSDL nào?
- D Dân BA có cần phải rành về kỹ thuật???
- C CSS Selector là gì? Cách sử dụng các loại CSS Selector phổ biến
- P Phân biệt Sketch, Wireframe, Mockup, và Prototype?