CODEWITHSUNDEEP
csssprite
AgmLauncher
AgmLauncher

Reputation: 7270

Alternative to CSS background sprites

A while ago I found an article which discussed a solution to an alternative to the traditional way in which CSS sprites are used and designed.

A common issue is that you need to leave space around a part of the sprite if you don't want to accidentally have other parts of the sprite "bleed" into certain elements. Thus you can use diagonal layouts and things to alleviate this problem, but they all require a lot of open white space.

This article demonstrated an alternative which let you create zero white space sprites, and let you define the exact area and dimensions of the image you want to use without worrying about bleeding. I believe it used the CSS content property in the method, but I can't be sure.

I really want to find this article again but I can't seem to find it :(

I'm sorry for my vague description, but for anyone else who saw the article, they'll know what I'm talking about. Any help finding the link? Thanks!

Upvotes: 1

Views: 500

Answers (1)

Maciej Gurban
Maciej Gurban

Reputation: 5739

I think what you're referring to might be creating font icons. It allows you to have retina-ready images, while at the same time restricting you to 1 color. There are currently two good solutions to do that:

There's also the way of creating SVG modifiable shapes, which in turn allows you to use shapes of almost unlimited colors and complexity. This solutions however is not perfect, as it's based upon SVGs, which are not supported by older browsers

Upvotes: 1

Related Questions