Search component là một thành phần quan trọng trong trang web. Nó giúp người dùng dễ dàng có thể tìm thấy nội dung mà họ mong muốn ở trong website của bạn. Trong bài viết hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những thiết kế search component đẹp mắt được xây dựng bằng HTML, CSS và Javascript nhé! Tổng hợp đầy đủ các hiệu ứng chuyển động dành cho search form được xây dựng bằng CSS và Javascript. See the Pen CSS Animated Search Box Concepts by Brandon Kennedy (@brandonkennedy) on CodePen. Nguồn Tạo Hiệu Ứng Chuyển Động Cho Search Form Và Icon Khi bạn nhấn vào icon tìm kiếm thì nó sẽ tự động hiển thị ô input để cho người dùng nhập từ khóa vào ô tìm kiếm. Đồng thời cũng thay đổi icon tìm kiếm sang icon mũi tên. See the Pen Search button animation by Kristy Yeaton (@kristyjy) on CodePen. Nguồn Search Form Bằng HTML CSSSearch Form này được tạo từ HTML CSS, do đó bạn có thể áp dụng cho nhiều loại dự án web khác nhau. Điểm mình thích ở nó là có thể dễ dàng thu hút sự chú ý của người dùng bằng việc dùng màu đỏ làm chủ đạo. See the Pen Search Form With Animated Search Button by Himalaya Singh (@himalayasingh) on CodePen. Nguồn Tạo Input Search FormĐiểm nổi bật của input search form này là khi người dùng gõ nội dung vào ô tìm kiếm thì border ở dưới sẽ tự động chuyển màu với độ rộng bằng đúng kích thước ký tự đã nhập. See the Pen Tripadvisor input highlight by Petr Gazarov (@petrgazarov) on CodePen. Nguồn Tạo Animation Cho Search Form Bằng CSSĐây có thể được xem là search form được sử dụng phổ biến hiện nay. Với việc chỉ sử dụng icon tìm kiếm để hiển thị chức năng thì nó tiết kiệm cho bạn khá nhiều diện tích trên website. Khi người dùng nhấn vào icon này thì nó sẽ tự động hiển thị ra ô iput với hiệu ứng chuyển động đẹp mắt. See the Pen Animated Search Box by Alex Tkachev (@alexpopovich) on CodePen. Nguồn Tạo Search Form Kết Hợp IconĐây là một search form giúp người dùng có thể dễ dàng tìm kiếm hơn bằng cách sử dụng các icon để biểu thị cho từng loại nội dung riêng biệt như hình ảnh, người dùng... See the Pen DailyUI #022 - Search by Fabio Ottaviani (@supah) on CodePen. Nguồn Tạo Search Form Theo Kiểu MaterialĐây là loại search form được thiết kế theo kiểu material. Bên trái của ô tìm kiếm bạn có thể sử dụng để đặt logo của công ty hay website của mình. Điểm đặc biệt của nó là khi người dùng nhấn vào ô input thì nó sẽ tự động mở rộng theo cả chiều cao và chiều rộng. Từ đó sẽ giúp mọi người có thể dễ dàng nhập các nội dung có nhiều ký tự. See the Pen Material Design: Search Bar by Matt (@uixmat) on CodePen. Nguồn Cách Tạo Search Form Bằng JqueryNếu bạn cần tiết kiệm diện tích trên website thì có thể sử dụng search form này. Nó sẽ được hiển thị bên dưới thanh tiêu đề khi người dùng nhấn vào icon tìm kiếm. See the Pen Sliding Search Form by Thierry Dulieu (@Linuance) on CodePen. Nguồn Cách Tạo Search Form ResponsiveĐiểm mình thích ở search Form này là việc có thể mở rộng hay rút gọn ô tìm kiếm thông qua icon. Với ô input chỉ sử dụng border bottom, nó mang lại cho người dùng cảm giác thiết kế đơn giản và hiện đại cho website. Ngoài ra nó còn được thiết kế responsive để áp dụng hiển thị trên nhiều loại màn hình thiết bị khác nhau. See the Pen Hidden search box slide down by Matt Saling (@msaling) on CodePen. Nguồn Thiết Kế Search Form HTML Cho WebsiteĐây là một loại search form được thiết kế theo kiểu Bootstrap. Nó chỉ hiển thị khi người dùng nhấn vào icon tìm kiếm. See the Pen Animated Search Interaction by Jon Kantner (@jkantner) on CodePen. Nguồn Xây Dựng Search Form Kết Hợp Với Background CSSĐiểm nổi bật nhất của search form này là cách phối màu giữa background và ô input. Khi người dùng nhấn vào icon thì ô tìm kiếm sẽ từ từ hiện ra kèm theo hiệu ứng chuyển động đẹp mắt. Ngoài ra nó còn có chức năng đóng giúp người dùng có thể dễ dàng hủy việc tìm kiếm của mình. See the Pen Search box animation by Denis Pasko (@faustdp) on CodePen. Nguồn Tạo Search Form Kết Hợp Với Border CSSHiệu ứng của search form này được thiết kế dựa trên đường viền và box shadow. Khi người dùng nhấp vào ô tìm kiếm thì border bên dưới và bên phải sẽ thay đổi kích thước, màu sắc tạo ra cảm giác 3D dành cho ô input. See the Pen :focus-within and :placeholder-shown selectors by Mert Cukuren (@knyttneve) on CodePen. Nguồn Thiết Kế Search Form UIĐây là dự án tập hợp các search form UI dành cho website. Có 4 loại hiệu ứng chính dành cho ô tìm kiếm là thay đổi màu nền, thay đổi độ rộng, phóng to icon và hiển thị icon tìm kiếm khi người dùng nhấp vào search form. See the Pen rlnvz by Paula Borowska (@paulaborowska) on CodePen. Nguồn Tạo Search Box Bằng Thư Viện Scene.jsĐây là search box được xây dựng dựa trên thư viện scene.js. Khi bạn nhấp vào icon thì ô iput sẽ được mở rộng từ chính giữa kèm theo sự di chuyển của icon tìm kiếm và placeholder input. See the Pen Scene.js example search box animation by Daybrush (@daybrush) on CodePen. Nguồn Kết Hợp Seach Form Với NavigationĐây là dự án tập hợp các ví dụ về việc kết hợp search form với thanh tiêu đề trong website. Nó có thể sẽ hiển thị ô tìm kiếm nằm bên dưới, chính giữa, bên phải... so với navigation. See the Pen Header Search by Aleksandar Čugurović (@choogoor) on CodePen. Nguồn
Tạo Search Box Bằng CSS Và JavascriptSearch box này được thiết kế bằng CSS và Javascript. Điểm nổi bật của nó là hiệu ứng chuyển động khi chuyển từ icon tìm kiếm sang icon đóng. See the Pen Search box v.2 by Takane Ichinose (@takaneichinose) on CodePen. Nguồn Tạo Search Form Input Bằng JavascriptSearch form input được xây dựng bằng Javascript với thiết kế nổi bật là sử dụng đường viền kết hợp với shadow cho ô input. See the Pen Expanding Input by Steve Gardner (@ste-vg) on CodePen. Nguồn Tạo Hiệu Ứng Chuyển Động Cho Search IconÔ tìm kiếm này được thiết kế bằng html và css. Khi người dùng nhấn vào icon thì ô input sẽ tự động được mở rộng. See the Pen Search bar by Takane Ichinose (@takaneichinose) on CodePen. Nguồn Tạo Form Search Box Bằng CSS JavascriptSeach box được xây dựng bằng css va javascript. Với hiệu ứng chuyển động đẹp mắt và icon tìm kiếm được thiết kế tinh xảo giúp mang lại cảm giác hiện đại cho trang web. See the Pen Expanding Animated search box Using Jquery by rajeshdn (@RajRajeshDn) on CodePen. Nguồn Xây Dựng Hiệu Ứng Chuyển Động Cho Icon Trong Search FormĐây là ô search form được thiết kế bằng việc sử dụng transparent background cho ô input. See the Pen Search Form Animation by Aleksandar Čugurović (@choogoor) on CodePen. Nguồn Cách Tạo HTML Form SeachBackground của ô tìm kiếm sẽ được tự động thay đổi khi người dùng focus vào ô input. See the Pen Search Box by Roy Motloutsi (@emelent) on CodePen. Nguồn Cách Tạo Search Form Kết Hợp Box ShadowÔ tìm kiếm được thiết kế bằng việc áp dụng box shadow cho ô input và icon. See the Pen Expandable Search box using jquery by rajeshdn (@RajRajeshDn) on CodePen. Nguồn Cách Tạo Search Form EmailĐiểm nổi bật của nó là hiệu ứng chuyển động cho ô tìm kiếm email. Ô input sẽ được hiển thị bên dưới icon tìm kiếm. See the Pen expanding search box - toggle animated search box by rajeshdn (@RajRajeshDn) on CodePen. Nguồn Cách Tạo Search Form Bằng Input HTMLSearch form kết hợp icon đóng mở giúp người dùng có thể dễ dàng mở rộng hay thu gọn ô input tìm kiếm. See the Pen Search Form with Toggle Button by Mark Zolton (@mczolton) on CodePen. Nguồn
Thiết Kế Search Bar Cho WebsiteSearch bar được thiết kế tinh tế bằng việc sử dụng màu placeholder input trùng với màu của trang web. Ngoài ra ô tìm kiếm cũng được xây dựng theo kiểu material bằng việc sử dụng một đường viền bên dưới cho ô input. See the Pen Animated search bar by Austin Dudas (@austin_dudas) on CodePen. Nguồn Thiết Kế Animated Search BoxCác tạo hiệu ứng chuyển động đẹp mắt dành cho ô tìm kiếm. See the Pen Search overlay by Steve (@stevemckinney) on CodePen. Nguồn Thiết Kế Search Form BootstrapThiết kế và tạo hiệu ứng chuyển đồng dành cho search form bootstrap. See the Pen Expanding text box/button by Sam Daitzman (@sdaitzman) on CodePen. Nguồn Thiết Kế Search Bar Bằng CSS Và JavascriptThiết kế search bar kết hợp với hiệu ứng chuyển động dành cho button tìm kiếm. See the Pen Emoji Search Bar by Lashan Dias (@lashan) on CodePen. Nguồn Tạo Animation Search Bar Bằng GSAPThiết kế hiệu ứng chuyển động cho ô tìm kiếm bằng cách sử dụng thư viện gsap. See the Pen Search Animation GSAP by Valery Alikin (@AlikinVV) on CodePen. Nguồn Tạo Searchbox Bằng JquerySearchbox được xây dựng bằng Jquery với hiệu ứng chuyển đổi từ icon tìm kiếm sang icon đóng đẹp mắt. See the Pen Search icon animation by Bram Krekels (@BramKrekels) on CodePen. Nguồn Thiết Kế Search Form Input JavascriptSearch form input xây dựng bằng Javascript. Với thiết kế đẹp mắt bằng việc kết hợp màu nền với font chữ cho ô tìm kiếm. See the Pen ⚡️ Search Input ⚡️ #We❤️Frontend by 0guzhan (@0guzhan) on CodePen. Nguồn Bài viết liên quan:
Tổng kết:Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những component search hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ! |
