Tạo Hộp Tìm kiếm CSS3 Rocking
CSS3 là ngôn ngữ bảng kiểu thế hệ tiếp theo. Nó giới thiệu rất nhiều tính năng mới và thú vị như bóng, hoạt hình, chuyển tiếp, bán kính đường viền, v.v. Mặc dù các thông số kỹ thuật chưa được hoàn thiện, nhiều nhà sản xuất trình duyệt đã bắt đầu hỗ trợ nhiều tính năng mới.
Trong hướng dẫn này, chúng ta sẽ khám phá một số tính năng như bóng văn bản
, bán kính biên giới
, bóng hộp
và chuyển tiếp để tạo trường tìm kiếm rung chuyển.
Phiên bản photoshop của trường tìm kiếm này được tạo bởi Alvin Thong và có thể được tải xuống từ đây. Tôi đã cố gắng tạo lại trường tìm kiếm này bằng CSS3 thuần túy. Cần lưu ý rằng không phải tất cả các trình duyệt đều hỗ trợ các tính năng CSS3 và để thử hướng dẫn này, bạn nên sử dụng một trong những trình duyệt hiện đại hỗ trợ các tính năng CSS 3.
Sẳn sàng? Băt đâu nao!
1. Tài liệu HTML5
Chúng ta sẽ bắt đầu với đánh dấu HTML. Nó rất đơn giản, sau Kiểu tài liệu HTML5 và
tuyên bố, chúng tôi có một
với một ID được gọi là
#vỏ bánh
phía trong . Điều này được thực hiện đơn giản để xác định chiều rộng của hộp nội dung và căn chỉnh nó vào giữa trang.
Tiếp theo là Đây là cách mã trông như thế nào: Để tạo hộp lớn xung quanh biểu mẫu, chúng tôi sẽ thêm kiểu vào Đoạn mã quan trọng ở đây là 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ó. Bây giờ hộp đã hoàn tất, hãy chuyển sang tạo kiểu trường nhập. 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 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. Hãy tạo kiểu cho nút tìm kiếm. 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à Giải trình: bên trong 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: Đ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. 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 Độ.#chủ yếu
. ID này chứa các kiểu xác định hộp lớn màu trắng xung quanh trường nhập và nút tìm kiếm. Điều này tuyên bố bên trong nó. Các hình thức có trường nhập văn bản và snút tìm kiếm. Đây là cách biểu mẫu trông như thế nào mà không có bất kỳ kiểu nào được áp dụng cho nó:
Trường tìm kiếm CSS3
2. Tạo hộp giới hạn
#chủ yếu
. Từ mã hiển thị bên dưới, bạn sẽ nhận thấy rằng hộp đã được cung cấp chiều rộng 400px và chiều cao 50px. #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;
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;
Xem trước
3. 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;
#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;
Xem trước
4. Tạo kiểu nút gửi
đầ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;
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);
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
đầ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)
#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;