Jump to content

Suggestion: Using CSS Sprites for Icons


Ran Yefet

Recommended Posts

  • Replies 83
  • Created
  • Last Reply

The sooner an entire page is made up of CSS, and scaleable text & icons which act just like vectors, the better.

Then we can just make our logos and other essential images hi res and the sites will look awesome on retina display devices.

It's already sorted for mobile skins, but with desktop displays going the same way, we need more detailed images/icons which scale nicely. like CSS.

I noticed that when you zoom in on the user icons on the board index they are already higher res than a standard desktop display requires.

I hope at some point in the future browsers will support a vector format for logos etc.

EDIT: IPS, can you increase your images on the mobile skin to double their current resolution and change the background-size attirbute accordingly so we can have crisp images on mobile! Thanks :)

Link to comment
Share on other sites

So, this SVG, can we create our logos in this format and have a fall back to .png already with current browsers??

(I didn't know SVG was scaleable Vector Graphic. I knew it was used for some grads etc.)

Off to have a read about SVGs :)

Link to comment
Share on other sites

Excellent!

Just had a quick read up on SVG.

I have my logo in vector already so can I just save it as an SVG in Illustrator and add it to my skin as normal?

I guess I would just need to edit the template to fall back to the .png for unsupported browsers.

Don't suppose anyone fancies telling me how I would do that?

Will this method port over to the mobile skin? currently I'm just creating the images twice the size and then changing the background-size attribute so images appear crisp on my mobile skin. Could I use SVG throughout?

Obviously I know there is less support for SVG on browsers so I would have to create .png fallbacks for all SVG graphics.

Cheers.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...