10 kỹ thuật sáng tạo sử dụng CSS3 Box Shadow

Chúng tôi đã thấy một số lượng lớn các tiến bộ trong phát triển web CSS3 chỉ trong vài năm qua. Các trang web phổ biến trên Internet đã bắt đầu kết hợp nhiều phong cách độc đáo như góc tròn và truy vấn phương tiện đáp ứng di động. Nhưng quan trọng hơn nữa, điều này đã mở ra cơ hội cho các giao diện sáng tạo được tạo nguyên mẫu trong vài phút.

Trong bài viết này tôi muốn chia sẻ 10 đoạn mã liên quan đến thiết kế bóng hộp CSS3 rực rỡ. Tôi sẽ giải thích cách mã hoạt động và cách bạn có thể triển khai từng bóng hộp vào trang web của riêng bạn.

Những phong cách này đều được quy cho ảnh hưởng thiết kế lớn từ các trang web phổ biến khác. Đây là một ví dụ tuyệt vời về cách các nhà phát triển web hiện tại đang xây dựng các xu hướng có ảnh hưởng cho tương lai của thiết kế web.

1. Đã sửa lỗi Thanh công cụ hàng đầu

Dịch vụ truyền thông xã hội Rumani Trilulilu sử dụng một thanh công cụ nổi trên toàn bộ trang web của họ. Điều này có thể được tạo ra một cách nhanh chóng bằng cách sử dụng một vị trí: cố định; tài sản trên bất kỳ yếu tố thanh hàng đầu. Nhưng bóng hộp bổ sung này đưa hiệu ứng lên một cấp độ hoàn toàn mới.

#banner vị trí: cố định; chiều cao: 60px; chiều rộng: 100%; đầu trang: 0; trái: 0; viền trên: 5px solid # a1cb2f; nền: #fff; -moz-box-bóng: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-bóng: 0 2px 3px 0px rgba (0, 0, 0, 0.16); hộp bóng: 0 2px 3px 0px rgba (0, 0, 0, 0.16); chỉ số z: 999999;  #banner h1 line-height: 60px;

Bạn sẽ nhận thấy thuộc tính bóng hộp thực sự được thiết lập với sự kết hợp giá trị khá đơn giản. Bóng sẽ rơi xuống dưới hộp và mờ đi 3px ở hai bên.

Chúng ta có thể sử dụng rgba () phương pháp để áp dụng độ mờ nhẹ lên bóng, vì vậy phần tử không xuất hiện quá tối. Đó là một bổ sung tinh tế mà chắc chắn sẽ thu hút sự chú ý của khách truy cập của bạn.

Bản giới thiệu

2. Thả xuống điều hướng phụ

Đây là một phương thức bóng hộp sáng tạo khác được áp dụng trên menu phụ thả xuống vô hướng. Một hiệu ứng tương tự có thể được nhìn thấy trên Doanh nhân khi bạn di chuột qua từng liên kết điều hướng chính hàng đầu. Điều này chắc chắn là một chút khó khăn hơn để cấu hình nhưng cũng đáng để kiên nhẫn.

#bar hiển thị: khối; chiều cao: 45px; nền: # 22385a; đệm-top: 5px; lề dưới: 150px; vị trí: tương đối;  #bar ul lề: 0px 15px; họ phông chữ: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li nền: # 22385a; hiển thị: khối; cỡ chữ: 1,2em; vị trí: tương đối; phao: trái;  #bar ul li a display: block; màu: # fffff7; chiều cao dòng: 45px; font-weight: in đậm; đệm: 0px 10px; trang trí văn bản: không có; chỉ số z: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; nền: #fff; viền-trên-trái-bán kính: 3px; viền-trên-phải-bán kính: 3px; -webkit-Border-top-left-radius: 3px; -webkit-Border-top-right-radius: 3px; -moz-Border-radius-topleft: 3px; -moz-Border-radius-topright: 3px;  #bar ul .subnav display: block; trái: 14px; đầu trang: 48px; chỉ số z: -1; chiều rộng: 500px; vị trí: tuyệt đối; chiều cao: 90px; viền: 1px solid # edf0f3; đỉnh biên: 0; đệm: 10px 0 10px 10px; tràn: ẩn; -moz-Border-radius-bottomleft: 3px; -moz-Border-radius-bottomleft: 3px; -webkit-Border-bottom-left-radius: 3px; -webkit-Border-bottom-right-radius: 3px; viền-dưới-phải-bán kính: 3px; viền-dưới-phải-bán kính: 3px; -moz-box-bóng: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-bóng: 0px 2px 7px rgba (0,0,0,0.25); hộp bóng: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Sức mạnh = 3, Direction = 180, Color =" # 333333 ")"; bộ lọc: progid: DXImageTransform.Microsoft.Shadow (Sức mạnh = 3, Hướng = 180, Màu = "# 333333");

