Scott Blaine » css 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 Image-free tabs with clean CSS http://scottblaine.com/image-free-tabs-with-clean-css http://scottblaine.com/image-free-tabs-with-clean-css#comments Sun, 30 Aug 2009 01:00:17 +0000 Scott http://scottblaine.com/?p=370 It’s slightly amazing to me how hard it is to find someone that has image-free tabs that have clean CSS. I found a lot of articles on sliding-door tabs (requiring images) and a few articles that required CSS for each individual tab (yuck!). And what I wanted wasn’t even complex:

tabs

Simple, right? I sure wasn’t going to go reinvent the wheel by writing my own CSS for them though. Thankfully after searching for a bit I came across SimpleBits’ Mini Tabs. I didn’t want mini-tabs, but the HTML and CSS was remarkably clean. Only 4 CSS declarations on a simple HTML list with a class=”active” for the current tab. With some modification to the CSS I was able to come up with tabs that looked like the above (even looks good in IE7, amazingly).

So, if you want some decent looking/functioning tabs go yank the HTML/CSS from the above link.

]]> http://scottblaine.com/image-free-tabs-with-clean-css/feed 0