Một số hiệu ứng chữ nổi rất đẹp chỉ bằng CSS cho Blogspot

mot so hieu ung chu noi rat dep chi bang css cho blogspot

Đây là một thủ thuật rất hay giúp bạn làm nổi bật ký tự hay câu chữ trong bài viết để người đọc có thể chú ý vào nó hơn mà chỉ với các bước cực kỳ đơn giản. Nói là hiệu ứng chữ nổi nghe cho oách chứ thực chất là nó sử dụng hiệu ứng chữ bóng đổ trong CSS để tạo ra cảm giác chữ như đang nổi vậy thôi.

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

Hiệu ứng chữ bóng đổ bằng CSS

Bước 1. Đăng nhập vào tài khoản Blogger của bạn.

Bước 2. Bạn hãy chép đoạn mã HTML ở dưới đây vào vị trí mà bạn muốn nó hiển thị.

<div class="textshadow-css">
SOCBAY
</div>

Bước 3. Bây giờ, bạn hãy vào mục Chủ đề > Chỉnh sửa HTML và chèn một trong những đoạn mã CSS ở dưới đây vào trước thẻ đóng ]]></b:skin> rồi nhấn nút Lưu chủ đề là được.

(*) Ở đây mình chỉ đưa ra thuộc tính đổ bóng text-shadowcho chữ thôi, còn việc trang trí thì bạn hãy tự thêm theo ý thích của bạn nha!

1. Hiệu ứng bóng đổ đơn giản

SOCBAY
.textshadow-css {text-shadow: 2px 4px 3px rgba(0,0,0,0.1)}

2. Hiệu ứng chữ nổi 3D

SOCBAY
.textshadow-css {text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15)}

3. Hiệu ứng bóng đổ 3D

SOCBAY
.textshadow-css {text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15)}

4. Hiệu ứng bóng đổ kép

SOCBAY
.textshadow-css {text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15)}

5. Hiệu ứng bóng đổ nhiều tầng

SOCBAY
.textshadow-css {text-shadow: -5px 5px 0 #00e6e6, -10px 10px 0 #01cccc, -15px 15px 0 #00bdbd}

6. Hiệu ứng bóng đổ đậm nét

SOCBAY
.textshadow-css {text-shadow: -5px 5px 0 #00e6e6, -10px 10px 0 #01cccc, -15px 15px 0 #00bdbd}

7. Hiệu ứng bóng đổ mờ nhẹ nhàng

SOCBAY
.textshadow-css {text-shadow: 0px 7px 2px rgba(0,0,0,0.1), 5px 10px 2px rgba(0,0,0,0.05), -5px 10px 2px rgba(0,0,0,0.05)}

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