Các liên kết điều hướng có thể được tạo kiểu để thay đổi màu sắc khi được chọn hoặc trên chuột di chuột. Tôi cũng thêm một số đường viền tròn vào các liên kết và trên hộp menu thả xuống. Điều này mang lại cảm giác đẹp hơn thay vì các cạnh cứng xung quanh. Tôi cũng đang tận dụng tốt -bộ lọc ms và bộ lọc thuộc tính độc quyền của Internet Explorer.

Nếu bạn thiết lập một hệ thống điều hướng đầy đủ, bạn sẽ có thể thay đổi bộ hiển thị thành không và ẩn menu sau khi tải trang. Sau đó, sử dụng một số jQuery, bạn có thể nhắm mục tiêu sự kiện .hover () và hiển thị thanh phụ với nội dung được cập nhật.

Bản giới thiệu

3. Nút bóng

Đây có thể là một trong những phong cách yêu thích của tôi để tạo ra chỉ vì mức độ năng động của nó xuất hiện trên trang. Nếu bạn không thể biết, đây là nút nhỏ màu xanh được tìm thấy trên trang chủ của YouTube sau lần đăng nhập đầu tiên của bạn.

màu xanh lam màu: #fff; chiều rộng: 190px; chiều cao: 35px; con trỏ: con trỏ; họ phông chữ: Arial, Tahoma, sans-serif; cỡ chữ: 1.0em; font-weight: in đậm; -moz-Border-radius: 2px; -webkit-Border-radius: 2px; bán kính đường viền: 2px; đường viền rộng: 1px; màu viền: # 0053a6 # 0053a6 # 000; màu nền: # 6891e7; hình nền: -moz-linear-gradient (trên cùng, # 4495e7 0, # 0053a6 100%); hình nền: -ms-linear-gradient (trên cùng, # 4495e7 0, # 0053a6 100%); hình nền: -o-linear-gradient (trên cùng, # 4495e7 0, # 0053a6 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0, # 4495e7), dừng màu (100%, # 0053a6)); hình nền: -webkit-linear-gradient (trên cùng, # 4495e7 0, # 0053a6 100%); hình nền: tuyến tính-gradient (xuống dưới, # 4495e7 0, # 0053a6 100%); bóng văn bản: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-bóng: chèn 0 1px 0 rgba (256, 256, 256, .35); -ms-box-bóng: chèn 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-Shadow: in 0 1px 0 rgba (256, 256, 256, .35); hộp bóng: chèn 0 1px 0 rgba (256, 256, 256, .35); bộ lọc: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover viền-màu: # 002d59 # 002d59 # 000; -moz-box-Shadow: in 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-Shadow: in 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-Shadow: in 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rpx (0, 0, 0, 0.25); hộp bóng: inet 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); bộ lọc: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); hình nền: -moz-linear-gradient (trên cùng, # 3a8cdf 0, # 0053a6 100%); hình nền: -ms-linear-gradient (trên cùng, # 3a8cdf 0, # 0053a6 100%); hình nền: -o-linear-gradient (trên cùng, # 3a8cdf 0, # 0053a6 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0, # 3a8cdf), dừng màu (100%, # 0053a6)); hình nền: -webkit-linear-gradient (trên cùng, # 3a8cdf 0, # 0053a6 100%); hình nền: tuyến tính-gradient (xuống dưới, # 3a8cdf 0, # 0053a6 100%);  .blues: active Border-color: # 000 # 002d59 # 002d59; -moz-box-bóng: in 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-Shadow: in 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-Shadow: in 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-Shadow: in 0 0px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; bộ lọc: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); hình nền: -moz-linear-gradient (trên cùng, # 005ab4 0, # 175ea6 100%); hình nền: -ms-linear-gradient (trên cùng, # 005ab4 0, # 175ea6 100%); hình nền: -o-linear-gradient (trên cùng, # 005ab4 0, # 175ea6 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0, # 005ab4), dừng màu (100%, # 175ea6)); hình nền: -webkit-linear-gradient (trên cùng, # 005ab4 0, # 175ea6 100%); hình nền: tuyến tính-gradient (xuống dưới, # 005ab4 0, # 175ea6 100%);

