27 Search Boxes With HTML and CSS
CSS experiments with a search form input and button. In this collection are the pens for anything related to search box, search bar, global search area that we can put to a website page.
Searching Animation
Inspired by Another Set of Eyes by Frank Rodriguez.*needs work in Firefox but looks quite nice in Chrome and Safari. Made byRyan Mulligan. 24 April, 2016.
Inspired by Another Set of Eyes by Frank Rodriguez.*needs work in Firefox but looks quite nice in Chrome and Safari. Made byRyan Mulligan. 24 April, 2016.
Search Input Context Animation
- CSS icons
- Context animation
- Telegram App-like search loading effect
Made by Riccardo Zanutta. April 19, 2016.
Prefixbox Instant Search BoxDesign originally forked from sartios’s Pen Search Box: Expand on Hover. Made by Sverrir Sigmundarson. April 12, 2016.
Simple Mobile Search Input
This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more. Made by Tommaso Poletti. April 12, 2016.
This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more. Made by Tommaso Poletti. April 12, 2016.
Search Form ConcepA little search concept. Made by Rune Sejer Hoffmann. February 07, 2016.
Animating Search Box
An animating search box made with HTML & CSS. Made by Jarno van Rhijn. February 03, 2016.
An animating search box made with HTML & CSS. Made by Jarno van Rhijn. February 03, 2016.
Search Green Box
An interesting effect of search action. Made by Konstantin Solodovnik. February 05, 2016.
An interesting effect of search action. Made by Konstantin Solodovnik. February 05, 2016.
CSS Expanding Search Box
An expanding search box/form powered purely by CSS. Made byWebDevStudios. February 02, 2016.
An expanding search box/form powered purely by CSS. Made byWebDevStudios. February 02, 2016.
Flat CSS Search Box Concept With Loading Animation
Concept for a simple dynamic search box with a loading animation that’s displayed in the search field. Made by Ines Montani. January 24, 2016.
Concept for a simple dynamic search box with a loading animation that’s displayed in the search field. Made by Ines Montani. January 24, 2016.
Search Form Animation
Small Angular animation (could easily be vanilla js) to show user that a search result is pending. This is good UI to let the user know the server is working. Uses CSS flexbox. Made by Brendan Quinn. January 21, 2016.
Small Angular animation (could easily be vanilla js) to show user that a search result is pending. This is good UI to let the user know the server is working. Uses CSS flexbox. Made by Brendan Quinn. January 21, 2016.
CSS Search Box
It searches things, probably something similar been done before. Made by Jamie Coulter. January 12, 2016.
It searches things, probably something similar been done before. Made by Jamie Coulter. January 12, 2016.
Compact Search Input
Input[type=“search”] with transition from magnifier icon to field.Inspiration: Sandeep Virk’s dribblehttps://dribbble.com/shots/1992789-Search. Made by Uli Schumacher. January 12, 2016.
Input[type=“search”] with transition from magnifier icon to field.Inspiration: Sandeep Virk’s dribblehttps://dribbble.com/shots/1992789-Search. Made by Uli Schumacher. January 12, 2016.
Search Transformation
Interactive prototype of search form transformation. Originally made by Alex Pronsky (https://dribbble.com/aPronsky). Dribble item: https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie. Made by Lucas Bourdallé. October 22, 2015.
Interactive prototype of search form transformation. Originally made by Alex Pronsky (https://dribbble.com/aPronsky). Dribble item: https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie. Made by Lucas Bourdallé. October 22, 2015.
CSS Animated And Responsive Search Button ConceptA pure css search button that expends to a text input and a search button on click. It uses css transitions for animation and media queries to be full width under 480px. Made by napssy. October 21, 2015.
Expand Search Button
Button expands when hovering and shows search field. Made byCaroline Vermeir. October 06, 2015.
Button expands when hovering and shows search field. Made byCaroline Vermeir. October 06, 2015.
Minimalistic SearchLightly designed, expanding/collapsing search field. Clicking on “Search” expands into an input field, and clicking on the “X” clears the field and collapses it back to its initial state. Made by Ryan Altvater. August 05, 2015.
Search Input Focus Animation
A simple animation for the focus event on a search input. Made by Nicolás J. Engler. July 26, 2015.
A simple animation for the focus event on a search input. Made by Nicolás J. Engler. July 26, 2015.
Search Input With AnimationMade by Arlina Design. April 12, 2015.
from : http://cssparadise.com/
No comments: