Tạo Hiệu ứng Bóng đổ, Button Box-shadow Trong CSS - Code24h

• Bài viết
• Hỏi đáp

Tạo bài viết Đăng ký Đăng nhập Code24h.com HTML 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

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

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

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ình luận về bài viết này

Bùi Văn Nam

27 chủ đề

7090 bài viết

Có thể bạn quan tâm

• 1 CSS Framework – Sử dụng 960 Grid System Layout WEB
• 2 Class và ID trong CSS
• 3 Tạo góc bo tròn bằng CSS
• 4 z-index, Layers trong CSS
• 5 Giới thiệu về CSS, dùng CSS định dạng trang Web
• 6 Lưu ý về background và định dạng văn bản trong CSS
• 7 Float và clear trong CSS
• 8 HTML cơ bản
• 9 Dùng trí tuệ nhân tạo viết tập 6 “Trò chơi vương quyền” thay cho tác giả
• 10 Người đàn ông sống chỉ bằng hack game online trong 20 năm

0 Các chủ đề đang được quan tâm phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN

• Các câu hỏi thường gặp
• Điều khoản sử dụng
• Chính sách và quy định
• Chính sách bảo mật thanh toán
• Hỗ trợ học viên: hotro@code24h.com
• Báo lỗi bảo mật: security@code24h.com

VỀ CODE24H

• Giới thiệu Code24h
• Cơ hội nghề nghiệp
• Liên hệ với chúng tôi

HỢP TÁC VÀ LIÊN KẾT

• Đăng ký giảng viên
• Giải pháp e-learning
• Chương trình đại lý
• Chương trình Affiliate

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024