Trong CSS, thuộc tính box-shadow thêm hiệu ứng đổ bóng xung quanh khung của phần tử. Chúng ta có thể đặt nhiều hiệu ứng xung quanh một phần tử được phân tách bằng dấu phẩy. Bóng hộp được định nghĩa là các giá trị bù tương đối X và Y đối với phần tử, bán kính mờ và trải rộng cũng như màu sắc
Trong bài viết này, chúng ta sẽ tìm hiểu cách đặt bóng đổ bằng CSS. Thuộc tính inset thay đổi bóng bên ngoài thành bóng bên trong.
Ghi chú. Theo mặc định, bóng tạo ra bên ngoài hộp nhưng bằng cách sử dụng phần phụ, chúng ta có thể tạo bóng bên trong hộp
cú pháp
bóng hộp. h-offset v-offset làm mờ lây lan màu. hình nhỏ;
Tiếp cận. Để tạo bóng đổ cho một phần tử, chúng ta sẽ sử dụng thuộc tính box-shadow. Trong thuộc tính box-shadow, chúng ta sẽ xác định giá trị h-offset (Bắt buộc đối với hiệu ứng đổ bóng ngang), sau đó là giá trị v-offset (Bắt buộc đối với hiệu ứng đổ bóng dọc).
Chúng tôi cũng có thể tạo hiệu ứng mờ và trải bóng bằng cách sử dụng các giá trị mờ và trải. Cuối cùng, chúng tôi sẽ sử dụng từ khóa inset sẽ thay đổi bóng bên trong khung
ví dụ 1
HTML
<!DOCTYPE html>
<html>
<head>
<style>
<1<2
<3_______1_______4
<3_______1_______6
<3_______1_______8
<3_______2_______0
<3_______2_______2
<3_______2_______4
<1html6
<1_______2_______8
<3_______3_______0
<1html6
>4_______9_______>
>4_______5_______>
<<1>
<<5_______1_______6<5>
<head1 head2_______5_______3head4>
<head7_______5_______8_______5_______7>
>4_______5_______1>
>4_______1_______1>
>4_______2_______3_______
đầu ra
Giải trình. Trong ví dụ trên, chúng tôi đã đặt giá trị h-offset là 5px, giá trị v-offset là 10px, giá trị blur là 20px, giá trị trải rộng là 5px và màu xanh lá cây
Mặc dù có vẻ như Neumorphism đi kèm với một số nhược điểm rõ ràng, nhưng hiệu ứng đổ bóng của nó thực sự hấp dẫn tôi. Do đó, tôi sẽ sử dụng các nguyên tắc xu hướng thiết kế giao diện người dùng này để tạo hiệu ứng đổ bóng bên trong
Quy tắc ngón tay cái là trong Neumorphism, chúng ta cần một màu chung và hai bóng khác nhau. một cái sáng và một cái tối; . chúng ta phải bám vào các thuộc tính bóng và màu sắc của chính nó. Ngoài ra, các cạnh được bo tròn. Nó giúp tạo cảm giác tổng thể về một giao diện tích hợp
Không hoảng loạn. Tạo giao diện như vậy dễ dàng như cách bạn áp dụng bóng hộp trong CSS;
1- Xin nhắc lại, đây là mã chung mà chúng tôi sử dụng cho thuộc tính box-shadow
bóng hộp. không ai. h-offset v-offset blur trải màu. chèn vào. ban đầu. thừa kế;
2- Ngoài ra, bạn biết rằng bóng đổ có thể ở dạng thả hoặc dạng chìm. Cái trước được sử dụng để làm cho phần tử được đùn ra khỏi nền, trong khi cái sau tạo cho nó hiệu ứng ép. Chúng ta cần cái sau ở đây
3- Được. đây là mã cuối cùng và kết quả trực quan của nó;
- Một trong số chúng phải có bóng tối cho giá trị màu, trong khi cái còn lại phải có màu sáng
- Cả hai nên có giá trị chèn
- Sử dụng mã màu rgba sẽ mang lại hiệu ứng tinh tế hơn
- Vui lòng không sử dụng nó cho các yếu tố quan trọng như nút. ngoài ra, luôn xem xét kiểm tra khả năng tiếp cận
bóng hộp. chèn 6px 6px 10px 0 rgba(0, 0, 0, 0. 2), chèn -6px -6px 10px 0 rgba(255, 255, 255, 0. 5);
Thiết kế giao diện người dùngUxBoxshadowCSS
Bài báo cáo
Thưởng thức bài viết này?
2
Chia sẻ
zara z
Nhà phát triển / nhà thiết kế front-end đam mê với hơn 6 năm kinh nghiệm
**Chào bạn** Tôi là *nhà phát triển giao diện người dùng* thích giải quyết các vấn đề mới và giải quyết các thách thức của bạn. có bằng thạc sĩ về kiến trúc, tôi có năng lực về cả tư duy logic và tư duy nghệ thuật, vì vậy, mọi người coi tôi là