Toàn bộ mã nút rất nhiều để xem, nhưng chúng tôi đang cố gắng để hỗ trợ càng nhiều trình duyệt càng tốt. Có bóng văn bản và bóng hộp với sự hỗ trợ đi kèm cho MS Internet Explorer 7+. Ngoài ra, chúng tôi đang thiết lập hình nền thuộc tính với độ dốc CSS3 qua nhiều tiền tố cụ thể của nhà cung cấp.

Nhưng nếu bạn yêu thích phong cách thiết kế này thì trạng thái di chuột và hoạt động cũng sẽ thu hút sự chú ý của bạn. Về cơ bản, chúng tôi đang cập nhật đường viền để bao gồm một số bóng bên trong khi bạn ấn xuống, trong khi cập nhật độ dốc nền để hiển thị tối hơn một chút.

Vì không có hình ảnh trên nút, bạn có thể cập nhật các giá trị hex và biến đổi hình ảnh này để hòa trộn vào thực tế bất kỳ bảng màu nào.

Bản giới thiệu

4. Menu thông báo

Tôi không phải là người dùng lớn của Facebook nhưng tôi đã nhận thấy một số kỹ thuật UI từ thiết kế lại của họ. Menu flyout này có thể được so sánh với thông báo của bạn hoặc cửa sổ bật lên yêu cầu kết bạn được tìm thấy trên trang chủ.

.bay ra chiều rộng: 310px; lề trên: 10px; cỡ chữ: 11px; vị trí: tương đối; họ phông chữ: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; màu nền: trắng; đệm: 9px 11px; nền: rgba (255, 255, 255, 0.9); viền: 1px solid # c5c5c5; -webkit-box-bóng: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-bóng: 0 3px 8px rgba (0, 0, 0, .25); hộp bóng: 0 3px 8px rgba (0, 0, 0, .25); -webkit-Border-radius: 3px; -moz-viền-bán kính: 3px; bán kính đường viền: 3px;  .flyout #tip hình nền: url ('hình ảnh / tip.png'); lặp lại nền: không lặp lại; kích thước nền: tự động; chiều cao: 11px; vị trí: tuyệt đối; đầu trang: -11px; trái: 25px; chiều rộng: 20px;  .flyout h2 text-Transform: chữ hoa; màu: # 666; cỡ chữ: 1,2em; đệm-dưới: 5px; lề dưới: 12px; viền dưới: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; cỡ chữ: 1.1em; màu: # 222;

Không có nhiều mã uốn cong tâm trí mới để hiển thị ở đây. Tôi đang sử dụng nhỏ .tiền boa lớp với một phần tử nhịp nội bộ để thêm tam giác tooltip. Có thể tạo ra các tam giác CSS3 thuần túy nhưng phương pháp này không dễ dàng, như bạn có thể tưởng tượng. Nếu bạn thích phương pháp này, nó có thể đáng để hack một cái gì đó cùng nhau. Nhưng các thuộc tính xoay CSS3 không được hỗ trợ ở mọi nơi; trong khi đó hình ảnh không yêu cầu bất kỳ phương pháp dự phòng.

Bản giới thiệu

5. Trình bao bọc trang Apple

Có rất nhiều bóng hộp CSS3 ấn tượng mà bạn có thể tìm thấy trên trang web chính thức của Apple. Ví dụ dưới đây là một hộp chứa nhỏ với một vài nhịp cột. Khi nhìn qua bố cục của Apple, bạn sẽ nhận thấy nhiều trang của họ được tạo thành từ nhiều hộp bao bọc.

.applewrap chiều rộng: 100%; hiển thị: khối; chiều cao: 150px; nền: trắng; viền: 1px đặc; viền màu: # e5e5e5 #dbdbdb # d2d2d2; -webkit-Border-radius: 4px; -moz-viền-bán kính: 4px; bán kính đường viền: 4px; -webkit-box-bóng: rgba (0, 0, 0, 0,3) 0 1px 3px; -moz-box-bóng: rgba (0,0,0,0.3) 0 1px 3px; hộp bóng: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: left; kích thước hộp: hộp viền; chiều rộng: 250px; chiều cao: 150px; đệm: 16px 7px 6px 22px; phông chữ: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; màu: # 343434; viền phải: 1px solid #dadada;

Bạn có thể ghép một trang tương tự chia ra bởi các hộp nội dung có chiều rộng và chiều cao khác nhau. Mặc dù tôi đã đặt một vài cột vào bản demo này nhưng đây không phải là một kỹ thuật định dạng cần thiết. Bóng hộp sẽ phù hợp nhất trên nền trắng / xám. Nhưng tôi nghĩ hiển thị trên bất kỳ màu sáng nào sẽ trông khá tốt.

Bản giới thiệu

6. Hộp nội dung của Apple

Kiểu hộp nội dung khác trên trang web của Apple được sử dụng chủ yếu cho các thiết kế cột. Chúng chủ yếu ở dưới cùng của trang giới thiệu các giao dịch và thông tin liên quan khác. Đó là một phong cách thiết kế hoàn toàn khác với bóng hộp hiển thị bên trong từ trên xuống.

.applebox chiều rộng: tự động; chiều cao: 85px; kích thước hộp: hộp viền; nền: # f5f5f5; đệm: 20px 20px 10px; lề: 10px 0 20px; viền: 1px solid #ccc; bán kính đường viền: 4px; -webkit-Border-radius: 4px; -moz-viền-bán kính: 4px; -o-Border-radius: 4px; -webkit-box-Shadow: in 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-bóng: in 0px 1px 1px rgba (0, 0, 0, .3); hộp bóng: inet 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; phao: trái; lề: 0 0 0 30px;

Tôi không nghĩ rằng mã này quá khó để theo dõi và sao chép vào một thùng chứa div khác. Bóng hộp duy nhất chúng tôi đang áp dụng đang sử dụng hình nhỏ với mã màu rgba alpha trong suốt. Vì vậy, mặc dù chúng ta có bóng đổ được đặt thành màu đen thuần túy, chúng ta chỉ hiển thị độ mờ khoảng 30%.

Bản giới thiệu

7. Liên kết nổi bật

Đây có lẽ là phong cách bóng hộp yêu thích của tôi từ trang web hiện tại của Apple. Bạn nên tìm một kiểu demo trực tiếp của kỹ thuật này trên trang iCloud với một loạt các hộp liên kết nổi.

.applefeature height: 150px; lề: 8px; dọc-align: trên cùng; hiển thị: khối nội tuyến;  .applefeature a display: block; chiều rộng: 168px; chiều cao: 140px; viền: 1px solid #ccc; màu: # 333; trang trí văn bản: không có; font-weight: in đậm; chiều cao dòng: 1,3em; nền: # f7f7f7; -webkit-box-Shadow: in 0 1px 2px rgba (0, 0, 0, .3); -moz-box-bóng: in 0 1px 2px rgba (0, 0, 0, .3); hộp bóng: in 0 0px 2px rgba (0, 0, 0, .3); -webkit-Border-radius: 4px; -moz-viền-bán kính: 4px; bán kính đường viền: 4px;  .applefeature a: hover nền: #fafafa; nền: -webkit-gradient (tuyến tính, 0% 0%, 0% 100%, từ (#fff), đến (# f7f7f7)); nền: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-Shadow: in 0 1px 2px rgba (0,0,0, .3); -moz-box-bóng: chèn 0 1px 2px rgba (0,0,0, .3); hộp bóng: in 0 0px 2px rgba (0,0,0, .3); -webkit-Border-radius: 4px; -moz-viền-bán kính: 4px; bán kính đường viền: 4px;  .applefeature một img display: block; lề: 26px tự động 4px;  .applefeature a h4 display: block; chiều rộng: 160px; cỡ chữ: 1,3em; họ phông chữ: Arial, Tahoma, sans-serif; màu: # 646464; văn bản-align: trung tâm;

