Guymon

Transparent CSS Sprites

Nette Idee für Themes:

The idea is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily.

Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element. The only thing you need to pay attention to is that the colour surrounding the transparent part of the image matches the background in which you are using the techinque. This stops the background colour bleeding in to other parts of your image.

CSS Sprit

Hier gibt es noch einen CSS Sprite Builder: css-sprit.es. Und hier erklärt Nicholas C. Zakas warum Data URIs CSS Sprit obsolte machen werden – er hat ja recht sobald der IE 6 & 7 erndlich keine Rolle mehr spielen, aber dann ändern sich eh einige “best practices”.

SpriteMe

Ein neuer Sprit-Service: SpriteMe.

• finds background images
• groups images into sprites
• generates the sprite
• recomputes CSS background-positions
• injects the sprite into the current page

via ajaxian

SpriteMe

Steve Souders arbeitet an SpriteMe. Hier eine Liste was das Bookmarklet schon kann und was noch geplant ist:

finds background images

SpriteMe generates a list of all background images in the page. Hovering over the its URL displays the image. Each of the DOM elements that use that image are also listed.[DONE]

groups images

It’s hard to figure out which images can be sprited together, and how they should be laid out. For example, background images that repeat horizontally must fill the entire width of the sprite.
Background images positioned left bottom must be at the right top of the sprite if their container might be bigger than the image.SpriteMe determines which images should be sprited together based on these constraints. [IN PROCESS]

creates sprites

SpriteMe generates the sprite for each grouping of images. This is done using open source tools, such as CSS Sprite Generator. [TBD]

updates CSS

The final tricky part of using sprites is changing the CSS. Sometimes the CSS is a rule in a stylesheet. Or it might be a rule in an inline style block. Or it might be specified in an element’s style attribute. Because SpriteMe runs inside your web page, it can find the CSS that needs to be updated. It makes the changes in realtime, so you can visually check to confirm the sprites look right. You can export the modified CSS to integrate back into your code. [TBD]

Die Ergebnisse sind jetzt schon ganz hilfreich.

Sprite Creator

Den Sprite Creator 1.0 find ich praktisch. Man uploaded sein Sprite-Image und der Service ist eine visuelle Hilfe das richtige CSS zu erstellen. Einfach mal ausprobieren!