#main chiều rộng: 400px; chiều cao: 50px; nền: # f2f2f2; đệm: 6px 10px; viền: 1px solid # b5b5b5; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px; -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;  

Đoạn mã quan trọng ở đây là bán kính biên giới khai báo và bóng hộp tờ khai. Để tạo các góc tròn, chúng tôi đã sử dụng khai báo bán kính biên CSS3, tiền tố trình duyệt "-moz-" và "-webkit-" đã được sử dụng để đảm bảo rằng điều này hoạt động trong các trình duyệt dựa trên tắc kè và webkit. Các khai báo bóng hộp có thể trông hơi khó hiểu nhưng thực ra nó rất đơn giản.

 box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

Giải trình: Ở đây, từ khóa inset chỉ định nếu bóng sẽ ở trong hộp. Hai số 0 đầu tiên biểu thị độ lệch x và độ lệch y và 3px biểu thị độ mờ. Tiếp theo là khai báo màu. Tôi đã sử dụng các giá trị rgba ở đây; rgba là viết tắt của màu xanh đỏ và xanh alpha (độ mờ đục). Do đó, 4 giá trị bên trong dấu ngoặc đơn cho biết lượng màu đỏ, lục, lam và alpha (độ mờ) của nó. Bạn sẽ nhận thấy rằng 5 bộ khai báo bóng đã được ghép lại với nhau. Điều này có thể được thực hiện bằng cách tách chúng bằng dấu phẩy. Hai bóng đầu tiên xác định hiệu ứng "phát sáng bên trong" màu trắng và các khai báo tiếp theo cung cấp cho hộp có vẻ ngoài chắc chắn / chunky.

Chơi xung quanh với các giá trị này để hiểu cách thức hoạt động của nó.

Xem trước

3. Tạo kiểu trường nhập

Bây giờ hộp đã hoàn tất, hãy chuyển sang tạo kiểu trường nhập.

 đầu vào [type = "text"] float: left; chiều rộng: 230px; đệm: 15px 5px 5px 5px; lề trên: 5px; lề trái: 3px; viền: 1px solid # 999999; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px; -moz-box-bóng: in 0 5px 0 #ccc, in 0 6px 0 # 989898, in 0 13px 0 #dfdede; -webkit-box-Shadow: in 0 5px 0 #ccc, in 0 6px 0 # 989898, in 0 13px 0 #dfdede; box-Shadow: inet 0 5px 0 #ccc, inset 0 6px 0 # 989898, in 0 13px 0 #dfdede;  

Các kiểu được khai báo cho trường đầu vào khá giống với kiểu được khai báo cho hộp lớn #chủ yếu. Chúng tôi đã sử dụng cùng bán kính đường viền (5px). Một lần nữa, nhiều bóng hộp đã được đóng thành câu lạc bộ.

 box-Shadow: inet 0 5px 0 #ccc, inset 0 6px 0 # 989898, in 0 13px 0 #dfdede; 

Giải trình: Bạn sẽ nhận thấy rằng lần này, độ mờ của bóng đã được giữ ở mức 0 để có được một bóng sắc nét và độ lệch dọc là 5px được sử dụng. Trong các khai báo liên tiếp, độ mờ đã được giữ ở mức 0px nhưng màu sắc và độ lệch y đã bị thay đổi. Một lần nữa, chơi xung quanh với các giá trị này để có được kết quả khác nhau.

Xem trước

4. Tạo kiểu nút gửi

Hãy tạo kiểu cho nút tìm kiếm.

 đầu vào [type = "submit"]. solid float: left; con trỏ: con trỏ; chiều rộng: 130px; đệm: 8px 6px; lề trái: 20px; màu nền: # f8b838; màu: rgba (134, 79, 11, 0,8); biến đổi văn bản: chữ hoa; font-weight: in đậm; viền: 1px solid # 99631d; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px; bóng văn bản: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 13px 0 #ccc; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-quá trình chuyển đổi: nền 0,2 dễ dàng;  

