Scott Blaine » html http://scottblaine.com Omaha web developer Wed, 12 Oct 2011 01:00:22 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 The HTML and CSS Behind Google’s Search Bar http://scottblaine.com/the-html-and-css-behind-googles-search-bar http://scottblaine.com/the-html-and-css-behind-googles-search-bar#comments Wed, 28 Sep 2011 01:00:15 +0000 Scott http://scottblaine.com/?p=479 Earlier this year I was working on a project that had a text entry box similar to Google’s. It was a long bar in which you entered a line of text with a button at the end to “Add” it (instead of “Search”). I really liked Google’s styling for their search bar and figured I would simply “lift” the HTML and CSS for it. However Google’s HTML source code, if you’ve ever looked at it, is heavily minimized. Everything is on one line with short, obscure CSS class names like “gac_v2.” Great for serving up webpages quickly, not so fun for trying to figure out how they’re styling their pages. I tried to find a simple “how to” for styling something in a similar way, but alas, there was none to be found.

Not to be deterred, I dug into their code, copied the portion I was interested in, removed all of the useless cruft, gave the CSS classes slightly more useful names, and came up with a working version that looked like this:

That should look rather familiar to you.

Seeing as I couldn’t find anything on the Intertubes for this (and I’m probably not the only one) I thought it might be helpful to share the HTML and CSS code for this — there’s also one image which is used as a gradient background for the search button (entirely optional; it just makes it look nice). If you find this useful leave a comment and let me know.

Right click and Save as:

 

]]> http://scottblaine.com/the-html-and-css-behind-googles-search-bar/feed 0