Trang chủ » Thiết kế web » Tạo Hộp Tìm kiếm CSS3 Rocking

    Tạo Hộp Tìm kiếm CSS3 Rocking

    Bài viết này là một phần của chúng tôi "Loạt bài hướng dẫn HTML5 / CSS3" - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.

    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à

    với một ID được gọi là #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
    có một
    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ó:

    Đây là cách mã trông như thế nào:

       Trường tìm kiếm CSS3   

    Trường tìm kiếm CSS3

    2. Tạo hộp giới hạn

    Để tạo hộp lớn xung quanh biểu mẫu, chúng tôi sẽ thêm kiểu vào

    với ID của #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;  

    Đ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 Độ.

    © PHHSNEWS
    Thông tin hữu ích và lời khuyên về phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu.