Hiệu ứng chữ bóng đổ (text shadow effect) là một trong những hiệu ứng được sử dụng phổ biến nhiều nhất hiện nay trên các trang web cá nhân và thương mại. Nó cho phép bạn tạo những kiểu font chữ dưới dạng 3D đầy ấn tượng. Hôm nay mình xin tổng hợp lại những điều căn bản nhất mà hiệu ứng này có thể mang lại và giúp các bạn mới tìm hiểu về CSS3 sẽ có được những kiến thức hữu ích nhất.
Cú pháp của hiệu ứng chữ bóng đổ như sau :
1 text-shadow:xPosition yPosition blurSize color;
Trong đó :
- xPosition : Là vị trí nằm ngang của hiệu úng bóng đổ.
- yPosition : Là vị trí nằm dọc của hiệu ứng bóng đổ.
- blurSize : Kích thước của hiệu ứng mờ chữ.
- Color :màu của hiệu ứng bóng đổ.
Để các bạn dễ hiểu và hình dung, chúng ta thử làm một ví dụ đơn giản : Giả sử chúng ta có một đoạn chữ được đặt trong thẻ <p class=”myText”>…</p> . Và để tạo hiệu ứng bóng đổ cho các chữ nằm trong đoạn này , thì chúng ta viết câu lệnh css như sau :
1 p.myText { text-shadow:1px 1px 2px #f00; }
Đoạn css trên tạo ra một hiệu ứng bóng đổ với độ lệch so với chữ gốc bên dưới và góc phải là 1px . Và màu của hiệu ứng bóng đổ là màu đỏ. Kết quả sẽ giống như hình sau :
Màu đỏ có vẻ không hợp lắm so với màu chữ, vì thế chúng ta sẽ đổi sang màu xám.
1 p.myText { text-shadow:2px 2px 2px #aaa; }
Không chỉ có thể chúng ta còn có thể tạo ra nhiều hiệu ứng bóng đổ khác nhau như sau :
Hiệu ứng bóng đổ nằm bên góc trái trên cùng (Top left shadow)
1 p.myText { text-shadow:-2px -2px 2px #aaa; }
Chỉ có bóng đổ :
Bằng cách cho màu chữ trùng với màu nền thì chúng ta sẽ có được hiệu ứng như sau :
1 p.myText { color:#fff; text-shadow:2px 2px 2px #000; }
Bóng đổ bị nhòe
Chỉ cần cho các giá trị Xposition và Yposition bằng 0 và tăng kích thước của bóng đổ là ta có hiệu ứng nhòe như sau :
1 p.myText { color:#fff; text-shadow:0 0 5px #000; }
Tạo chữ nhòe
Tương tụ như ở trên, nhưng lần này chúng ta sẽ cho màu chữ là trong suốt (transparent)
1 p.myText { color:transparent; text-shadow:0 0 5px #000; }
Bóng đổ không bị nhòe
1 p.myText { text-shadow:2px 2px 0 #aaa; }
Hiệu ứng 3D
Bằng cách sử udngj dấu phẩy, bạn có thể tạo ra nhiều hơn một cái bóng , điều này cho phép bạn tạo ra hiệu ứng 3D
1 p.myText { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; }
Tạo đường viền
Bằng cách sử dụng 4 cái bóng xung quanh chữ , bạn có thể tạo ra được hiệu ứng đường viền cho chữ :
1 p.myText { color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; }
Hy vọng với những hiệu ứng đơn giản này, sẽ giúp các bạn thêm một sự lựa chọn cho các web của mình.
Chúc các bạn thành công !
Sưu Tầm
No comments:
Post a Comment