4 ms·

That pixel by pixel approach is just an 'abuse' of 'pure css'. Of course you can have 1x1 px elements and colour them and get a proper image. I admit, at some

by borplk 14y ago

That pixel by pixel approach is just an 'abuse' of 'pure css'. Of course you can have 1x1 px elements and colour them and get a proper image. I admit, at some point I did that too, it only takes ~15 lines of Python. Until I realised it becomes a lot bigger than the equivalent image file. However I'm still a fan of proper 'X in pure CSS' where the thing is built with circles and rectangles and shadows, etc... to make the shape which actually ends up being much much smaller than the equivalent image and renders a lot faster. Things like iPhone in pure css, or Macbook in pure css, etc...

deleted 14y ago
[deleted]
tripzilch 14y ago
> I admit, at some point I did that too, it only takes ~15 lines of Python. Until I realised it becomes a lot bigger than the equivalent image file. I find it amusing that you realised that only after you wrote the script :-) (not intended to mock you btw) I have to disagree that 'X in pure CSS' renders faster, though. As soon as you use a couple of shadows with sufficient blur radius, a bitmap is much faster (once it's downloaded). I especially notice this when scrolling the page, if there's a lot of shadowed elements on it, it goes clunky. That's NOT saying that you should flatten all CSS trickery to bitmaps, of course, it's still very useful, just that one should take care not to go overboard and keep an eye on performance, especially checking low-powered netbooks and a few different browser/OS combos.
- borplk 14y ago
  > I find it amusing that you realised that only after you wrote the script :-) At first I thought I'm really up to something and going to invent the image format of the future :)
zaphoyd 14y ago
I am also a fan of "X in pure CSS" in moderation, particularly the ones that model things that I've needed to do to implement certain simple embellishments in ways where using images makes the site harder to change/maintain/retina-fy. For example, speech bubbles, arrows, engraved text, rounded objects, some types of icons, etc.

by borplk 14y ago

deleted 14y ago

[deleted]

tripzilch 14y ago

> I admit, at some point I did that too, it only takes ~15 lines of Python. Until I realised it becomes a lot bigger than the equivalent image file. I find it amusing that you realised that only after you wrote the script :-) (not intended to mock you btw) I have to disagree that 'X in pure CSS' renders faster, though. As soon as you use a couple of shadows with sufficient blur radius, a bitmap is much faster (once it's downloaded). I especially notice this when scrolling the page, if there's a lot of shadowed elements on it, it goes clunky. That's NOT saying that you should flatten all CSS trickery to bitmaps, of course, it's still very useful, just that one should take care not to go overboard and keep an eye on performance, especially checking low-powered netbooks and a few different browser/OS combos.

borplk 14y ago
> I find it amusing that you realised that only after you wrote the script :-) At first I thought I'm really up to something and going to invent the image format of the future :)

zaphoyd 14y ago

I am also a fan of "X in pure CSS" in moderation, particularly the ones that model things that I've needed to do to implement certain simple embellishments in ways where using images makes the site harder to change/maintain/retina-fy. For example, speech bubbles, arrows, engraved text, rounded objects, some types of icons, etc.