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.
Oh my God, this is amazing. I envy people like you Brian, this is insanely clever. I wish I were as masterful with CSS to even think of being able to do what you've done here. Would love to know what the process was like, did you have the shapes and positions in mind and knew what you wanted to add to what, or was it more trial and error?
Thank you for the kind words! For each one I started off pinpointing the toughest areas/curves to create, and then worked off that. There's a lot of thought behind which layers to place first so that subsequent layers can mask over spills or imperfections, but beyond that the rest is pure trail and error.
haha, you could save angular.js, your css,html and image sprites into two or three png's. :P
Hey are you still with me? We could theoretically go further, there are no guarantees though. We'll use "Multiphase Compression". Uncompression is slow, but we only care about space, let's hope we save more than we use.
Step 1: Store css/html/js into the png as mentioned above. Then look for a "minimal" fractal image compression library written in C. Run the png through the fractal compressor.
Step 2: Save the output into a Javascript ArrayBuffer
Step 3: Now convert the minimal fractal compression decoder to javascript using Emscripten. And store the output into a png again. Then decode the javascript from the png and let the fractal decoder create a png out of the ArrayBuffer. Then extract the js/html/css from the png that we just generated on the client-side. We now have the final data. We can let it remove all unnessary js after saving the extracted data into html5 localstorage.
> It's insane how powerful CSS has gotten, can you imagine building something like this 10 years ago?
Yes, but not in CSS. Actually, the fact that CSS has evolved to do this is really an indication of what a failure CSS is. Or rather, a failure of the idea that a separate language should exist for text markup. If you're going to use CSS for this kind of thing, why not use a real, powerful language that has years of experience solving problems and has lots of libraries? Why should we ignore the past and waste time rediscovering old problems and, so we can add slower, buggier kludges?
Rather than focusing on the power of languages, this exercise demonstrates creativity while constrained. Implementing CSS driven "art" requires attention to detail, but also a desire to learn all that can be learned about one specific language.
These are the same traits I would look for a great programmer to demonstrate.
I think a lot of people here wish this type of post would only have made the top of the front page 10 years ago (knowing hn was starting in 07), nowadays a post about css images is a lot like a "Lets Rethink Big O". I am just saying at some point this was a big deal, but now we gotta raise our standards for being impressed.
That is pointless dismissal of someone's efforts. I personally think this is awesome. It's using css in a non-traditional way, and one that surely took a lot of thought.
How is this any different than any other technical post that have no "functional merit" (of sorts)? Remember the very popular post about programming pokemon from inside of the game? That's equally pointless as these css logos, and yet loved by all for it's clever way of using something in a non-traditional manner. What about the link to the guy talking about his foray into nes programming? Not relevant by any stretch, but it's damn interesting.
I swear it's like half of the people on hacker news don't remember how to have fun while programming. Remember doing something just for the sake of doing it? Just an "I wonder if I could.." exercise that gets out of hand?
What bugs me more than anything is this arbitrary cutoff of "worth" on hacker news. Let's check out the current front page: (another) post mortem of a failed start up, taking polls on each other salary, and another weekly article on which type of person makes the best founder (of which we'll surely see the inverse post of tomorrow (No, X is the best type of founder!)). You're right, guy who built a fun technical demo? Only impressive 10 years ago.
Fuck that guy for having the audacity to crowd the front page with his worthless tech demo.
The negativity in this thread.. it's getting to me.
I think you're blowing his comment way, way out of proportion.
It isn't "dismissive", but merely pointing out that as any field advances over time, we see expectations tend to rise. What was once considered innovative or revolutionary can eventually become commonplace, if not trivial and uninteresting.
This has been true for mathematics, chemistry, physics, engineering and even cinema. There's no reason why software development should be any different.
While people were amazed by radio in the early 1900s, it wasn't really a big deal by the 1950s. It was well understood, and something that average people could use. This doesn't mean that people were "dismissive" of radio at that point, but rather just not surprised or impressed by it any longer.
It's the exact same case in this situation. A lot of us here have seen things like this done with CSS before, in some cases many years ago. It just isn't something to get excited about any longer. Having seen it been done before, our expectations have shifted, and we require something more novel in order for it to be considered interesting.
Right, I wasn't trying to be negative, but more expressing why people are being negative. I think that the ones that posted negative comments are out of line, but at the same time I can understand their resentment/frustration of this being the top story. Props to who made this, but in my opinion its not top story worthy here but a story that is a 'gem' lost in the 13 or 14 range.
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 enough time doing it, but I'd never use it on a real web page. Still, a fun experiment and I love the hover to see how they have constructed them.
Roll on SVG where we can draw using far fewer shapes and have even smaller graphics. Using vector graphics (SVG) for logos or other elements like that is supported in all major browsers now (even mobile) -
but it'll be a few years before enough people have moved onto IE9 or higher, and mobile browser improve enough so that we can forget about IE8 and start using SVG everywhere for graphics.
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.
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.
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.
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/
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.
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.
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.
IE <= 8 and Android <= 2.3 don't support SVG without a polyfill[1]. For much of the web, IE8 is still the lowest acceptable version of IE and Android <= 2.3 is still about 40% of that market. You may be able to use it in your projects, but there are still many people who cannot yet.
Honestly lots of people could care less about IE8 nowadays.
Another problem is this really annoying bug in Firefox [1] that makes SVG blurry when they are scaled, defeating the entire purpose of using SVG. Hopefully people reply on that thread and it gets fixed soon.
Because you can paint pictures of things that you cannot take photos of (things that don't exist for one). Likewise, I imagine with this you could make the twitter bird morph into a textarea when you click it, or other such shenannigans.
A few people have raised questions about the practical value of creating logos on the fly with CSS. Here are a few benefits, according to Chris Norstrom (re-posted from the comments section of the article):
"- The code for these logos is Extremely Tiny in size compared to the size of an image of these logos. You're saving space and bandwidth while increasing the speed of your page loading by using the css logos. Your server and customers and bank account all benefit.
- The quality is much better and crisper at any size. You can scale these up or down to nearly any size without needing to use or reupload a new image. And the size of the code pretty much stays the same.
- If you use a large version of your logo in the header and a small version in the footer you don't need to have 2 seperate images. The code for the css logo can be alterted a bit and you can have a whole bunch of different sizes of the same logo."
Why not just use SVG, every time I see one of these posts I think, "Cool, but wheres the filesize comparison of CSS + Markup, SVG, and various file formats (e.g. crushed pngs)?
As someone who is just getting into front-end development and doesn't have much css mastery, seeing how you arranged the shapes/elements to create the final product was very cool for me. Great work!
Why? I hope the reason for this post was just to show off his CSS skills and not to suggest that Logos be made this way. It's the wrong tool for the job. Not to mention terrible browser interoperability. As many others have pointed out, these logos are all busted on IE <= 9 and most mobile browsers.
Nice job. No doubt css is getting better and better with every new release and same goes for browsers.
Waiting for the day when all the browsers will become completely unified and one don't have to worry about cross-browser compatibility.
I remember having a cow when rounded corners came out; it might have well been the second coming of sliced bread. Then I realized I didn't even really like look
With Fronteers (the Dutch trade organization for front-end web developers) we've been running a forum thread for such CSS logos for the last year and a half - http://forum.fronteers.nl/topic/24/the-css-challenge/ - conversation in Dutch, but the images and jsfiddle links should speak for themselves - and I personally think the chief benefit in this exercise comes from the process of _creating_ such a logo.
When 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.
Okay, this is the end for me on Hacker News. The comments here clearly shows that this place is just a bunch of 14 year olds who don't know the history of the web, don't understand how CSS and HTML came to be, and now reinventing things thats already been solved.
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?
