Show HN: Logos in Pure CSS
bchanx.com
bchanx.com
/* Mona Lisa with pure CSS Pointless but fun!
Of course, it's not handcrafted.
Here is my code:
https://github.com/jaysalvat/image2cssMy only disappointment was not seeing the Twilio logo in there.. but realized it would be too easy to be challenging. :)
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.
Fantastic job on the logos! It's insane how powerful CSS has gotten, can you imagine building something like this 10 years ago?
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.
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.
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?
These are the same traits I would look for a great programmer to demonstrate.
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.
That said, this is pretty damned cool. I really wish SVG had gained much better support much earlier on.
Granted, probably not a very high risk if you're using files you, yourself, trust.
I use both heavy SVG apps with a lot of javascript, and also small svgs for icons etc.
[1] https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
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.
I think they actually look pretty cool, almost like pieces of modern art.
Don't read too far into this comment though, this was purely something fun I wanted to attempt.
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.
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.
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.
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.
If you're familiar with SVG, why not contrast the differences/merits of it instead?
"- 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."
[ Also more amenable to editing tools ]
cool demos, had no idea you could do that, and its obvious once you rollover, which is a nice trick!
I see this as a clever hack.
Did you make a tool to construct these? ie to place elements by dragging with the mouse rather than trial and error.
Could OP turn his skills into a business?
Average user doesn't care. It's just cool and shows mastery of a skill.
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.
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?