Làm mờ chữ với CSS3

Đăng bởi Neo trong mục Hướng dẫn vào 22 tháng 4, 2011 | Comments

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-shadowcolor 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;
}

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter