How to Create a 3D Search Bar in HTML / CSS
Search bar are one of the essential component of a website, if you have thousands among thousands of post, you really need to put a search bar on your homepage or sidebar. And if your search bar is a little boring, users tend to look somewhere else, so you need to put a little bit of effort on creating your search bar, you can use cool Jquery autocomplete or some animation.
Today we will bring to life the 3D search bar that we did in the past, this tutorial will help you to start everything from scratch. I think this is a good way to practice your skills in HTML and CSS.
Slicing the PSD
On the 3d Search Bar PSD. Click the eye beside the layer on text ,layer 0 and button, this will make them invisible on the canvas.
You will now have a clean input field like this. Now crop it and save it as png.
Next is the buttons, what we did is duplicate the folder button and inside that folder, move the button-shadow layer 1px above. Crop it as little space as possible and same format as above. You can even grab this image
Code the 3D Search Bar
Now you can close Photoshop and open your code editor, we will start to code the search bar.
You can see that I've commented all of the div's, this is a good practice when creating a html. The only important part here is the.
Now we will use the images that we sliced. We will use CSS to achieve this.
Let me break down the CSS for you,
first we called the background of our entire search bar.
Next is we style our input field, and keep it align with the background using float and margin. Finally giving it the CSS rounded corners so we won't see any flaws on the design.
On our submit button, we used the CSS technique called CSS Sprite (read more about it on CSS-Tricks).
We use the images as background but cut the upper part by using height,
aligning them using float and margin. Cursor changes the pointer to a
hand, just thought you should know
Upon hovering the button, the image position will go up by -55px. That's the exact height of the upper button.
If you wanted to learn more about this push button effect, this tutorial will explain it better for you.
And we are done with the coding, easy isn't?
You can use this on your WordPress themes or HTML Projects, you can also add new interactive design on your search bar.
Creating such simple design combined with CSS will give us endless possibilities on creating new way of designing our site, whether for clients or personal use. I suggest that you should follow good practice while learning so you'll have a solid ground when you mature as a designer.