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

Tạo hiệu ứng ánh sáng khuếch tán 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 khuếch tán cho văn bản bằng CSS3

Phần định nghĩa CSS

.diffuselight 
{  
-webkit-box-sizing: content-box;  
-moz-box-sizing: content-box;  
box-sizing: content-box;  
border: none;  
font: normal 50px/normal "Calligraffitti", Helvetica, sans-serif;  
color: rgba(255,255,255,1);  
text-align: center;  
-o-text-overflow: clip;  
text-overflow: clip;  
text-shadow: 0 15px 29px rgba(0,0,0,0.0980392) , 10px 20px 5px rgba(0,0,0,0.0470588) , -10px 20px 5px rgba(0,0,0,0.0470588) ;  
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;  
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;  
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.diffuselight:hover 
{  
text-shadow: 0 -15px 29px rgba(0,0,0,0.0980392) , 10px -20px 5px rgba(0,0,0,0.0470588) , -10px -20px 5px rgba(0,0,0,0.0470588) ;
}

body 
{
  background-color:#08D3AA
}

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