phonydev.com

Easy shiny buttons and toolbars

• posted on: February 22, 2009
• filed under: UI, images, pixels

• This post suggests an easy way to have shiny buttons or toolbars or anything shiny. You can use any color with a single image.

  Screenshot/demo

  Here’s a screenshot.

  

  And here you can see the demo.

  The code

  You put a semi-transparent PNG image, 1 pixel wide by any pixel high, as a background-image on the element you want to make shiny and then use your selected color as background-color. Simple as that.

  .mybutton {
    background-image:url(mask.png);
    background-position: center;
    background-color: #4a6C9b;
  }

  Mask image

  Now about the image that you use as background? It’s a 1×1000 image where the top 1×500 of it is about 80% transparent and the the bottom half is 100% transparent.

  Why 1000 pixels? Too many? Well, I chose 1000 just to be on the safe side if the user resizes the font. The thing is that for this type of image 1000 or 100 doesn’t matter for the file size. In fact 1×10 image is 106 bytes and 1×1000 is 120 bytes.

  I updated my script that generates the shiny glossy overlays for icons (see previous post) to generate the new type of image. The script can be called like this:
  http://tools.w3clubs.com/mask/mask.php?type=h for a 1×100 image (default)
  http://tools.w3clubs.com/mask/mask.php?type=h&x=1000 1×1000 image
  http://tools.w3clubs.com/mask/mask.php?type=h&x=10 - 1×10 image

  The code that generates the images is on github if you want to customize it.

  Browser support

  Since there’s nothing complicated in this technique it will work fine in Safari, Firefox and IE7,8. IE6 will show the semi-transparent PNG8 as fully transparent so your shiny element will degrade gracefully to a non-shiny one. For the rounded buttons, since I’m using border-radius, they will not be rounded in IE.

  data: url

  For performance purposes it’s best if you have less HTTP requests. So it makes sense to replace that minuscule 120 bytes image with a base64 data: url. That’s what I used for the demo, so just check the source to see how it looks like.

  Thanks

  And the demo page once again.

No comments yet

Leave a comment