Bài viết này mình hướng dẫn các bạn cách làm hiệu ứng đổ bóng bằng CSS cho WordPress…
Các bước thực hiện rất đơn giản.
Bước 1: Xác định CSS cần thêm hiệu ứng
Bằng cách kéo chuột vào khu vực cần thêm ứng:
Tiếp theo…
Bước 2: Thêm hiệu ứng :before
h1.site-title a:before {…}
Thêm thuộc tính :before vào phía sau đoạn css
Bước 2: Chèn CSS vào file style.css
CSS chạy chéo:
CSS chạy ngang:
Bước 3: Xem thành quả
Demo 1: https://digitrends.com.vn Demo 2: canhme.com Demo 3: kiemtiencenter.com
Demo ảnh PC:
Demo ảnh trên mobile:
Video demo:
Cảm ơn bạn đã chia sẻ, hiệu ứng này đẹp quá!!!
Bạn ơi cho mình hỏi code này thì mình copy và chèn y nguyên vào site mình hả bạn??? Cảm ơn bạn nhiều!!!
Đúng rồi bạn!
hi anh Mạnh, anh có thể gửi code chạy ngang 2 bên được k ạ, em add vô nó chạy chéo, mà không hiểu sao lúc em out admin thì không thấy hiệu ứng, chỉ khi đăng nhập wp admin vào thì mới thấy hiệu ứng.. cảm ơn anh!
Mình update bài rồi, bạn kiểm tra lại nhé.
cảm ơn bro rất nhiều, mong được học hỏi ạ!
Ok bạn nhé, ghé thăm blog thường xuyên để cập nhật thông tin mới!!
Anh cho em hỏi em view css mà không biết phần tử nào nữa ạ, site em: cachsongkhoe.net. Em thấy nó có cả nằm trong div class, div id, nó không giống của anh thì em nên sửa h1 site-title thành gì ạ. Mong được a giúp đỡ!!
Bạn thêm đoạn css này vào file style.css nhé.
E muốn đổi màu thì đổi ở chỗ background-color:rgba phải không ạ?
Cái này làm hiệu ứng chạy bóng trên logo bạn ơi!
Hay, em thích cái này lâu rồi mà chưa làm được!
Cái này quá dễ mà em.
Em làm theo mà nó đổ bóng xấu quá
Em làm cái css thứ 2 đẹp luôn ấy.
Sao em chèn cái css thứ 2 mà nó chỉ hiện 1 cái đổ bóng nhỉ>
Tìm mãi mà chẳng biết search keyword như thế nào, thanks Admin nhé!
ok bạn!
Đã làm được thanks bro
Cám ơn bạn chia sẽ. Mình chỉ chèn được hiệu ứng chạy chéo rồi.
Web mình thì làm kiểu gì bạn nhỉ, cám ơn. Mình tìm không thấy css của logo
.logo h1:before bạn nhé.
Mình thử mà không được nhỉ, nó có chạy nhưng một vệt rất dài 🙁
Nhờ Bác xem giúp id theme của mình đang xài là gì với Bác. Mình tìm mãi không ra. Theme Rehub. hoặc vao web kepgiay.com
logo_image bác nhé!
Cảm ơn bạn mình làm được rồi
Cám ơn Bác đã chia sẻ, hiệu ứng đẹp nhìn bắt mắt.
Hay quá, áp dụng ngay thôi, hihi. À mà Ad ơi, còn dòng chữ “eat sleep mmo” ở trang chủ của kiemtiencenter làm như nào vậy ad?