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

Tạo hiệu ứng Stroke 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 Stroke tuyệt đẹp cho văn bản bằng CSS3

Phần định nghĩa CSS

.stroke {  
-webkit-box-sizing: content-box;  
-moz-box-sizing: content-box;  
box-sizing: content-box;  
cursor: pointer;  
border: none;  
font: normal normal bold 36px/normal "Kaushan Script", Helvetica, sans-serif;  
color: rgba(255,255,255,1);  
text-align: center;  
-o-text-overflow: clip;  
text-overflow: clip;  
text-shadow: 1px 1px 0 #2ecc71 , -1px -1px 0 #2ecc71 , 1px -1px 0 #2ecc71 , -1px 1px 0 #2ecc71 ;  
-webkit-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);  
-moz-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);  
-o-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);  
transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
}


.stroke:hover 
{  
font: normal normal bold 36px/normal "Kaushan Script", Helvetica, sans-serif;  
text-shadow: 1px 1px 8px rgba(46,204,113,0.5) , -1px -1px 8px rgba(46,204,113,0.5) , 1px -1px 8px rgba(46,204,113,0.5) , -1px 1px 8px rgba(46,204,113,0.5) ;  
-webkit-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);  
-moz-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);  
-o-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);  
transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
}

body 
{
background-color:#FF0
}

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