Tag Archives: sprites

SteveSpangler.com Web Design Launched

Posted on November 4, 2008

Stevespangler.com Header image

Visit Katz Web Design-developed SteveSpangler.com

As announced in August, Steve Spangler chose Katz Web Design to develop their blog. Their previous blog was aging and didn’t provide the functionality they needed. I was provided with a design by Blake Sumrall (at Steve Spangler, Inc.) and was tasked with converting it to a website.

The development of this site required lots of tricks that convert WordPress into more of a CMS (Content Management System). Read on to learn some of the WordPress customization.  Read more…

Posted in Web Design Portfolio, WordPress | Tagged , , , , , , , , , , , | 4 Comments

Google’s Sprite Image is a Thing of Beauty

Posted on June 3, 2008

Google Sprite changes over time:

If you want to know more about CSS sprites and how to put them together, feast your eyes on Google’s:

Here’s the history of Google’s PNG sprite image

Google's Sprite Image

http://www.google.com/images/nav_logo.png

Google's Sprite Image

http://www.google.com/images/nav_logo2.png

Google's Sprite Image

http://www.google.com/images/nav_logo3.png

Google's Sprite Image

http://www.google.com/images/nav_logo4.png

Google's Sprite Image

http://www.google.com/images/nav_logo5.png

Google's Sprite Image

http://www.google.com/images/nav_logo6.png

Google Image Sprite

http://www.google.com/images/nav_logo7.png

http://www.google.com/images/srpr/nav_logo8.png

http://www.google.com/images/srpr/nav_logo9.png


March 25, 2010 – http://www.google.com/images/srpr/nav_logo10.png


April 1, 2010 – http://www.google.com/images/srpr/nav_logo11.png


April 21, 2010 – http://www.google.com/images/srpr/nav_logo12.png


May 4, 2010 – http://www.google.com/images/srpr/nav_logo13.png

Google Sprite
July 2, 2010 – http://www.google.com/images/srpr/nav_logo14.png (Added a magnifying glass)  Read more…

Posted in CSS | Tagged , , , , , , | 8 Comments

Multiple Matte Colors for CSS Sprites

Posted on February 7, 2008

Here’s the problem: I want to use CSS Sprites for transparent images, and they require different matte colors.

ArrayThe promise of CSS Sprites is great: you can combine many small images into one bigger image, and use CSS to reveal only the revelant parts. But what if you have a background image, and the background changes color on :hover? When trying to save the smilies, you can only choose one matte color. I need multiple matte colors!

The issue really is a pain when you have already given your object a stroke. Using the Appearance panel, we’ll make everything happy in the world again!

I want the three smileys to be combined as one  Read more…

Posted in Code, CSS, Design, Tutorial | Tagged , , , | 8 Comments