Hướng dẫn tạo gạch chân chữ với hiệu ứng trượt đẹp bằng CSS cho Blogspot

huong dan gach chan chu voi hieu ung truot dep bang css cho blogspot

Nhiều khi bạn muốn cho Website/Blog trở nên đẹp hơn, ấn tượng hơn với người đọc thì với thủ thuật hết sức đơn giản này sẽ giúp cho bạn làm được điều đó.

Với hiệu gạch chân có hiệu ứng trượt đẹp mắt khi rê chuột vào sẽ giúp cho đoạn văn bản hay đường dẫn của bạn trở nên bắt mắt hơn, dễ tạo được sự chú ý của người đọc hơn. Và điều đặc biệt là thủ thuật này chỉ sử dụng CSS nên không làm ảnh hưởng tới tốc độ tải trang của bạn.

Bạn hãy nhấn vào nút DEMO để xem hai ví dụ với hiệu ứng gạch chân sẽ hoạt động như thế nào nhé!

X

TỪ TRÁI SANG PHẢI

TỪ PHẢI SANG TRÁI

Bây giờ, chúng ta cùng bắt đầu thực hiện.

Hiệu ứng gạch chân trượt đẹp cho chữ

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Thêm một trong hai (hoặc cả hai) đoạn mã CSS dưới đây vào trước thẻ đóng ]]></b:skin>.

(*) CSS hiệu ứng từ trái sang phải

.left-slide {display:inline-block; position:relative; color:#fff}
.left-slide:after {content:''; display:block; position:absolute; left:0; bottom:0; height:3px; width:0; background:transparent; transition:width .5s ease, background-color .5s ease}
.left-slide:hover:after {width:100%; background:#fff}
.right-slide {display:inline-block; position:relative; color:#fff}
.right-slide:after {content:''; display:block; position:absolute; right:0; bottom:0; height:3px; width:0; background:transparent; transition:width .5s ease, background-color .5s ease}
.right-slide:hover:after {width:100%; background:#fff}

Bước 3. Nhấn vào nút Lưu chủ đề để hoàn tất tạo hiệu ứng.

Bây giờ, khi bạn muốn sử dụng thì chỉ cần thêm thuộc tính class="left-slide" hoặc class="right-slide" để có hiệu ứng cho chữ.

Ví dụ:
<span class="left-slide">Nội dung mà bạn muốn tạo hiệu ứng</span>

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