Logos in Pure CSS
Creative
css art
SHOW HN2013
283points
74comments
#39of 1,739 in 2013
Top 3%of 2013 by points
How HN took it
DebatedReal support and real criticism
22 positive, 6 neutral or asking, 3 mixed, 15 critical, out of 46 comments about the project. Thread score +0.23.
Idea: 8 for, 10 againstExecution: 8 for, 4 againstDesign: 2 for, 0 againstPerformance: 1 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Clever and impressive use of CSS
From 4 comments
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.…
DigitalSea on HNRemaking 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…
bbx on HNAs 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…
taternuts on HNThis is great. Mostly the creativity to come up with those shapes. sometimes limitations can give you a different perspective to designing.
pacomerh on HN
Hover reveals construction of each logo
From 1 comment
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…
bbx on HN
Objections
Impractical; SVG is better for logos
From 3 comments
What's wrong with SVG? Use the right tool for the job.
TazeTSchnitzel on HNThis 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…
grey-area on HNSVG seems more 'natural' way of doing logos ? [ Also more amenable to editing tools ]
gridmaths on HN
Breaks in IE8 and on mobile, pixelation when zoomed
From 3 comments
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…
timdorr on HNThey look fairly useless in IE8 — http://i.imgur.com/IjWkRvp.png
nwh on HNBreaks on mobile devices. When I zoom in I see pixelation... Images?
deckar01 on HN
Thread is negative or the post is overrated on the front page
From 3 comments
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…
sergiotapia on HNI 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…
rickdale on HNNonsense. 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…
goostavos on HN
Requests
Hand-crafted or process details of how it was built
From 2 comments
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.…
DigitalSea on HNAlso, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http://codepen.io/jaysalvat/pen/HaqBf
DanielRibeiro on HN
Support for more logos such as Twilio
From 1 comment
Awesome work. My only disappointment was not seeing the Twilio logo in there.. but realized it would be too easy to be challenging. :)
caseysoftware on HN
Questions
Was it hand-crafted or trial and error
From 2 comments
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.…
DigitalSea on HNThank 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…
bchanx on HN
Alternatives named
SVG
From 2 comments
What's wrong with SVG? Use the right tool for the job.
TazeTSchnitzel on HNThis 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…
grey-area on HN
Jay Salvat's CSS Mona Lisa
From 2 comments
Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http://codepen.io/jaysalvat/pen/HaqBf
DanielRibeiro on HNIt 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…
geekam on HN
Font Awesome
From 1 comment
http://fortawesome.github.io/Font-Awesome/
coherentpony on HN