[CSS] Thuộc tính 3D của CSS cho Text

Để tạo một kiểu chữ 3D thường thì chúng ta phải dùng đến Photoshop rồi, nhưng với CSS (Casading Style Sheets) cũng có thể làm được điều này, các trình duyệt như FireFox, Chrome, Opera, Safari đều hỗ trợ, nhưng với IE 7, 8 thì không hỗ trợ thuộc tính này, với IE 9 thì có thể sẽ hỗ trợ. Bài viết sau của Congtoan sẽ giúp các bạn làm được điều này, rất đơn giản: 

Để thêm thuộc tính 3D cho một đối tượng CSS ta dùng cú pháp sau:

Trích dẫn

.example-class
{
  text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

Hiệu ứng 3D có nhiều level, ví dụ như hình trên của Congtoan:

Trích dẫn

h2
{
  font-size:72px;
  color:#FFF; 
  text-align:center;
  text-shadow:
  1px 1px 0 #CCC,
  2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
  3px 3px 0 #444,
  4px 4px 0 #444,
  5px 5px 0 #444,
  6px 6px 0 #444; /* end of 4 level deep dark shadow */
}

Đến đây bạn cũng có thể dừng lại là được rồi, đây chính là hiệu ứng 3D dành cho text của CSS 3, tuy nhiên, bạn cũng có thể đọc tiếp bước tiếp theo của Congtoan để làm cho text được sống động hơn, đó là khi rê chuột vào thì font chữ sẽ to lên mà không cần bạn phải sử dụng Javascript, CSS 3 có thể làm được điều này.

Khi rê chuột vào:


Khi chưa rê chuột:

Trích dẫn

h2:hover 
{
   /* CSS3 Transform Effect */
    -webkit-transform: scale(1.2);     /* Safari & Chrome */
    -moz-transform: scale(1.2);        /* Firefox */
    -o-transform: scale(1.2);          /* Opera */
    cursor:pointer;
}

Ở đây, h2:hover có nghĩa là đối tượng h2 khi rê chuột vào sẽ thực hiện các thuộc tính ở bên dưới.

Chúc các bạn thành công và có một website thật đẹp và nhẹ, load nhanh. 

Xem bài viết trên phiên bản di động