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

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

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

Phần định nghĩa CSS
.text 
{  
-webkit-box-sizing: content-box;  
-moz-box-sizing: content-box;  
box-sizing: content-box;  
cursor: pointer;  
border: none;  
font: normal 36px/normal "Wellfleet", Helvetica, sans-serif;  
color: rgba(255,255,255,1);  
text-align: center;  
-o-text-overflow: clip;  
text-overflow: clip;  
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;  
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.text:hover 
{  
color: rgba(169,214,169,1);  
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;  
-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;
}
body {
background-color:#0789F4
}
 
Phần định nghĩa HTML
 
 

Welcome to
hocwebgiare.com

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
Bạn có thể quan tâm

Cách tạo hiệu ứng Hover Effects cho hình ảnh bằng CSS3 Transitions Học lập trình web

Cách tạo hiệu ứng Hover Effects cho hình ảnh Học lập trình web

Tìm hiểu cách sử dụng CSS3 Transitions để tạo hiệu ứng Hover Học lập trình web

Thiết kế hiệu ứng cho hình bằng CSS3 Animations Học lập trình web

Tạo hiệu ứng cho hình ảnh với CSS3 Animations và Bootstrap Học lập trình web

Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3 Học lập trình web

Tạo hiệu ứng cho trang sản phẩm bằng Bootstrap Học lập trình web

Hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap với hiệu ứng CSS3 Học lập trình web

Hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo border với hiệu ứng bằng CSS3 & JQUERY Học lập trình web