This blog has moved

This blog is now located at http://ernestcarroll.blogspot.com/.
You will be automatically redirected in 30 seconds, or you may click here.

For feed subscribers, please update your feed subscriptions to
http://ernestcarroll.blogspot.com/feeds/posts/default.

Gmail-esque Purely CSS Gradient Buttons

I've long been a fan of buttons that don't require images. I find images a bit tedious to work with especially when it comes down to the back and forth required between Photoshop and code when you want to make adjustments. The most minor of changes can have a dramatic impact to your layout.

Google's Gmail uses webkit to generate gradient buttons for their Archive, Report Spam, etc buttons. While that's fine for some browsers it won't work with IE. For IE they use div elements with some slick CSS code. I've attempted to recreate what Gmail does, but with considerably less code. These buttons will look great in most modern browsers and will scale perfectly using your browser's zoom feature.

<style type="text/css">
  body, div {margin: 0px; padding: 0px; font-size: 12pt; } 
  body { margin: 1em; } 
  div { font-family: arial; font-size: 88%; } 
  /* control width with another div container */ 
  .wrapper { width: 600px; } 
  .border_left { border-left: solid 1px #fff !important; }
  .last { margin-right: 1em; }        
  .button_container 
  { 
    float: left; 
    position: relative; 
    border: solid 1px #bbb; 
    overflow: hidden; 
    line-height: 1.8em; 
    height: 1.8em; 
    background-color: #efefef;
    cursor: pointer; 
  } 
  .button_top  
  {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 0.9em; 
    border-bottom: solid 2px #f7f7f7; 
    background-color: #fff; 
    line-height: 0.9em;
    width: 100%;
  } 
  .button_bottom  
  {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    padding-left: 1em; 
    padding-right: 1em;
    text-align: center; 
    height: 100%; 
    white-space: nowrap; 
    line-height: 1.8em;
  }
  .arrow 
  {
    background: url(images.png) no-repeat -36px 50%;
    width: 7px;
  }
</style>

My div buttons require just 3 divs, but I've included a fourth, wrapper class, to give some structure as the buttons are designed to use 100% width without it. I also include some simple CSS reset code to get rid of margins and whatnot.

This button_container class gives me the outer border and sets the size (height, line-height) of the button. Make sure overflow: hidden is set to hide elements that may otherwise be unruly.

Each button is actually two stacked divs. Since I use relative positioning in button_container, the absolute positions used in button_top and button_bottom will use button_container's top, left, and right coordinates. There is also a 2px bottom border on button_top to give a clean, gradient-like, effect when viewing the button.

Finally, the arrow class will display the dropdown arrow in a span.

<div class="wrapper">
  <div class="button_container" style="width: 68px">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <b>Archive</b>
    </div>
  </div>
  <div class="button_container border_left" style="width: 88px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Report Spam</span>
    </div>
  </div>
  <div class="button_container border_left" style="width: 56px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Delete</span>
    </div>
  </div>
  <div class="button_container border_left last" style="width: 90px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Mark as read</span>
    </div>
  </div>
  <div class="button_container" style="width: 72px">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Move to</span>
      <span class="arrow">&nbsp;</span>
    </div>
  </div>
  <div class="button_container border_left last" style="width: 66px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Labels</span>
      <span class="arrow">&nbsp;</span>
    </div>
  </div>
  <div class="button_container last" style="width: 96px">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>More actions</span>
      <span class="arrow">&nbsp;</span>
    </div>
  </div>                
</div>

The final result looks like this in IE8:



Even if you like the look of images, these buttons will give you a professional looking layout while you code your application. Root around the code and check it out for yourself. Let me know what you think!

N900 Tethering Via iPhone 3G

I had to take a quick trip to Virginia today. It's about a 3 hour drive and once I got there I was going to have about an hour of downtime. Always preparing for the worst, I brought my iPhone (with SIM) and N900 (w/o SIM) to tinker around with while I waited.

I first scanned for wifi connections and there were plenty available. Many of them were open as well which would make things easy, but the easy road isn't always challenging. I wanted to try something different.

My iPhone is jailbroken with PdaNet installed. For those who don't know, PdaNet is a shareware application that allows you to tether your iPhone's Internet connection. There are two modes available: WiFi Router Mode and USB Mode. USB Mode wouldn't work for me since that requires PdaNet desktop installed on a PC. WiFi Router Mode requires the connecting device, in this case the N900, to create an ad hoc wifi network. This happens to be very simple to setup on the N900 much to my delight.

On the N900 go to Settings > Internet Connections. Click on the Connections button and click New. A prompt will come up asking you to tap Next to continue. After doing so, we finally get to the Connection Setup. For the Connection Name I entered N900, but you can enter anything you like. Click Next and the N900 will ask you to scan for WiFi networks, click No. The next series of questions go into more detail:

Connection Setup: Wi-Fi
Network name (SSID): pdanet
Network is hidden: Unchecked
Network mode: Ad hoc
Security method: None

Save your settings and return to desktop. Click the Battery, Clock, Time in the top bar and click Internet Connections. Your new connection will appear as N900 (if you named the new wifi connection that). Be sure to click on it and return to the iPhone.

On the iPhone, open PdaNet and check WiFi Router Mode and click Done. PdaNet will scan for a connection in which your N900 will appear as it's SSID, pdanet (if you followed my example). Press the name once it appears and PdaNet will connect. Now you can return to your N900 device and do whatever tinkering you need to do using your iPhone's 3G connection. Fulfilling and satisfying, isn't it?

PdaNet is one of many tethering apps for the iPhone. I chose it because it was the only one that worked when I was looking to tether my phone. But feel free to use similar settings with the other (free) tethering apps out there. Finally, be sure to turn off PdaNet WiFi Router Mode when you are done surfing on your N900 to conserve battery on your iPhone.