61–70 of 77 posts
What's wrong with SVG? Use the right tool for the job.
I was under the impression that SVGs could contain javascript and pose possible XSS or code execution risks. Granted, probably not a very high risk if you're using files you, yourself, trust.
The whole industry is fucking killed by people who replaced books by stack overflow, and every sane programmer is doing management because they can't compete in salary with people who make logos i CSS...I mean the logos looks the same don't they?
This looks wonderful and is a lot of fun. It's not very useful in the real world due to the painstaking method for creating images, and something like SVG is far more appropriate for vector graphics - you can create it in a normal graphics program, and use just one vector outline for things like the twitter logo. You can use CSS to make bitmap images, vector graphics, and even vector titling if you want to spend enou…
What's wrong with SVG? Use the right tool for the job.
Earlier quoted context omitted.
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.
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.
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.
Earlier quoted context omitted.
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.
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.
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.
Remaking images in CSS only is not a new experiment (and is often frowned upon) but this implementation adds 2 interesting features: hovering an element reveals all the sub-elements it's made of, and hovering a block superimposes both the image and its pure css implementation.
Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http://codepen.io/jaysalvat/pen/HaqBf
/* Mona Lisa with pure CSS Pointless but fun!
Of course, it's not handcrafted.
Here is my code:
https://github.com/jaysalvat/image2cssWhen you're looking at the end result, you might be mildly impressed by the versatility of CSS, or dismiss it as a rather pointless exercise for the real world (both of which are quite valid points of view), but when you're actually looking at a new logo and pondering how you'd approach the process of recreating it in pure CSS, you'll be triggered to dig deeper into CSS than you'd do during the ordinary course of web development work. The amount of value gained from that is hard to overstate.
I've recently been teaching someone completely new to web development the principles of HTML and CSS, and she's been picking it up pretty swiftly, but otherwise not doing much with it which was terribly noteworthy. Until I loosened restraints, and got her interested in just playing with some new techniques for the sake of playing (which included that CSS challenge). Suddenly she was doing things I'd never seen before, layering radial and linear gradients for some cool effects, transforming and animating the result, and just bringing it all together in wildly innovative ways. (It helps that she has no idea about the bad old days where we were all incredibly restrained by limited browser support.) :) For the CSS challenge she had a definite goal, and I could just see her conceptual thinking leaping ahead as she bounced ideas off of me on how to reach that goal. In the process of this all she discovered two browser bugs (will still get her to file them after making certain they won't be dupes), gained a much, much deeper understanding of the finer points of various CSS3 modules, and had her self-confidence boosted a lot by knowing that she could really figure out these things and create something which would've seemed like magic to her just weeks earlier.
I highly recommend any- and everyone to, when it's not immediately obvious how a particular logo was constructed, pick it apart and _see_ the way certain effects are combined. Expand your thinking. Yes, there's an obvious way to build up your basic CSS for a bread-and-butter website, which just works, and there's often not much challenge or versatility there (nor needed). But the techniques and capabilities at the forefront of CSS are changing and expanding rapidly, and more and more of these techniques do actually become quite applicable to ordinary websites. Not in the particular combinations found in a CSS logo, but still in forms which will bear an uncanny resemblance to them. Why not have some fun teaching yourself about them? It's good to every so often remind yourself that you're in a very creative field of work, which keeps changing rapidly.
Earlier quoted context omitted.
Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http://codepen.io/jaysalvat/pen/HaqBf
It is not. Says right in the JS section /* Mona Lisa with pure CSS Pointless but fun! Of course, it's not handcrafted. Here is my code: https://github.com/jaysalvat/image2css */