2

I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.

To do this, i'd like all the artwork to be in 1 png file, a css sprite.

My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.

Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height. I'd like to know, is this even possible? It seems background-position does not support this at all.

I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.

I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.

Community
  • 1
  • 1
rajmv
  • 31
  • 3

1 Answers1

1

Spent another few hours twiddling with css, but could not get sprites to work for dialogs.

But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.

I'm using the technique from How can I scale an image in a CSS sprite

See http://mediabeez.ws in about a month for the opensource release of animated dialogs. I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.

Community
  • 1
  • 1
rajmv
  • 31
  • 3