Hướng dẫn tạo thanh search bằng CSS3

0
522

[VIDEO TUT]

  • Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :

Xin chào các bạn, ở bài học html và css ngày hôm nay tôi xin giới thiệu tới các bạn cách tạo thanh search bằng CSS3

1. Giới thiệu

  • Trong những trang web lớn thì luôn luôn có thanh search để tiện cho chúng ta tìm kiếm một mục nào đó trong hàng nghìn bài viết. Thì trong bài viết hôm nay tôi sẽ hướng dẫn các bạn tạo một thanh search bằng html và css 3

2. Demo code

  • Tôi sẽ bắt đầu với đoạn mã HTML để tạo ra cấu trúc của thanh search:

  • Tiếp theo với CSS:

  • Như vậy là đã có bộ khung search cho nó tôi muốn tạo thêm hiệu ứng hover vào khi di chuyển con trỏ đến thì sẽ ẩn kính lúp và hiện bộ khung search:

  • Tiếp theo là hover với 2 thuộc tính afterbefore:

  • Như vậy là ta đã có bộ khung search với đầy đủ hiệu ứng và thuộc tính cho nó giờ ta sẽ kiểm tra trên trình duyệt xem đã ok chưa nhé.

3. Hiển thị trên trình duyệt

  • Hiển thị ban đầu:

1

  • Sau khi di chuyển con trỏ với hiệu ứng hover:

1

4. Tổng Kết

  • Như vậy trong bài học hôm nay tôi đã hướng dẫn các bạn làm thanh search với hiệu ứng hover của Css3. Qua bài này hi vọng sẽ giúp các bạn áp dụng được vào thực tế. Xin chào chúc các bạn học thật tốt.

Xem thêm các bài học liên quan:

Tác Giả: Hà Trần Vietpro

 

[Total: 2    Average: 2/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here