Hướng dẫn input search html css - đầu vào tìm kiếm html css
|
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article) Show
Trong hướng dẫn này, chúng ta sẽ khám phá cách trang trí một form tìm kiếm đơn giản. Chúng ta sẽ không làm bất cứ điều gì cao siêu cả, thay vào đó khám phá bốn cách khác nhau để có thể trang trí một hộp tìm kiếm với sự trợ giúp của CSS Transitions. Bạn đã có một Hộp tìm kiếm Cơ bảnĐể bắt đầu, trong tập tin HTML, bạn sẽ cần phải tạo một input tìm kiếm. Nếu bạn xem qua đoạn code ở bên dưới, bạn sẽ thấy bốn thứ khác nhau: một div 9, một divbody{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}0, một body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}1 và bản thân input tìm kiếm. Tất cả bốn ví dụ sẽ có một hộp tìm kiếm — tất nhiên rồi — cũng như một lớp cho biểu tượng tìm kiếm. Mỗi ví dụ sẽ được đặt trong một container (phần tử kho chứa) để chúng ta có thể xử lý input tìm kiếm một cách độc lập. Cuối cùng, hộp div chịu trách nhiệm cố định container ở giữa.  Thêm Font AwesomeFont Awesome là một thư viện chứa các biểu tượng. Bạn có thể tìm hiểu thêm về dự án trên trang web của Font Awesome. Đoạn code ở trên là một ví dụ về cách bạn có thể include (bao gồm) biểu tượng bên trong markup của bạn. Tuy nhiên, để biểu tượng được hiển thị, bạn cũng cần phải bao gồm một liên kết đến thư viện Font Awesome, như minh hoạ như dưới đây. Hãy bao gồm liên kết này trong phần head của tài liệu. Phong cách Cơ bảnBây giờ, chúng ta sẽ thêm một số phong cách trong một stylesheet riêng (bạn cũng cần đến nó để liên kết đến từ bên trong phần head của tài liệu). body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}Trong đoạn code CSS ở trên chúng ta thêm một số phong cách cơ bản vào trang. Kiểu dáng của các hộp tìm kiếm sẽ có màu xanh đậm vì vậy nền của body không nên có màu trắng hoàn toàn. Lớp box cũng được canh giữa trên trang minh hoạ của hướng dẫn. Trang trí Hộp Tìm kiếmHướng dẫn này xoay quanh việc học cách trang trí các hộp tìm kiếm. Trong ví dụ đầu tiên này, tôi sẽ giải thích chi tiết hơn điều gì đang xảy ra; tôi muốn chắc chắn rằng bạn biết chính xác những gì đang xảy ra. Trong ba ví dụ còn lại, tôi đơn giản là chỉ cho bạn cách để đạt được các hiệu ứng chuyển tiếp khác nhau. #1. Nền Mờ dần Nền Mờ dầnVí dụ đầu tiên chúng ta sẽ giải quyết là thay đổi nền của input tìm kiếm khi hover (di chuyển chuột bên trên). Chúng ta cũng sẽ thêm một hiệu ứng chuyển tiếp để cho việc thay đổi không quá đột ngột. HTMLBạn đã thấy code HTML cho markup cơ bản. Đoạn code này sẽ tương tự cho tất cả các ví dụ. CSSĐể bắt đầu trang trí, chúng ta cần phải định nghĩa phong cách CSS của hộp tìm kiếm. Hãy thêm tất cả các thuộc tính CSS khác nhau từng cái một để bạn có thể biết chính xác những gì đang xảy ra. .container-1{
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}Trước tiên, chúng ta muốn trang trí lớp container. Thuộc tính được xem là quan trọng nhất là: body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}2. Điều này được thiết lập một cách đặc biệt để biểu tượng có thể được đặt ở bên trên input như bạn sẽ thấy sau đây..container-1 input#search{
width: 300px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #63717f;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}InputTiếp theo chúng ta cần trang trí input thật sự. Tất cả mọi thứ ở trên đẹp một cách tự nhiên vì border radius hoặc màu nền không ảnh hưởng cách input hoạt động. Hãy lưu ý đến thuộc tính padding-left. Nó ở đó để tạo khoảng trắng cho biểu tượng để nó không đè lên chữ bên trong input. Dưới đây chúng ta có bốn thuộc tính khác nhau tô màu cho văn bản giữ chỗ (hay còn gọi là placeholder), trong ví dụ của chúng ta là Search. Thật không may là các thuộc tính cần phải được tách biệt cho các tiền tố nhà cung cấp (vendor prefix) và không thể được hợp nhất thành một thuộc tính viết tắt. Có một chút phiền toái và bạn sẽ thấy điều này lặp đi lặp lại trong mỗi ví dụ!Search. Thật không may là các thuộc tính cần phải được tách biệt cho các tiền tố nhà cung cấp (vendor prefix) và không thể được hợp nhất thành một thuộc tính viết tắt. Có một chút phiền toái và bạn sẽ thấy điều này lặp đi lặp lại trong mỗi ví dụ! .container-1 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-1 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-1 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-1 input#search:-ms-input-placeholder {
color: #65737e;
}Biểu tượngCuối cùng, chúng ta sẽ trang trí cho biểu tượng. Quan trọng nhất, chúng ta đang thiết lập vị trí của nó để được đặt bên trên input bằng cách thiết lập body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}3. Margin giúp xác định vị trí của biểu tượng bên cạnh việc thiết lập top là body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}4..container-1 .icon{
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
}Thêm Hiệu ứng khi HoverBộ thuộc tính tiếp theo mà chúng ta phải tạo là những gì xảy ra với hộp tìm kiếm khi hover. Trong ví dụ này chúng ta chỉ muốn thay đổi màu nền. Để loại bỏ viền nổi màu vàng hoặc xanh xung quanh input (đôi khi trình duyệt thêm vào) thiết lập body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}5. .container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
outline:none;
background: #ffffff;
}Như bạn thấy trong đoạn code ở trên, chúng ta đã thêm hai trạng thái - body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}6 và body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}7. Bằng cách này thì hiệu ứng không biến mất khi bạn dừng hover lên trên input. Quan trọng hơn, hiệu ứng cũng nổi bật khi input đang được sử dụng.Tạo Hiệu ứng Chuyển tiếpĐể làm cho hiệu ứng chuyển tiếp xảy ra, chúng ta cần thêm một vài dòng code. Quay trở lại tất cả các thuộc tính nơi chúng ta định nghĩa phong cách của input - body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}0 body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}9. Trước dấu ngoặc đóng thêm đoạn code sau đây:0 Chúng ta đang sử dụng cách viết tắt thuộc tính transition, nhưng thay vào đó chúng ta có thể xác định ba tham số riêng. Đầu tiên, chúng ta đang nói rằng hiệu ứng chuyển tiếp chỉ nên có tác dụng đối với thuộc tính background. Tiếp theo, chúng ta đang nói rằng hiệu ứng chuyển tiếp sẽ cần hơn phân nửa giây. Cuối cùng, chúng ta định nghĩa hiệu ứng chuyển tiếp sẽ là ease. 0 không phải là hiệu ứng duy nhất có thể hoạt động ở đây, ví dụ chúng ta còn có thể sử dụng 1 hoặc 2. Nó chỉ trông hơi khác nhau một chút. Hãy tự mình thử cái nào mà bạn thích. Phong cách cho input giờ đây giống như code bên dưới. 1 CSS Transitions Hoạt động Như thế nào?Nếu bạn không biết tí gì về CSS Transitions, hãy để tôi mô tả vắn tắt cho bạn. Thứ nhất, để hiệu ứng chuyển tiếp hoạt động, thuộc tính cần được định nghĩa trên trạng thái mặc định chứ không phải trên trạng thái hover, hoặc active hoặc focus. CSS Transitions cho phép chuyển đổi dần hiệu ứng và bạn có thể định nghĩa các tham số cụ thể để kiểm soát, chẳng hạn như thuộc tính sẽ được tạo hiệu ứng, thời gian chuyển tiếp và kiểu chuyển tiếp. Bạn có thể có nhiều hiệu ứng chuyển tiếp được thiết lập cho một phần tử. Nhưng, quan trọng hơn hết là bạn nên luôn luôn bao gồm các tiền tố nhà cung cấp (vendor prefix) để tương thích với các trình duyệt khác nhau, vì sự hỗ trợ cho thuộc tính này vẫn chưa phổ biến. Để tìm hiểu thêm hãy xem bài viết: CSS3 Transitions và Transforms Từ đầu #2. Mở rộng Input Khi Hover Mở rộng Input Khi HoverTrong ví dụ này, ô tìm kiếm sẽ bắt đầu dưới dạng một biểu tượng chiếc kính lúp. Khi bạn di chuột lên biểu tượng, ô tìm kiếm sẽ mở rộng, sau đó bạn có thể nhập vào truy vấn của mình. Phần lớn code trong ví dụ này sẽ rất giống với ví dụ trước đó. HTML2 CSS3 Để bắt đầu trang trí, chúng ta cần phải định nghĩa phong cách CSS của hộp tìm kiếm. Hãy thêm tất cả các thuộc tính CSS khác nhau từng cái một để bạn có thể biết chính xác những gì đang xảy ra. 4 Như bạn cũng có thể thấy tôi đã định nghĩa lại thuộc tính transition để chỉ có tác dụng đối với chiều rộng. Tôi giữ nguyên thời gian bởi vì nó đủ nhanh để không làm phiền người dùng, nhưng vẫn đủ lâu để tạo ra một hiệu ứng đẹp. Dưới đây là đoạn code để áp dụng lại màu cho văn bản giữ chỗ. 5 Và một lần nữa chúng ta trang trí biểu tượng bằng CSS. Nó nên giống với trong ví dụ trước. 6Thêm Hiệu ứng Hover Thêm Hiệu ứng HoverĐiều cuối cùng chúng ta cần làm là xác định hộp tìm kiếm sẽ trông giống như thế nào khi nó được hover. Trong đoạn code dưới đây, thuộc tính đầu tiên đảm bảo rằng form không có hiệu ứng phát sáng của trình duyệt và khi bạn đang sử dụng input — khi đang gõ vào nó — hộp tìm kiếm vẫn được mở rộng. Thuộc tính ở giữa chỉ mở rộng input để có chiều rộng đầy đủ khi hover. 7 Điều cuối cùng xảy ra trong code ở trên là khi hover thì biểu tượng sẽ thay đổi màu sắc của nó. Đây chỉ là một chi tiết nhỏ để nhanh chóng hiển thị cho người dùng biết hộp tìm kiếm đang hoạt động, chứ không phải là một input tĩnh. Sự thay đổi không được cài đặt bằng một hiệu ứng chuyển tiếp. #3. Tăng Kích thước Biểu tượng khi Hover Tăng Kích thước Biểu tượng khi HoverTrong tất cả bốn ví dụ, thì ví dụ này là tinh tế nhất, cả về code và hiệu ứng trực quan. Trong trường hợp này, biểu tượng kính lúp sẽ bật lên một chút và tăng kích thước. HTMLMột lần nữa markup HTML của biểu tượng và hộp tìm kiếm giống như trong hai ví dụ trước đó. Ngoại trừ, tất nhiên là 3. 8 CSSCSS cho ví dụ này không có gì đặc biệt. Phần lớn nó bắt đầu rất giống với các ví dụ đầu tiên, nơi trạng thái mặc định không có gì khác nhau cả. Bên dưới là code cho container và input. Lưu ý rằng không có hiệu ứng chuyển tiếp trên input trong lúc này. 9 Một lần nữa, chúng ta có các thuộc tính giữ chỗ. Bây giờ, hãy nhìn vào nó, ta sẽ thấy biểu tượng cho ví dụ này cũng tương tự. Nó giống về màu sắc, vị trí và vân vân. Tuy nhiên, tôi đã thêm hiệu ứng chuyển tiếp vào nó. Những hiệu ứng chuyển tiếp này áp dụng trên tất cả các thuộc tính, nó là một cách viết ngắn gọn hơn thay vì phải viết ra từng thuộc tính riêng. 1Thêm các Hiệu ứng HoverThêm các Hiệu ứng Hover2Có một vài điều xảy ra trong đoạn code trên. Thứ nhất, chúng ta đang thay đổi màu sắc của biểu tượng khi hover và di chuyển nó cao hơn một chút để nó canh giữa theo chiều dọc khi nó lớn hơn. Thứ hai, chúng ta thêm một sự biến đổi vào biểu tượng khi hover để nó lớn hơn 1,5 lần so với kích thước ban đầu của nó. Bởi vì hiệu ứng chuyển tiếp được định nghĩa tác động đến tất cả các thuộc tính, do đó nó xuất hiện nếu biểu tượng này lớn lên khi hover. Một lần nữa, hãy xem qua Hiệu ứng Chuyển Tiếp và Biến đổi trong CSS3 để tìm hiểu thêm về thuộc tính biến đổi. #4. Khi Hover Button Khi Hover ButtonKhông giống như ba ví dụ trước, ví dụ này sẽ phức tạp hơn. Khi hover, một button sẽ trượt lên phía trên input để cho phép bạn tiếp tục — giống như Send hoặc Go. Button sẽ có biểu tượng kính lúp bên trong nó.Send hoặc Go. Button sẽ có biểu tượng kính lúp bên trong nó. HTML3Một lần nữa markup HTML của biểu tượng và hộp tìm kiếm giống như trong hai ví dụ trước đó. Ngoại trừ, tất nhiên là 3. CSSCSS cho ví dụ này không có gì đặc biệt. Phần lớn nó bắt đầu rất giống với các ví dụ đầu tiên, nơi trạng thái mặc định không có gì khác nhau cả. Bên dưới là code cho container và input. Lưu ý rằng không có hiệu ứng chuyển tiếp trên input trong lúc này. 4Một lần nữa, chúng ta có các thuộc tính giữ chỗ. 5Bây giờ, hãy nhìn vào nó, ta sẽ thấy biểu tượng cho ví dụ này cũng tương tự. Nó giống về màu sắc, vị trí và vân vân. Tuy nhiên, tôi đã thêm hiệu ứng chuyển tiếp vào nó. Những hiệu ứng chuyển tiếp này áp dụng trên tất cả các thuộc tính, nó là một cách viết ngắn gọn hơn thay vì phải viết ra từng thuộc tính riêng. 61Thêm các Hiệu ứng HoverCó một vài điều xảy ra trong đoạn code trên. Thứ nhất, chúng ta đang thay đổi màu sắc của biểu tượng khi hover và di chuyển nó cao hơn một chút để nó canh giữa theo chiều dọc khi nó lớn hơn. Thứ hai, chúng ta thêm một sự biến đổi vào biểu tượng khi hover để nó lớn hơn 1,5 lần so với kích thước ban đầu của nó. Bởi vì hiệu ứng chuyển tiếp được định nghĩa tác động đến tất cả các thuộc tính, do đó nó xuất hiện nếu biểu tượng này lớn lên khi hover.Thêm Hiệu ứng HoverMột lần nữa, hãy xem qua Hiệu ứng Chuyển Tiếp và Biến đổi trong CSS3 để tìm hiểu thêm về thuộc tính biến đổi. Thuộc tính cuối cùng chỉ thay đổi nền của button nếu bạn hover lên button. Thật tốt khi cho phép người dùng biết rằng button đang hoạt động và bạn có thể nhấp vào nó để submit thông tin tìm kiếm; không có gì thú vị khi có một button không hoạt động. 8Tóm tắtTóm tắtVâng, điều đó đưa chúng ta đến phần kết thúc của các thử nghiệm CSS của chúng ta! Chúng ta đã lấy một form tìm kiếm cơ bản và sử dụng một số hiệu ứng để thay đổi hành vi của nó. Bạn có đề xuất gì trong việc thay đổi một input tìm kiếm như thế này không? Những khía cạnh nào khác của nó mà bạn có thể áp dụng hiệu ứng chuyển tiếp hoặc biến đổi trong CSS? Hãy cho chúng tôi biết trong phần bình luận nhé! |
