Ngồi kì cạch cả đêm ôn lại kiến thức CSS và JavaScript, bỏ bẵng đi là học cái gì cũng như mới cả. Đúng là biển học bao la, không biết bao giờ mới cảm thấy vừa ý với những gì mình đã học. Hôm nay lượm nhặt được tip làm hiệu ứng chữ "gradient" mà không dùng ảnh. Chỉ cần CSS là chúng ta có thể tạo ra được hiệu ứng đó, rất lý thú!

Để tưởng tượng cách làm mọi người có thể xem hình dưới đây

Đoạn code HTML

CSS Gradient Text

Đoạn CSS

h1 { font: bold 330%/100% "Lucida Grande"; position: relative; color: #464646; } h1 span { background: url(gradient.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; }

Như chúng ta biết thì trên IE6 việc hiển thị ảnh dạng PNG với thuộc tính trong suốt (transparent) không chính xác. Trên IE7 thì có đoạn tip sau

Lợi ích của làm này là

• Tạo ra được hiệu ứng chữ mà không cần Javascript, Flash
• Làm tiêu đề của bài viết thêm ấn tượng.
• Có thể dùng bất kỳ font chữ nào.