[VUI] Một số hiệu ứng chữ nổi tuyệt đẹp bằng CSS cho Blogspot

Gợi ý cho bạn

Như tiêu đề bài viết, đây là một thủ thuật giúp bạn làm nổi bật câu chữ để khiến người khác phải chú ý nhiều vào nó hơn. Nói cho văn vẻ thế thôi chứ cái này hoàn toàn bằng CSS và thực chất là dùng hiệu ứng đổ bóng CSS để tạo ra.

Cách dùng:

Đặt đoạn CODE này vào nơi bạn muốn hiển thị Kiểu Chữ

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

Và sau đây là một số kiểu chữ cho các bạn !

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

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

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

.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

.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

.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

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

6. Đang tìm và update

DEMO for posts:

1.

TUISHAREDAO

2.

TUISHAREDAO

3.

TUISHAREDAO

4.

TUISHAREDAO

5.

TUISHAREDAO

6.

TUISHAREDAO