How to Create a 3D Search Bar in HTML / CSS

On 20 Feb, 2012 By With 11 Comments

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.

View the demo here.

You can download the HTML zip at the bottom of this tutorial!

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.

How to Create a 3D Search Bar in HTML / CSS - Sanjay Khemlani

View the demo here

If you missed the PSD tutorial you can go here, and make sure you download the PSD (we will wait for you). Now that you’re back we will start the slicing part, we will only slice two image then we will code it. Easy ;)

Slicing the PSD

How to Create a 3D Search Bar in HTML / CSS - Sanjay Khemlani

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.

How to Create a 3D Search Bar in HTML / CSS - Sanjay Khemlani

You will now have a clean input field like this. Now crop it and save it as png.

How to Create a 3D Search Bar in HTML / CSS - Sanjay Khemlani

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.

Tags: , , ,

Show some love and share!

I design / build Custom Wordpress Themes for different kinds of Clients, big or small, solo-prenuers or marketer. I've also worked with different design agencies as their 'web guy' for their Clients. I also enjoy writing tutorials and helping newbies so I can contribute to the community. Got a project in mind? Let's talk! | More about me?

11 Responses to “How to Create a 3D Search Bar in HTML / CSS”