Ngoài màu sắc, nút tìm kiếm có kiểu dáng giống với hộp bên ngoài. Tương tự bán kính đường viền và bóng hộp đã được sử dụng trên nút. Tính năng mới được giới thiệu là bóng văn bản.

 bóng văn bản: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); 

Giải trình: bên trong bóng văn bản khai báo, ba giá trị số đầu tiên lần lượt là x-offset, y-offset và làm mờ. Các giá trị rgba chỉ ra màu bóng. Trong bộ khai báo tiếp theo (được phân tách bằng dấu phẩy), phần bù y được cho giá trị -1. Điều này được thực hiện để cung cấp cho văn bản một “bóng bên trong” hiệu ứng. Trạng thái di chuột / tiêu điểm của nút gửi có các giá trị khác nhau của màu nền và bóng.

Xem trước

Trạng thái "Hoạt động" cho nút

Trạng thái hoạt động của nút có một chút thay đổi. Trong phần này, tôi đã đặt cho nút một vị trí tuyệt đối và giá trị 'top' là 5px. Điều này đã được thực hiện để mang lại cho nó một cái nhìn tự nhiên hơn, sao cho cảm giác rằng nút này thực sự đã bị đẩy xuống 5 pixel. Những thay đổi khác đối với trạng thái hoạt động là màu nền và bóng. Lưu ý rằng tôi đã giảm độ lệch y của bóng để tạo cho nó một cái nhìn 'nhấn xuống'. Đây là mã cho trạng thái hoạt động của nút gửi:

 đầu vào [type = "submit"]. solid: active nền: # f6a000; vị trí: tương đối; trên cùng: 5px; viền: 1px solid # 702d00; -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 8px 0 #ccc; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;  

Mã hoàn chỉnh (CSS)

Điều này hoàn thành lĩnh vực tìm kiếm của chúng tôi. Chúng tôi đã sử dụng khá nhiều tính năng CSS3 mới. Đây là CSS và HTML hoàn chỉnh của trường tìm kiếm này.

 #main chiều rộng: 400px; chiều cao: 50px; nền: # f2f2f2; đệm: 6px 10px; viền: 1px solid # b5b5b5; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px; -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), in 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;  input [type = "text"] float: left; chiều rộng: 230px; đệm: 15px 5px 5px 5px; lề trên: 5px; lề trái: 3px; viền: 1px solid # 999999; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px; -moz-box-bóng: in 0 5px 0 #ccc, in 0 6px 0 # 989898, in 0 13px 0 #dfdede; -webkit-box-Shadow: in 0 5px 0 #ccc, in 0 6px 0 # 989898, in 0 13px 0 #dfdede; box-Shadow: inet 0 5px 0 #ccc, inset 0 6px 0 # 989898, in 0 13px 0 #dfdede;  input [type = "submit"]. solid float: left; con trỏ: con trỏ; chiều rộng: 130px; đệm: 8px 6px; lề trái: 20px; màu nền: # f8b838; màu: rgba (134, 79, 11, 0,8); biến đổi văn bản: chữ hoa; font-weight: in đậm; viền: 1px solid # 99631d; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px; bóng văn bản: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 13px 0 #ccc; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-quá trình chuyển đổi: nền 0,2 dễ dàng;  input [type = "submit"]. solid: hover, input [type = "submit"]. solid: tập trung nền: # ffd842; -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.9), in 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 13px 0 #ccc; box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.9), in 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc;  input [type = "submit"]. solid: active nền: # f6a000; vị trí: tương đối; trên cùng: 5px; viền: 1px solid # 702d00; -moz-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 8px 0 #ccc; -webkit-box-Shadow: in 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-Shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), in 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;  

Hy vọng bạn thích hướng dẫn này. Hãy thử nghiệm các tính năng này và đừng quên chia sẻ suy nghĩ của bạn.

Ghi chú của biên tập viên: Bài này được viết bởi Bharani M cho Hongkiat.com. Bharani là một nhà thiết kế / phát triển đến từ New Delhi, Ấn Độ.