CSS3 04 – CSS3 Shadows

0
88

CSS3 Shadows cho phép chúng ta tạo các hiệu ứng đổ bóng cho các khối và các đoạn text trong website

1.Text Shadows

Để tạo hiệu ứng đổ bóng cho văn bản chúng ta sự dụng thuộc tính:

Trong đó :

x là độ lệch của bóng theo chiều ngang so với đoạn text

y là độ lệch của bóng theo chiều dọc so với đoạn text

Ví dụ để tạo hiệu ứng đổ bóng cho đoạn văn “Học viện công nghệ vietpro” với độ lệch theo chiều ngang là 4px và theo chiều dọc là 3px

See the Pen gxGqjw by Cao Anh Nhất (@xeko995) on CodePen.dark

Để là cho hiệu ứng đổ bóng thêm phần bắt mắt thì CSS3 cung cấp cho chúng ta giá trị thứ 3 là làm mờ bóng

Để là mờ bóng chúng ta chỉ cần thêm vào giá trị thứ 3 nằm sau giá trị độ lệch theo chiều dọc.

Cú pháp

z : là mức độ mờ của bóng

Ví dụ để làm mờ đoạn văn của ví trên 5px

See the Pen yozZgP by Cao Anh Nhất (@xeko995) on CodePen.dark

Để tạo ra các hiệu ứng đổ bóng với các màu sắc khác nhau chúng ta thêm vào một giá trị là tên màu hoặc mã màu muốn hiện thị

Ví dụ để tạo một hiệu ứng đổ bóng có màu đen trong đoạn văn trên

See the Pen dzVaQP by Cao Anh Nhất (@xeko995) on CodePen.dark

*NOTE: Các giá trị thứ 3,4 có thể có hoặc không còn 2 giá trị đầu tiên bắt buộc phải có 

2. Box Shadow

Box shadow giúp chúng ta tạo hiệu ứng đổ bóng cho khối.

Cách sử dụng các giá trị của box-shadow giống với text-shadow nên tôi sẽ không nhắc lại ở đây nữa mà sẽ đi vào ví dụ cụ thể

Ví dụ để tạo hiệu ứng đọ bóng cho khối với độ lệch ngang là 3px , độ lệch dọc là 2px , độ mờ của bóng là 5px và màu của bóng là màu đen:

See the Pen NvaoQy by Cao Anh Nhất (@xeko995) on CodePen.dark

Như vậy là tôi đã hướng dẫn xong về CSS3 Shadows trong bài sau tôi sẽ giới thiệu cho các bạn về CSS3  Fonts

Chúc các bạn học tốt!

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here