Tạo hiệu ứng chữ 3D, chữ tỏa sáng bằng CSS3

Trước đây khi cần phải tạo hiệu ứng 3D cũng như tỏa sáng thì chúng ta cần phải dùng các phần mềm tạo ảnh chuyên nghiệp như Photoshop. Nhưng giờ đây với sự hỗ trợ của CSS3 , chúng ta đã có thể tạo ra các hiệu ứng chữ tuyệt đẹp mà không cần phải dùng đến bất kì phần mềm nào.

Để minh chứng cho việc này, mình xin chia sẻ cho các bạn 2 đoạn css giúp các bạn tạo hiệu ứng 3D và tỏa sáng cho chữ.

Hiệu ứng 3D

Các bạn dùng đoạn css sau cho bất kì đoạn chữ nào mà bạn muốn tạo hiệu ứng 3D.

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,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

Hiệu ứng chữ tỏa sáng

color: #FFF;
text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;

Có một điều cần lưu ý ở hiệu ứng này là các bạn cần phải làm trên nền tối để có được hiệu ứng tốt nhất.

Mình hy vọng với bài viết đơn giản và ngắn ngủi này sẽ giúp các bạn có thêm kinh nghiệm và nâng cao khả năng thiết kế với CSS3. Nhớ chia sẻ bài viết cho bạn bè và nhiều người cùng biết nhé.

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

Chuyên Mục: Css

Bài viết được đăng bởi webmaster