Awesome CSS3 Animated Search Box

We will like to show you how we can create a really cool animated search box with CSS3 and JavaScript.
Part 1 : HTML
First of all, we have a container, div, with “search-wrapper” class. This will hold and center our search box.
The first children element of our primary container is called .input-holder. This one has a fixed width in our main container.search-wrapper. The .input-holder contains the text input and the search button.
Remember:
- The text input is positioned absolute and stretched on the full length of his “parent”
- The search button has the CSS float property with the value of right, in order to keep it on the right side of our container while animating it.
The second children element of our div is called .close ,and it acts as a container for the close icon, created using the CSS pseudo classes ::before and ::after.
Take a look at our structure:
div class="search-wrapper"> <div class="input-holder"> <input type="text" class="search-input" placeholder="Type to search" /> <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button> </div> <span class="close" onclick="searchToggle(this, event);"></span> </div>
Part 2 : CSS
Note : In order to have a light code structure and easy to read article, I will not add the vendors prefixes for any CSS property. You can easily find the complete source on the DEMO page, or in the DOWNLOAD link.
Since our demonstration is about animating with CSS, I will insist on explaining the CSS animation/ transition techniques, and not on the casual CSS properties. Now, let’s take a close look at the way I centered the main wrapper, .search-wrapper, and talk about that :
.search-wrapper { position: absolute; transform: translate(-50%, -50%); top:50%; left:50%; } .search-wrapper.active {}
Read more:http://icanbecreative.com/article/css3-animated-search-box
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu