Chào mừng bạn đến với hướng dẫn chi tiết về cách thực hiện một hiệu ứng bóng độc đáo và ấn tượng cho logo trên trang web của bạn. Hiệu ứng bóng lướt qua không chỉ tạo điểm nhấn thú vị mà còn làm cho trang web của bạn trở nên sống động và chuyên nghiệp hơn. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về đoạn mã CSS mạnh mẽ để tạo ra hiệu ứng này.
Bước 1: Xác định phần tử CSS bao bọc Logo trên website.
Để xác định phần tử CSS bao bọc logo trên trang web của bạn, bạn có thể thực hiện các bước sau:
- Nhấp chuột phải vào logo trên trang web của bạn.
- Chọn “Kiểm tra” (Inspect) để mở cửa sổ xem phần tử (Elements) của trình duyệt.
Trong cửa sổ “Elements“, kiểm tra xem phần tử nào bao ngoài ảnh logo của bạn. Ví dụ, trên theme Flatsome, logo thường nằm trong cấu trúc: Header-main > Header Inner > Logo. Do đó, sau khi tìm hiểu, bạn có thể xác định được phần tử bao bọc logo là #logo. (Tuy nhiên bạn nên làm như hướng dẫn ở trên là click phải chuột vào logo rồi chọn “Kiểm tra” là chính xác nhất).
Một mẹo nhỏ là thường không phải là thẻ <img> hay <a> chính xác mà là một thẻ <div> hoặc một phần tử nằm ngay trên thẻ <a>. Điều này giúp bạn chọn đúng phần tử chính xác để áp dụng hiệu ứng bóng lướt qua cho logo của mình. Tuy nhiên cách này chỉ áp dụng cho 1 số số theme WordPress nhất định (như theme Flatsome chẳng hạn).
Bước 2: Chèn vào website và xem thành quả
Các bạn copy đoạn code CSS dưới đây và paste vào Giao diện – Tùy biến – Style – Custom CSS:
/* CSS hiệu ứng bóng lướt NGHIÊNG cho logo by congvietit.com */
/* Thay thế #logo bằng 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;
}
}
Nếu bạn nào dùng theme Newspaper giống mình thì sử dụng đoạn code sau:
/* CSS hiệu ứng bóng lướt NGHIÊNG cho logo by congvietit.com */
/* Thay thế #logo bằng phần tử CSS của bạn */
.tdb-logo-img-wrap:before,
.tdb-logo-img-wrap:after {
transform: skewX(-25deg) translateY(-50%);
content: "";
position: absolute;
top: 50%;
width: 40px;
height: 100%;
background-color: white;
z-index: 0;
}
.tdb-logo-img-wrap:before,
.tdb-logo-img-wrap:after {
animation: light-animation 6s infinite alternate linear;
}
.tdb-logo-img-wrap:before {
left: 0%;
}
.tdb-logo-img-wrap:after {
right: -5%;
}
/* Thêm class để chuyển đổi hướng chạy */
.tdb-logo-img-wrap.reverse:before {
left: auto;
right: 0%;
animation: light-animation-reverse 6s infinite alternate linear;
}
.tdb-logo-img-wrap.reverse:after {
left: -5%;
right: auto;
}
@keyframes light-animation {
0% {
left: -5%;
opacity: 0;
}
50% {
left: 50%;
opacity: 1;
}
to {
left: 105%;
opacity: 0;
}
}
/* Keyframes mới cho chạy ngược lại */
@keyframes light-animation-reverse {
0% {
left: 105%;
opacity: 0;
}
50% {
left: 50%;
opacity: 1;
}
to {
left: -5%;
opacity: 0;
}
}
Nếu bạn không chèn được, có thể inbox mình qua Facebook cá nhân hoặc Fanpage mình chèn cho, phí là 50k nha :D
Tổng kết
Tóm gọn lại, thông qua bước xác định phần tử CSS bao bọc logo trên trang web, bạn có thể dễ dàng tích hợp hiệu ứng bóng lướt qua vào logo của mình. Thực hiện các điều chỉnh về kích thước, màu sắc, độ trong suốt và tốc độ trong đoạn mã CSS giúp bạn tùy biến hiệu ứng theo ý muốn, tạo nên một giao diện trang web độc đáo và chuyên nghiệp. Chúc bạn thành công trong việc thực hiện hiệu ứng này và làm cho trang web của mình trở nên ấn tượng hơn!
- Hướng dẫn tạo Button Liên hệ đa chức năng mẫu 02
- Kích thước hình ảnh quảng cáo bài viết Facebook chuẩn 2024
- Hướng dẫn thay đổi con trỏ chuột cho Website của bạn
- 10 mẫu CV xin việc file Word – Download ngay
- WWW và không có WWW – Cái nào tốt hơn cho SEO WordPress?
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.