Các liên kết đặc trưng này được đặt thành một chiều rộng cố định và bao gồm một biểu tượng riêng biệt và văn bản hiển thị. Ví dụ của Apple sử dụng bóng hộp tương tự như chúng ta đã thấy trong hộp nội dung trước đó. Tuy nhiên toàn bộ hộp có thể được kích hoạt như một liên kết bao gồm cả :bay lượn và : hoạt động tiểu bang. Có rất nhiều tính linh hoạt với hộp liên kết này và bạn nên thử chơi xung quanh với mã nguồn.

Có thể rút ngắn chiều cao / chiều rộng và tạo một danh sách liên kết nhỏ hơn nhiều. Đây có thể là một tập hợp các chương hoặc trang trong một bài viết hoặc bạn có thể làm cho một menu phụ bị giới hạn với các biểu tượng liên kết. Đây thực sự là một bộ tuyệt vời các kỹ thuật CSS3 mới hơn thể hiện sức mạnh của bạn như một nhà thiết kế web.

Bản giới thiệu

8. Đóng khung hình ảnh

Tôi đã thêm một nền màu xám vào ví dụ này để bạn có thể thấy các kiểu bóng hộp rõ ràng hơn. Hộp này tương tự như ảnh chụp xem trước nổi bật trên wordpress.com ngoại trừ tôi đã thêm một chút chiều sâu vào mã nguồn.

.wpframe nền: #fff; bán kính đường viền: 2px; -webkit-Border-radius: 2px; -moz-Border-radius: 2px; phần đệm: 8px; -webkit-box-bóng: 1px 2px 1px # d1d1d1; -moz-box-bóng: 1px 2px 1px # d1d1d1; hộp bóng: 1px 2px 1px # d1d1d1;

Vì các hình ảnh được cung cấp một phần đệm nhỏ ở hai bên, khung này xuất hiện dưới dạng viền trắng lớn. Bạn luôn có thể cập nhật màu nền hoặc thậm chí thêm một đường viền nhỏ bên ngoài để tách hình ảnh khỏi nền. Nhưng tập hợp các kiểu khá đơn giản này có thể được điều khiển thành các kỹ thuật đổ bóng hộp khác nhau. Chơi xung quanh với mã và xem cách bạn có thể cải thiện thiết kế hình ảnh trên trang web của riêng bạn.

Bản giới thiệu

9. Trường đầu vào phát sáng

Tôi đã có ý tưởng này sau khi truy cập trang đăng nhập Pinterest một vài lần. Phong cách hoạt hình của họ thực sự hiển thị một số ví dụ hùng hồn về nhiều bóng hộp nội tuyến, cả bên ngoài và bên trong.

.formwrap hiển thị: khối; lề dưới: 15px;  .formwrap nhãn display: inline-block; chiều rộng: 80px; cỡ chữ: 11px; font-weight: in đậm; màu: # 444; họ phông chữ: Arial, Tahoma, sans-serif;  .formwrap .shadowfield vị trí: tương đối; chiều rộng: 250px; cỡ chữ: 17px; họ phông chữ: "Helvetica Neue", Arial, sans-serif; font-weight: bình thường; nền: # f7f8f8; màu: # 7c7c7c; chiều cao dòng: 1,4; đệm: 6px 12px; phác thảo: không có; chuyển tiếp: tất cả 0,2 giây dễ dàng vào ra 0s; -webkit-quá trình chuyển đổi: tất cả 0,2 giây dễ dàng thoát ra; -moz-quá trình chuyển đổi: tất cả 0,2 giây dễ dàng thoát ra; viền: 1px solid # ad9c9c; đường kính bán kính: 6px 6px 6px 6px; hộp bóng: 0 1px rgba (34, 25, 25, 0.2), 0 1px #fff;  .formwrap .shadowfield: tập trung viền-màu: # 930; nền: #fff; màu: # 5d5d5d; hộp bóng: inet 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-box-Shadow: in 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-Shadow: in 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);

