Tất cả bài viết | CSS3

Tạo hiệu ứng ánh sáng đèn Neon tuyệt đẹp cho văn bản bằng CSS3

Trong bài học thiết kế web này các Bạn sẽ được hướng dẫn cách Tạo hiệu ứng ánh sáng đèn Neon tuyệt đẹp cho văn bản bằng CSS3

Phần định nghĩa CSS

 


.neon 
{   
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
box-sizing: border-box;  
padding: 0px;  
border: none;  
font: normal 48px/normal "Dynalight", Helvetica, sans-serif;  
color: rgba(255,255,255,1);  
text-decoration: normal;  
text-align: center;  
-o-text-overflow: clip;  
text-overflow: clip;  
white-space: pre;  
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;  
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.neon:hover 
{  
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}
body 
{
background-color:#000000
}

Phần định nghĩa HTML

Thay đổi font chữ Google tại đây

http://www.google.com/fonts

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất