# 036: Tìm kiếm Tòa nhà, Phần 2 - Thủ thuật CSS

Anonim

Chúng tôi tiếp tục nơi chúng tôi đã dừng lại trong Video # 034 và tiếp tục xây dựng khu vực tìm kiếm.

Lần này, chúng tôi đang tập trung vào trạng thái "mở" của tìm kiếm, xây dựng các thành phần biểu mẫu thực tế. Bản thân trường tìm kiếm sử dụng loại phần tử biểu mẫu HTML5 “tìm kiếm” - thường có một số kiểu tùy chỉnh được kết hợp với nó, nhưng vì chúng tôi đang sử dụng Chuẩn hóa (Video # 011), đó không phải là vấn đề đối với chúng tôi.

Chúng tôi tạo một chút CSS mô-đun mới (_buttons.scss) để sử dụng cho các nút tạo kiểu trên trang web. Xem chúng tôi đang làm gì ở đó? Bất kỳ chút kiểu dáng nào có ý nghĩa về mặt tinh thần, chúng tôi sẽ tạo một tệp mới cho. Chúng ta có thể làm điều này bao nhiêu tùy thích mà không cần lo lắng, vì dù sao thì các tệp cũng được nối với nhau với Sass.

Giao diện nút ba chiều được tạo ra chỉ bởi một loạt các bóng hộp được phân tách bằng dấu phẩy. Màu sắc rất dễ thay đổi, vì sử dụng các biến (bạn đoán nó!).

$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )

Chúng tôi lặp lại cùng kiểu dáng đó trong phần tử đầu vào (chỉ ở bên trong chứ không phải bên ngoài), hoàn thành giao diện 3D. Số lượng các bóng được bù đắp phù hợp với biến $ offset của chúng tôi, dẫn đến một số tính nhất quán trong thiết kế.

Không phải trong video này, nhưng sau này, chúng tôi phát hiện ra rằng các bóng bên trong trên đầu vào dễ thực hiện hơn rất nhiều chỉ với hai đường viền thay vì tất cả các bóng (đường viền gặp nhau ở một góc). Không may là không thể vào nút.

Kiểu nhập liệu này cuối cùng sẽ thấm vào tất cả các kiểu nhập trên trang web, dù tốt hơn hay tệ hơn.