Mặc dù các phong cách ban đầu rất hấp dẫn, tôi bị lôi cuốn vào hiệu ứng chuyển tiếp khi bạn tập trung vào từng trường đầu vào. Bạn có thể tab giữa chúng và thấy sự khác biệt ngay lập tức trong rất nhiều thuộc tính. Bóng hộp phát sáng bên ngoài được áp dụng cùng với bóng trong được cập nhật. Ngoài ra màu văn bản sẽ nhạt hơn khi bạn tập trung vào một đầu vào cụ thể, sau đó mờ dần khi bạn làm mờ.

Ngay cả việc sao chép qua một trong những hiệu ứng này cũng sẽ cải thiện đáng kể trải nghiệm người dùng của các trường biểu mẫu của bạn. Hãy chắc chắn rằng bạn không đi quá xa đến mức các biểu mẫu của bạn hầu như không thể sử dụng được. Tuy nhiên, hầu hết khách truy cập sẽ thích các hiệu ứng thẩm mỹ làm hài lòng, điều này cũng khuyến khích sự tương tác và tham gia hơn nữa vào trang web của bạn.

Bản giới thiệu

10. Nút bóng đàn hồi

Các nút bóng độc đáo này được tạo kiểu với sự chuyển đổi chậm trong khi di chuột và trạng thái hoạt động. Bạn có thể tìm thấy các ví dụ tương tự trên trang chủ Mozilla với số lượng lớn “Tải xuống Firefox” nút. Một số bóng hộp các thuộc tính thực sự kết hợp ba bóng khác nhau lại với nhau thành một lệnh.

.blu-btn display: inline-block; -moz-viền-bán kính: .25em; bán kính đường viền: .25em; -webkit-box-bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.2); hộp bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.2); màu nền: # 276195; hình nền: -moz-linear-gradient (# 3c88cc, # 276195); hình nền: -ms-linear-gradient (# 3c88cc, # 276195); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, # 3c88cc), dừng màu (100%, # 276195)); hình nền: -webkit-linear-gradient (# 3c88cc, # 276195); hình nền: -o-linear-gradient (# 3c88cc, # 276195); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; hình nền: tuyến tính-gradient (# 3c88cc, # 276195); viền: 0; con trỏ: con trỏ; màu: #fff; trang trí văn bản: không có; văn bản-align: trung tâm; cỡ chữ: 16px; đệm: 0px 20px; chiều cao: 40px; chiều cao dòng: 40px; chiều rộng tối thiểu: 100px; bóng văn bản: 0 1px 0 rgba (0,0,0,0,35); họ phông chữ: Arial, Tahoma, sans-serif; -webkit-quá trình chuyển đổi: tất cả các tuyến tính .2s; -moz-quá trình chuyển đổi: tất cả các tuyến tính .2s; -o-trans: tất cả .2s tuyến tính; -ms-quá trình chuyển đổi: tất cả các tuyến tính .2s; quá trình chuyển đổi: tất cả tuyến tính .2s (0,0,0,0.3), chèn 0 12px 20px 2px # 3089d8; -moz-box-Shadow: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.3), chèn 0 12px 20px 2px # 3089d8; hộp bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.3), chèn 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-Shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-Shadow: in 0 2px 0 0 rgba (0,0,0,0.2), in 0 12px 20px 6px rgba (0,0,0,0.2), chèn 0 0 2px 2px rgba (0,0, 0,0.3); box-Shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), in 0 12px 20px 6px rgba (0,0,0,0.2), chèn 0 0 2px 2px rgba (0,0,0,0.3 );  .grn-btn display: inline-block; -moz-viền-bán kính: .25em; bán kính đường viền: .25em; -webkit-box-bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.2); hộp bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.2); màu nền: # 659324; hình nền: -moz-linear-gradient (# 81bc2e, # 659324); hình nền: -ms-linear-gradient (# 81bc2e, # 659324); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, # 81bc2e), dừng màu (100%, # 659324)); hình nền: -webkit-linear-gradient (# 81bc2e, # 659324); hình nền: -o-linear-gradient (# 81bc2e, # 659324); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; hình nền: tuyến tính-gradient (# 81bc2e, # 659324); viền: 0; con trỏ: con trỏ; màu: #fff; trang trí văn bản: không có; văn bản-align: trung tâm; cỡ chữ: 16px; đệm: 0px 20px; chiều cao: 40px; chiều cao dòng: 40px; chiều rộng tối thiểu: 100px; bóng văn bản: 0 1px 0 rgba (0,0,0,0,35); họ phông chữ: Arial, Tahoma, sans-serif; -webkit-quá trình chuyển đổi: tất cả các tuyến tính .2s; -moz-quá trình chuyển đổi: tất cả các tuyến tính .2s; -o-trans: tất cả .2s tuyến tính; -ms-quá trình chuyển đổi: tất cả các tuyến tính .2s; chuyển tiếp: tất cả .2s tuyến tính;  .grn-btn: hover, .grn-btn: tập trung -webkit-box-bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0 , 0,3), chèn 0 12px 20px 2px # 85ca26; -moz-box-Shadow: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.3), chèn 0 12px 20px 2px # 85ca26; hộp bóng: 0 2px 0 0 rgba (0,0,0,0.1), chèn 0 -2px 0 0 rgba (0,0,0,0.3), chèn 0 12px 20px 2px # 85ca26;  .grn-btn: active -webkit-box-Shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), in 0 12px 20px 6px rgba (0,0,0,0.2), in 0 2px 2px rgba (0,0,0,0.3); -moz-box-Shadow: in 0 2px 0 0 rgba (0,0,0,0.2), in 0 12px 20px 6px rgba (0,0,0,0.2), chèn 0 0 2px 2px rgba (0,0, 0,0.3); box-Shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), in 0 12px 20px 6px rgba (0,0,0,0.2), chèn 0 0 2px 2px rgba (0,0,0,0.3 );

Tôi đang sử dụng chuyển đổi đầy đủ trong 200 mili giây trên trạng thái nút di chuột và hoạt động. Điều tuyệt vời về những phong cách này là bạn có thể áp dụng chúng cho gần như bất kỳ yếu tố có thể nhấp nào. Các nút, liên kết neo, các thành phần biểu mẫu hoặc bất cứ thứ gì bạn nghĩ là phù hợp - mặc dù các kiểu này nên được sử dụng một cách thưa thớt để không làm quá tải thiết kế của bạn.

Các nút như thế này thường được lưu tốt nhất theo cách mà Mozilla sử dụng chúng. Đính kèm các kiểu này vào blog của bạn nơi bạn có các nút để tải xuống miễn phí hoặc một cái gì đó tương tự. Người dùng thích tương tác với các giao diện độc đáo và điều này thường chuyển thành tỷ lệ phần trăm cao hơn cho xếp hạng nhấp qua của bạn.

Bản giới thiệu

Suy nghĩ cuối cùng

Tôi hy vọng bạn có thể lấy đi một số bài học tuyệt vời từ bộ sưu tập các kỹ thuật bóng hộp này. Có nhiều lĩnh vực khác nhau mà bạn có thể tập trung vào bao gồm biểu mẫu, hộp phương thức, nút, thanh công cụ và thậm chí bố trí trang web đầy đủ.

Hãy thoải mái thực hiện bất kỳ hiệu ứng bóng nào trong các phần của trang web của riêng bạn. Có rất nhiều kỹ thuật khác, nhưng bộ sưu tập này là hoàn hảo cho cả người mới bắt đầu và nhà phát triển nâng cao. Ngoài ra nếu bạn có bất kỳ đề xuất hoặc câu hỏi nào về bài viết bạn có thể chia sẻ với chúng tôi trong khu vực thảo luận bình luận bên dưới.