Tạo hiệu ứng bóng đổ, button box-shadow trong CSS

Chào các bạn, thông thường để làm bóng đổ trên WEB người ta thường sử dụng hình ảnh, tuy nhiên với cách này thì làm cho trang web load chậm hơn, phải bỏ công thiết kế. Các bạn có thể sử dụng CSS để tạo bóng đổ cho khung, button một cách đơn giản hơn với box-shadow trong CSS.

Chúng ta có cách khai báo sau:

     box-shadow: đối số 1, đối số 2, đối số 3, đối số 4;

Trong đó:

• Đối số 1: Qui định đổ bóng theo chiều ngang (đơn vị px).
• Đối số 2: Qui định đổ bóng theo chiều dọc (đơn vị px).
• Đối số 3: Độ rộng của bóng đổ (đơn vị px).
• Đối số 4: Màu của bóng đổ.

Ví dụ:
Chúng ta thực hiện việc đổ bóng về phía phải – dưới:

     box-shadow: 5px 5px 5px #666;
     -moz-box-shadow: 5px 5px 5px #666;
     -webkit-box-shadow: 5px 5px 5px #666;

Demo tạo bóng đổ bằng css dưới - phải

Bóng đổ về phía trên – trái:

Chỉ cần thực hiện với dấu (-) ở trước là dc kết quả mong muốn:

	box-shadow: -5px -5px 5px #666;
	-moz-box-shadow: -5px -5px 5px #666;
	-webkit-box-shadow: -5px -5px 5px #666;

Demo bóng đổ trong css trên - trái

Cách này sẽ tạo một nút nhấn thật ấn tượng mà không cần phải sử dụng hình ảnh, bạn có thể áp dụng cho các khung hình, thumbnail images…

     box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);
     -moz-box-shadow:0px 0px 6px rgba(0, 0, 0, 10);
     -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);

Ở đây mình sử dụng cách tô màu rgba color trong CSS3 hôm trước đã nói, cho nó khác tí ấy mà cấu trúc vẫn thế, hehe…

Tạo button shadow bằng CSS

Kết luận: Đây cũng là một cách cũng hay, mình thường áp dụng vào trong lúc làm giao diện web, tuy nhiên nó không chạy dc trên IE đâu nha mọi người! hii… Chúc thành công!