
Show HN: Logos in Pure CSS - bchanx
http://www.bchanx.com/logos-in-pure-css-demo
======
bbx
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.

~~~
DanielRibeiro
Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted.

[1] <http://codepen.io/jaysalvat/pen/HaqBf>

~~~
geekam
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

*/

~~~
nathannecro
That would be the point of comparison I believe.

------
DigitalSea
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?

~~~
bchanx
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.

~~~
X4
heh, here's a hacky idea ;) Take a PNG, base64 encode, compress and gzip your
js template into it, let it create the same css3 code, but by using
javascript. This works by putting the png into a canvas... here's a guide ;)
<http://creativejs.com/2012/06/jsexe-javascript-compressor/> and
<http://iamcal.github.io/PNGStore/>

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.

------
sergiotapia
Some of the comments on here are pure trash. I wish a mod would delete them or
something.

Fantastic job on the logos! It's insane how powerful CSS has gotten, can you
imagine building something like this 10 years ago?

~~~
LowKarmaAccount
> 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?

~~~
azochz
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.

------
grey-area
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) -

<http://caniuse.com/svg>

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.

~~~
lttlrck
I don't think he is proposing CSS in place of SVG...

~~~
tracker1
I do think that at least knowing that SVG is probably the right tool for the
job (or in some cases a custom font) is important.

That said, this is pretty damned cool. I really wish SVG had gained much
better support much earlier on.

------
TazeTSchnitzel
What's wrong with SVG? Use the right tool for the job.

~~~
timdorr
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.

[1] [https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Brow...](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-
Polyfills#svg)

~~~
nwh
They look fairly useless in IE8 — <http://i.imgur.com/IjWkRvp.png>

~~~
johnsoft
Here's Evernote - <http://i.imgur.com/EeXRsNA.png> and Apple -
<http://i.imgur.com/ufutrhZ.png>

I think they actually look pretty cool, almost like pieces of modern art.

------
hawkharris
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."

~~~
anonymouz
These arguments really are arguments for vector graphics. There are definitely
saner formats for vector graphics than hand-crafted CSS.

------
gridmaths
SVG seems more 'natural' way of doing logos ?

[ Also more amenable to editing tools ]

~~~
gridmaths
Before being down-modded...

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.

~~~
gridmaths
I guess you could make an editor tool which could let you construct these from
circles/rects etc.. then output css or svg.

Did you make a tool to construct these? ie to place elements by dragging with
the mouse rather than trial and error.

------
taternuts
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!

------
hayksaakian
I wish there was an easy way to pay for a CSS version of a logo.

Could OP turn his skills into a business?

~~~
slacka
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.

------
Sealy
You have a lot of talent Brian. You should crack that out every time you have
a job interview.

------
kumar_navneet
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.

~~~
sharkweek
one of my favorite XKCDs speaks directly to this -- <http://xkcd.com/927/>

------
deckar01
Breaks on mobile devices. When I zoom in I see pixelation... Images?

------
stdclass
I tried the same thing 2 years ago [1], but this one is way nicer!

[1] <http://lab.dornauer.cc/apple-logo-css3/>

------
pacomerh
This is great. Mostly the creativity to come up with those shapes. sometimes
limitations can give you a different perspective to designing.

------
adregan
Remember when you couldn't even make a shape other than a square or a
rectangle with CSS?

~~~
sharkweek
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

------
chasb
This is very cool, nice job.

------
svl
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.

------
coderhs
Nice...

------
ztratar
Great job!

------
_sabe_
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?

------
coherentpony
<http://fortawesome.github.io/Font-Awesome/>

~~~
jlogsdon
What relevance is this? Font Awesome is... a font. The OP is logos in pure CSS
with comparisons to the original.

~~~
IanChiles
Would it be possible to recreate font awesome in pure CSS? Or would it just
not be worth it?

~~~
lttlrck
Would it be as awesome? Probably not.

