05/10/2018, 10:58

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

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.1/10 (19 votes cast)
Tạo hiệu ứng bóng đổ, button box-shadow trong CSS, 9.1 out of 10 based on 19 ratings
Tags:box-shadow, css cơ bản, CSS3
Bài liên quan

Cách tạo hiệu ứng khi rê chuột qua (hover) bằng CSS

Các nhà thiết kế website chắc chắn không còn xa lạ gì với CSS - công cụ vẫn được dùng để “thay áo” cho giao diện website. Bài viết dưới đây sẽ hướng dẫn cách tạo hiệu ứng vui mắt, thay đổi màu sắc dưới dạng gradient, khi người dùng rê chuột qua một phần nào đó trên trang web. ...

Bùi Văn Nam viết 2 tuần trước

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

Bùi Văn Nam viết 10:58 ngày 05/10/2018

Tạo hiệu ứng động giống Ubuntu Phone unlock với CSS

Tiếp tục giới thiệu tới các bạn các hiệu ứng động được làm từ CSS3. Hôm nay, trong bài viết này, chúng ta sẽ tạo hiệu ứng động giống chữ “unlock” trong Ubuntu Phone. Và với những dòng lệnh CSS3 sau đây, các bạn có thể áp dụng vào những mẫu thiết kế web của mình, hay tự sáng tạo theo ...

Vũ Văn Thanh viết 20:05 ngày 04/10/2018

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

Hiệu ứng bóng đổ là một trong những tính năng hay mà CSS3 mang lại cho chúng ta, hôm nay mình sẽ chia sẻ cho các bạn nhiều cách tạo ra các hiệu ứng bóng đổ khác nhau, giúp các bạn có nhiều lựa chọn hơn cho website của mình. Xem Demo | Download Trước hết chúng ta cùng tìm hiểu xem hiện ...

Tạ Quốc Bảo viết 20:01 ngày 04/10/2018

Từng bước tạo Hiệu Ứng Bóng Nẩy Với CSS3

Chào các bạn, hôm nay chúng ta sẽ cùng nhau tìm hiểu thêm về CSS3 Gradient và Animation nhé. Trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước tạo hiệu ứng bóng nẩy , đây chỉ là hiệu ứng đơn giản, tuy nhiên nó sẽ giúp các bạn có thêm kinh nghiệm sử dụng cũng như khả năng nắm vững CSS3. ...

Bùi Văn Nam viết 19:59 ngày 04/10/2018
0