RSSCSS

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 [...]

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.

Thuộc tính 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

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

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

Tạo button shadow

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

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!

VN:F [1.9.22_1171]
Rating: 9.0/10 (12 votes cast)
Tạo hiệu ứng bóng đổ, button box-shadow trong CSS, 9.0 out of 10 based on 12 ratings

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Bạn gửi tập tin lên để mọi người giúp. Chứ nói chung chung quá

Tin mới hơn

Tin cũ hơn

Lên trên đầu