Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS
TIL
720
HTML5
24
CSS3
49
White

Tấn Huy viết ngày 04/08/2018

Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS

Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp chọn vào sẽ có hiệu ứng từ từ dài ra và từ từ thu ngắn lại khi bỏ chọn giống như gậy như ý của Tề Thiên Đại Thánh :v

Tạo thanh tìm kiếm đơn giản

Trước hết chúng ta cần phải tạo được một thanh tìm kiếm đơn giản với HTML:

<form>
        <input type="text" name="search" placeholder="Search..">
</form>

Kết quả chúng ta sẽ có được một thanh tìm kiếm như sau alt text
Đây là một thanh tìm kiếm bình thường tạo bởi thẻ <form> của html với thuộc tính placeholder để có được chữ "Search..." bên trong khung tìm kiếm

"Trang điểm" thanh tìm kiếm bằng CSS

Trước khi đi đến tạo hiệu ứng cho thanh tìm kiếm thì ta sẽ tiến hành "trang điểm" cho nó một tí bằng CSS

    input[type="text"] {
      width: 130px;
      box-sizing: border-box;
      border: 1px solid black;
      border-radius: 4px;
      outline:none;
      padding: 12px 14px;
    }

Sau đoạn code CSS trên ta sẽ được một thanh tìm kiếm nhìn có vẻ ổn hơn với độ dài được giới hạn là 130px (outline:none với mục đích loại bỏ viền màu xanh mặc định của trình duyệt mỗi khi ta nhấp chọn vào thanh tìm kiếm, ta sẽ làm hiệu ứng màu sắc hơn đó một tí sau :3)
alt text

Tạo hiệu ứng "gậy như ý"

Làm đẹp đã xong, bước tiếp theo ta tiến hành đi đến tạo hiệu ứng cho thanh tìm kiếm mỗi khi nhấp chọn vào. Thứ nhất là dài ra. Để khi nhấp chọn vào thanh tìm kiếm nó sẽ dài ra thì ta dùng :focus để thiết lập cho nó như sau:

input[type="text"]:focus{
    width:500px; 
}

Khi nhấp chọn vào thanh tìm kiếm thì độ dài của nó sẽ tăng từ 130px lên 500px (chúng ta có thể làm cho nó dài hơn nếu muốn bằng việc tăng width lên)
alt text
Dài ra đã có, tuy nhiên việc dài ra này diễn ra quá nhanh khiến ta không cảm thấy mượt mà và có nét chưa hiệu ứng giống "gậy như ý" :v. Cho nên ta sẽ thêm hiệu ứng từ từ vào để việc dài ra trông mượt mà hơn bằng cách thêm transition vào đoạn code CSS ở trên, ta được:

    input[type="text"] {
      width: 130px;
      box-sizing: border-box;
      border: 1px solid black;
      border-radius: 4px;
      outline:none;
      padding: 12px 14px;

      transition:0.6s ease-in-out;
    }

Việc thêm transition vào sẽ giúp cho sự dài ra của thanh tìm kiếm diễn ra chậm hơn nên sẽ trông mượt mà hơn. Còn 0.6s ở đây là thời gian từ lúc bắt đầu dài ra đến lúc đạt được kích cở tuyệt đối mà chúng ta giới hạn, bạn có thể hoàn toàn tăng thời gian delay lên nếu muốn quá trình diễn ra chậm hơn (chậm ít thôi, chậm nhiều mất hứng lắm :v). Ngoài ra vì việc bỏ đi viền xanh ghi nhấp vào nên ta sẽ trang trí thêm một tí màu để khi nhấp vào trông sẽ đẹp hơn (ở đây mình lọn màu hồng nhạt :3) ta sẽ được đoạn code sau:

input[type="text"]:focus{
    width:500px; 
    background-color:lightpink;
}

Đây là thanh tìm kiếm của chúng ta sau khi nhấp chọn (trông quá cute :v)
alt text
Và dĩ nhiên, hiệu ứng chuyên sang màu hồng cũng sẽ từ từ chuyển sang dựa trên thời gian bạn xét ở transition.

Vậy là đã xong việc tạo nên một thanh tìm kiếm với hiệu ứng "gậy như ý" của Tôn Đại Thánh. Chúng ta có thể kết hợp nó vào Navigation Bar để trông hay hơn.

See the Pen

Link bài tham khảo

Mình tham khảo tại W3school ở đây nha

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
19 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
8 1
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 1 năm trước
8 1
White
7 0
Sau khi đã tìm hiể về Grid ở hai phần trước về các property thông dụng của grid ((Link), (Link)) thì chúng ta cũng đã thấy grid rất hữu dụng vì tha...
Tấn Huy viết 1 năm trước
7 0
White
6 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 1 năm trước
6 0
Bài viết liên quan
White
15 1
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hà Phạm viết hơn 3 năm trước
15 1
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
19 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!