Làm mờ chữ với CSS3
Nếu đã nghiên cứu CSS3 bạn sẽ thấy không có thuộc tính nào giúp làm mờ chữ. Nhưng chỉ cần kết hợp 2 thuộc tính text-shadow và color là bạn đã có thể giải quyết được vấn đề này
Và đây là đoạn mã CSS cần thiết:
.textblur { color: transparent; text-shadow: 0 0 20px rgba(0,0,0,0.5); }
Trong demo, mình sử dụng hiệu ứng khi hover qua thì chữ sẽ hết bị mờ, và kèm theo hiệu ứng transition, mã CSS như sau:
.textblur { color: transparent; text-shadow: 0 0 20px rgba(0,0,0,0.5); text-align: center; height: 120px; line-height: 60px; font-size: 40px; -webkit-transition: text-shadow 1.9s; -moz-transition: text-shadow 1.9s; } .textblur:hover { text-shadow: 0 0 0 rgba(0,0,0,1); -webkit-transition: text-shadow 0.5s; -moz-transition: text-shadow 0.5s; }