Chào các bạn, hôm nay topmienphi sẽ chia sẻ CSS tạo Hiệu Ứng Vệt Sáng Lướt Qua Logo Website Với CSS thú vị giúp tạo hiệu ứng vệt sáng lướt qua logo website. Đây là một thủ thuật đơn giản nhưng rất hiệu quả, giúp trang trí website của bạn trở nên chuyên nghiệp hơn. Đặc biệt, tiện ích này phù hợp với những website sử dụng logo dạng chữ.
Trong bài viết này, mình sẽ hướng dẫn cách thêm hiệu ứng bóng sáng cho logo, một chi tiết nhỏ nhưng sẽ làm website của bạn nổi bật hơn, đặc biệt khi nền menu là màu trắng. Hãy thử nghiệm và bạn sẽ thấy website của mình trở nên đẹp hơn.
Hướng Dẫn Tạo Ứng Vệt Sáng Lướt Qua Logo Website Với CSS
Bước 1: Xác Định Phần Tử CSS Bao Bọc Logo
Để bắt đầu, bạn cần xác định phần tử CSS bao bọc logo trên website của mình. Cách đơn giản nhất là nhấp chuột phải vào logo và chọn “Kiểm tra” để mở cửa sổ “Xem phần tử” trong trình duyệt.
Ví dụ trên theme Flatsome, logo thường nằm trong phần tử Header-main > Header Inner > Logo. Sau khi xác định, bạn sẽ có phần tử bao bọc logo là #logo.
Mẹo nhỏ: Phần tử bao bọc logo không phải lúc nào cũng là thẻ <img> hay <a>, mà thường là một thẻ <div> hoặc một phần tử khác nằm trên thẻ <a>.
Bước 2: Chèn Code CSS và Xem Thành Quả
Sau khi xác định được phần tử CSS, bạn chỉ cần thêm đoạn code CSS sau vào phần “Tùy biến” của website:
- Vào Giao diện → Tùy biến → Style → Custom CSS.
- Dán đoạn code dưới đây vào và lưu thay đổi.
* CSS hiệu ứng bóng lướt NGHIÊNG cho logo by GIUSEART.com */
/* Sửa #logo thành phần tử CSS của bạn */
#logo:after, #logo:before {
transform: skewX(-25deg) translateY(-50%);
content: "";
position: absolute;
top: 50%;
width: 40px;
height: 100%;
background-color: white;
z-index: 0;
}
#logo:before {
left: 0%;
animation: light-left 5s infinite alternate linear;
}
#logo:after {
right: -5%;
animation: light-right 5s infinite alternate linear;
}
@keyframes light-left {
0% { left: -5%; opacity: 0; }
50% { left: 50%; opacity: 1; }
to { left: 105%; opacity: 0; }
}
@keyframes light-right {
0% { right: -5%; opacity: 0; }
50% { right: 50%; opacity: 1; }
to { right: 105%; opacity: 0; }
}
Cách Thực Hiện Cho Các Theme Khác
Nếu bạn sử dụng theme khác, chỉ cần xác định đúng phần tử CSS bao bọc logo của bạn và chèn đoạn mã vào phần Custom CSS của theme là được.
Lời Kết
Chỉ với vài bước đơn giản, bạn đã có thể làm cho logo của mình trở nên sinh động và ấn tượng hơn với hiệu ứng bóng sáng lướt qua. Đây là một cách tuyệt vời để nâng cấp giao diện website của bạn mà không cần phải sử dụng đến những hình ảnh hay các kỹ thuật phức tạp.
Nếu bạn gặp khó khăn trong việc xác định phần tử CSS hoặc gặp vấn đề khi áp dụng mã, đừng ngần ngại để lại câu hỏi trong phần bình luận. Mình sẽ hỗ trợ bạn ngay lập tức. Chúc các bạn thành công và có được một website thật đẹp và chuyên nghiệp!
Cảm ơn bạn đã dành thời gian đọc bài viết tại Topmienphi.com! Hy vọng những thông tin trong bài đã mang lại giá trị hữu ích cho bạn.
Nếu thấy bài viết hay, đừng quên chia sẻ đến bạn bè và người thân để họ cũng nhận được những thông tin hữu ích này. Chia sẻ của bạn chính là nguồn động lực lớn giúp chúng tôi tiếp tục phát triển và mang đến những nội dung miễn phí chất lượng hơn nữa.
Hãy ghé thăm Topmienphi.com thường xuyên để cập nhật thêm nhiều bài viết mới về ứng dụng, thủ thuật công nghệ, và các mẹo vặt hữu ích. Đừng quên theo dõi chúng tôi trên các mạng xã hội để không bỏ lỡ những thông tin thú vị nhé!
Gửi 1 bình luận