CSS Text Glow: The technique here is to have a dark color for background and a lighter color for the glow. Text-shadow gives it the illusion of glowing. Text-shadow accepts 4 values in this order: 1. X-Coordinate of the shadow, relative to the text (0). 2. Y-Coordinate of the shadow, relative to the text (0). 3. Blur radius defines how fuzzy the shadow should be. (10px) 4. Color of the shadow (#fff).
<style> .text-glow{ background: #2F2F2F; color: #fff; text-shadow: 0 0 10px #fff; } </style> <div class="text-glow> This is a sample text. </div>
CSS Text Glow on Hover: In this example, when the mouse is moved, the text glows. The secret is to place the text-shadow under :hover option.
<style> .text-glow-hover{ background: #2F2F2F; color: #fff; } .text-glow-hover:hover{ text-shadow: 0 0 10px #fff; } </style> <div class="text-glow-hover"> Put your mouse over me and I will glow. </div>
CSS Text Glow on Hover with a delayed Effect: This example is the same as the one above, except that it has that delay in glowing. We create this effect using CSS3 transitions. In this example, we are using transition effect which has 2 values, text-shadow(what we want to delay) and the number of seconds the delay should take effect(in this case 3s – 3 seconds).
<style> .text-glow-hover-with-delay{ background: #2F2F2F; color: #fff; transition: text-shadow 3s; -moz-transition: text-shadow 3s; /* Firefox 4 */ -webkit-transition: text-shadow 3s; /* Safari and Chrome */ -o-transition: text-shadow 3s; /* Opera */ } .text-glow-hover-with-delay:hover{ text-shadow: 0 0 10px #fff; } </style> <div class="text-glow-hover-with-delay"> Put your mouse over me and I will glow slowly. </div>
Tin tức nổi bật
Thiết kế web theo mẫu
Thiết kế web theo mẫu là gì? Thiết kế web theo mẫu là dịch vụ website được xây dựng...
Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020
Thời kỳ 4.0, Internet trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Người...
10 bước xây dựng kế hoạch marketing online
Thị trường luôn thay đổi và chính vì thế các chiến lược marketing online của bạn cũng cần...
Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt
Cách chọn tên miền website. Chúng tôi là ITC Việt. Chúng tôi là công ty thiết kế website...
Thiết kế website theo yêu cầu
Hiện nay Dịch vụ Thiết kế website theo yêu cầu đã không còn xa lạ đối với các doanh...
Thiết kế trang web, lập trang web, dựng trang web bán hàng
Nội dung bài viết Thiết kế trang web Thiết kế trang web là điều mà các công...
E-commerce là gì? E-business là gì? So sánh E-commerce và E-business
E-Commerce (tiếng Việt là thương mại điện tử) đang là một trong những vấn đề đáng quan tâm của...
Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau
Việc thiết kế web ngày nay không còn dừng lại ở việc cung cấp thông tin đủ hay...