4 ms·
I don't get why this is "awesome". CSS for icons is like HTML tables for markup. You have a path, split it to pieces you can represent with CSS using the metho
by drdaeman 15y ago
I don't get why this is "awesome".
CSS for icons is like HTML tables for markup. You have a path, split it to pieces you can represent with CSS using the methods you consider acceptable and draw a shape using ::before and ::after pseudo-elements.
Sure, those icons were carefully hand-crafted. This requires a lot of patient work, and this is admirable.
Yet, we have SVG for vector graphics. Embed it with data: URIs (I believe browsers who support CSS3 transforms can display SVG backgrounds) and that's it.
- huckfinnaafb 15y agoI think it's an interesting experiment to explore CSS3 stuff. Some experiments end up impractical, but they're still good to know about. That said, for anyone wondering why they're not practical... Spritesheet image - 9kb [http://imgur.com/Mcr9N](png) CSS needed to write the positions - ~1-3kb Pure CSS - 60kb
- bbatsell 15y agogzip -9 takes the CSS down to 6757 bytes. That's not why it's impractical.
- huckfinnaafb 15y agoYou're right about gzip/deflate! And of course you don't have to use all the icons. So now my argument is probably that of browser compatibility and separation of jobs :)
- sambeau 15y agoGzipped SVG would be a fraction of that. That should be your new argument :)
- catch23 15y agogzip -9 takes the PNG down to 4714 bytes, still smaller than the CSS.
- jacobolus 15y agoAlso, the PNG image is 24 bits per channel, obviously unnecessary for this kind of project. Taken down to 8 colors it loses no effective detail, and the size is dropped to 2.6 kb, or perhaps smaller after gzip.
- simcop2387 15y agoRun that sprite sheet through optipng and gimp to remove extra white space and you can get it down to 4021 bytes.
- TeMPOraL 15y agoAnd you'll also use up much more processing power to render CSS icons than to render a plain PNG ;).
- city41 15y agoIt's pretty cool that his HTML is simply <li class="someIcon"><a href="...">label</a></li> Not saying this particular approach is practical, but if we really could arrive at a practical solution for icons that left the HTML that clean, it'd be great.