Nội Dung Chính
[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:
1 2 3 4 5 6 7 | <div class="vietpro"> <div class="vietpro-search"> <label class="search" for="inpt_search"> <input id="inpt_search" type="text" /> </label> </div> </div> |
- Tiếp theo với CSS:
1 2 3 4 5 6 7 8 9 10 | .vietpro{ display: table; width: 100%; height: 100%; } .vietpro.vietpro-search{ display: table-cell; text-align: center; vertical-align: middle; } |
- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .search { display: inline-block; position: relative; height: 28px; width: 28px; box-sizing: border-box; margin: 0px 8px 7px 0px; padding: 7px 9px 0px 9px; border: 3px solid pink; border-radius: 25px; transition: all 200ms ease; cursor: text; } |
- Tiếp theo là hover với 2 thuộc tính after và before:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .search:after { content: ""; position: absolute; width: 3px; height: 20px; right: -5px; top: 21px; background: pink; border-radius: 3px; transform: rotate(-45deg); transition: all 200ms ease; } .search.active, .search:hover { width: 150px; margin-right: 0px; } .search.active:after, .search:hover:after { height: 0px; } .search input { width: 100%; border: none; box-sizing: border-box; font-family: Helvetica; font-size: 15px; color: inherit; background: transparent; outline-width: 0px; } |
- 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:
- Sau khi di chuyển con trỏ với hiệu ứng hover:
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:
- HTML CSS – Tạo hiệu ứng hover với Css3 (P1)
- Hướng dẫn tạo thẻ tags trong css với thuộc tính before và after
- Tạo menu ngang đa cấp với Html và Css (P2)
- HTML CSS – Hiệu ứng hover (P2)
- Tạo thành phần phân trang với Html và Css
- Tạo menu ngang đơn giản một cấp với Html và Css (P1)
Tác Giả: Hà Trần Vietpro
[Total: 2 Average: 2/5]
