4 ms·

Comments like yours are exactly what is wrong this place as of late. Instead of being supportive, you chastise the OP for thinking outside of the box. Take your

Comments like yours are exactly what is wrong this place as of late. Instead of being supportive, you chastise the OP for thinking outside of the box. Take your negativity somewhere else if you're not going to give credit where credit is due.

pete_b 13y ago
Why see it as negativity? SVG is a core web standard that is woefully underused considering how well it is supported. These complex 'you can do this with CSS' demos are always impressive, but they have little practical use; considering the underuse and lack of knowledge about SVG right now, it seems a little perverse to me that people keep making them.
- DigitalSea 13y ago
  Using SVG would be the easy way (open up Illustrator, draw some circles and export). As developers we should be pushing ourselves, trying the seemingly impossible and keeping our brains sharp. If developers all used pre-existing and practical solutions as I pointed out earlier, we would all still be making websites that used tables for mark-up. This isn't a client project, it's an experiment. Brian has merely exhibited something using some DIV's and clever CSS that most developers would never even try to attempt let alone even be able to pull off. An experiment doesn't need to be cross-browser compliant or practical, it just needs to prove something can work. I've used SVG in production before and while it's generally well supported if you don't care about IE8 support, when it comes to hyperlinking and hover states an SVG can be your worse nightmare. Tonnes of people know about SVG, anyone with a copy of Adobe Illustrator can make an SVG image for web and embed it into a page.
  - meerita 13y ago
    You can do it manually. SVG is a XML file, just that. You can hand code all logos, wich it gonna be a waste of time in most cases.
  - pete_b 13y ago
    As others have pointed out, well crafted or not, it doesn't add anything new to what people know can be done with CSS if you hack it hard enough; 5 years ago someone made a Homer Simpson in pure CSS (before border-radius) and it worked in IE 5.5: http://www.romancortes.com/blog/homer-css/ http://www.romancortes.com/blog/homer-css/ If you think SVG is a craftless 'just export it' type of technology then you're not really getting it - it's xml - human readable and editable. You get a lot more out of it if you know how to read the source, add/remove/alter the elements by hand if needs be. So plenty of valuable skills to develop, things to learn and opportuties for push yourself without resorting to yet another demonstration of how it's possible to simulate vector illustration if you apply copious amounts of divs and CSS.
TazeTSchnitzel 13y ago
I'm not being negative. It's a cool hack, I'll give them that, but don't use it in production for god's sake.
- DigitalSea 13y ago
  It takes a highly capable mind to do what Brian has done. Recreating even the simplest of logos isn't an easy task when you're talking about positioned DIV's, clipping masks, border colours and radius's all intricately stacked to recreate something that was designed in an image manipulation program. Yes, you would never use a CSS recreation in production and Brian isn't. What we have here is a smart developer experimenting, thinking outside-of-the-box and pushing the boundaries beyond changing colours and font sizes using CSS. We need developers like Brian trying things like this, if we didn't, we would all still be using tables to create websites... The reason I called your comment out as negative is because you never said anything positive. Mostly everyone else (including myself) praised Brian for his clever experimentation and there was no praise or respect in your comment whatsoever. I'm not meaning to sound aggressive, I've just seen too many put-downs on neutral and positive submissions lately to not want to say something.
  - meerita 13y ago
    I don't think the OP is negative. And I also think waste time doing this when you can, ofc, do one image with a table and zillions of colored cells. To me, the time and pain isn't worth the application. OP is right: you can do this effortlessly with SVG, and it will probably be more semantic than this, wich, ofc has glitches between devices and isn't fully supported on all cases. SVG has more support than CSS3 and this only shows a bored developer using CSS. I opined the same days ago with a MB Pro made entirely in CSS. It's quite ok but I think we can put effort on SVG instead of CSS to do the right things. Don't take this as an offense.

pete_b 13y ago

Why see it as negativity? SVG is a core web standard that is woefully underused considering how well it is supported. These complex 'you can do this with CSS' demos are always impressive, but they have little practical use; considering the underuse and lack of knowledge about SVG right now, it seems a little perverse to me that people keep making them.

DigitalSea 13y ago
Using SVG would be the easy way (open up Illustrator, draw some circles and export). As developers we should be pushing ourselves, trying the seemingly impossible and keeping our brains sharp. If developers all used pre-existing and practical solutions as I pointed out earlier, we would all still be making websites that used tables for mark-up. This isn't a client project, it's an experiment. Brian has merely exhibited something using some DIV's and clever CSS that most developers would never even try to attempt let alone even be able to pull off. An experiment doesn't need to be cross-browser compliant or practical, it just needs to prove something can work. I've used SVG in production before and while it's generally well supported if you don't care about IE8 support, when it comes to hyperlinking and hover states an SVG can be your worse nightmare. Tonnes of people know about SVG, anyone with a copy of Adobe Illustrator can make an SVG image for web and embed it into a page.
- meerita 13y ago
  You can do it manually. SVG is a XML file, just that. You can hand code all logos, wich it gonna be a waste of time in most cases.
- pete_b 13y ago
  As others have pointed out, well crafted or not, it doesn't add anything new to what people know can be done with CSS if you hack it hard enough; 5 years ago someone made a Homer Simpson in pure CSS (before border-radius) and it worked in IE 5.5: http://www.romancortes.com/blog/homer-css/ http://www.romancortes.com/blog/homer-css/ If you think SVG is a craftless 'just export it' type of technology then you're not really getting it - it's xml - human readable and editable. You get a lot more out of it if you know how to read the source, add/remove/alter the elements by hand if needs be. So plenty of valuable skills to develop, things to learn and opportuties for push yourself without resorting to yet another demonstration of how it's possible to simulate vector illustration if you apply copious amounts of divs and CSS.

TazeTSchnitzel 13y ago

I'm not being negative. It's a cool hack, I'll give them that, but don't use it in production for god's sake.

DigitalSea 13y ago
It takes a highly capable mind to do what Brian has done. Recreating even the simplest of logos isn't an easy task when you're talking about positioned DIV's, clipping masks, border colours and radius's all intricately stacked to recreate something that was designed in an image manipulation program. Yes, you would never use a CSS recreation in production and Brian isn't. What we have here is a smart developer experimenting, thinking outside-of-the-box and pushing the boundaries beyond changing colours and font sizes using CSS. We need developers like Brian trying things like this, if we didn't, we would all still be using tables to create websites... The reason I called your comment out as negative is because you never said anything positive. Mostly everyone else (including myself) praised Brian for his clever experimentation and there was no praise or respect in your comment whatsoever. I'm not meaning to sound aggressive, I've just seen too many put-downs on neutral and positive submissions lately to not want to say something.
- meerita 13y ago
  I don't think the OP is negative. And I also think waste time doing this when you can, ofc, do one image with a table and zillions of colored cells. To me, the time and pain isn't worth the application. OP is right: you can do this effortlessly with SVG, and it will probably be more semantic than this, wich, ofc has glitches between devices and isn't fully supported on all cases. SVG has more support than CSS3 and this only shows a bored developer using CSS. I opined the same days ago with a MB Pro made entirely in CSS. It's quite ok but I think we can put effort on SVG instead of CSS to do the right things. Don't take this as an offense.