9 ms·

Show HN: Logos in Pure CSS

283 points by bchanx 13y ago

DigitalSea 13y ago
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 13y ago
  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.
  - fady 13y ago
    yeah, amazing work ++
  - caseysoftware 13y ago
    Awesome work. My only disappointment was not seeing the Twilio logo in there.. but realized it would be too easy to be challenging. :)
  - X4 13y ago
    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/ http://creativejs.com/2012/06/jsexe-javascript-compressor/ and http://iamcal.github.io/PNGStore/ 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.
Sealy 13y ago
You have a lot of talent Brian. You should crack that out every time you have a job interview.
bbx 13y ago
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 13y ago
  Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http://codepen.io/jaysalvat/pen/HaqBf http://codepen.io/jaysalvat/pen/HaqBf
  - geekam 13y ago
    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 13y ago
      That would be the point of comparison I believe.
TazeTSchnitzel 13y ago
What's wrong with SVG? Use the right tool for the job.
- krapp 13y ago
  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.
  - gridmaths 13y ago
    Great point - Id really like a way to flag 'svg only, no scripts' say in the img tag. I use both heavy SVG apps with a lot of javascript, and also small svgs for icons etc.
  - TazeTSchnitzel 13y ago
    Embedded with an img tag, scripts are disabled.
- MatthewPhillips 13y ago
  <title>Hacker News</title>
- timdorr 13y ago
  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-Browser-Polyfills#svg https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
  - ianstormtaylor 13y ago
    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. [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=600207 https://bugzilla.mozilla.org/show_bug.cgi?id=600207
hayksaakian 13y ago
I wish there was an easy way to pay for a CSS version of a logo. Could OP turn his skills into a business?
- ztratar 13y ago
  Easily... but I'm sure his time is worth more than simply making CSS logos. Average user doesn't care. It's just cool and shows mastery of a skill.
- slacka 13y ago
  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.
pacomerh 13y ago
This is great. Mostly the creativity to come up with those shapes. sometimes limitations can give you a different perspective to designing.
coherentpony 13y ago
http://fortawesome.github.io/Font-Awesome/ http://fortawesome.github.io/Font-Awesome/
- jlogsdon 13y ago
  What relevance is this? Font Awesome is... a font. The OP is logos in pure CSS with comparisons to the original.
  - IanChiles 13y ago
    Would it be possible to recreate font awesome in pure CSS? Or would it just not be worth it?
    - lttlrck 13y ago
      Would it be as awesome? Probably not.
ztratar 13y ago
Great job!
sergiotapia 13y ago
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?
- rickdale 13y ago
  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.
  - goostavos 13y ago
    Nonsense. 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.
    - PommeDeTerre 13y ago
chasb 13y ago
This is very cool, nice job.
taternuts 13y ago
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!
deckar01 13y ago
Breaks on mobile devices. When I zoom in I see pixelation... Images?
gridmaths 13y ago
SVG seems more 'natural' way of doing logos ? [ Also more amenable to editing tools ]
- gridmaths 13y ago
  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 13y ago
    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.
emini_guy 13y ago
Neat, should be utilized more. Thought about something like that when working on a new version of my site, but I am not conversant enough with CSS to go for it at this point. Nice job, though.
adregan 13y ago
Remember when you couldn't even make a shape other than a square or a rectangle with CSS?
- sharkweek 13y ago
  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
kumar_navneet 13y ago
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 13y ago
  one of my favorite XKCDs speaks directly to this -- http://xkcd.com/927/ http://xkcd.com/927/
hawkharris 13y ago
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 13y ago
  These arguments really are arguments for vector graphics. There are definitely saner formats for vector graphics than hand-crafted CSS.
- octatone2 13y ago
  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)?
grey-area 13y ago
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 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 13y ago
  I don't think he is proposing CSS in place of SVG...
  - tracker1 13y ago
    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.
coderhs 13y ago
Nice...
coderhs 13y ago
Nice...
stdclass 13y ago
I tried the same thing 2 years ago [1], but this one is way nicer! [1] http://lab.dornauer.cc/apple-logo-css3/ http://lab.dornauer.cc/apple-logo-css3/
_sabe_ 13y ago
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?
svl 13y ago
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/ 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.

283 points by bchanx 13y ago

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 13y ago
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.
- fady 13y ago
  yeah, amazing work ++
- caseysoftware 13y ago
  Awesome work. My only disappointment was not seeing the Twilio logo in there.. but realized it would be too easy to be challenging. :)
- X4 13y ago
  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/ http://creativejs.com/2012/06/jsexe-javascript-compressor/ and http://iamcal.github.io/PNGStore/ 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.

Sealy 13y ago

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

bbx 13y ago

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 13y ago
Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http://codepen.io/jaysalvat/pen/HaqBf http://codepen.io/jaysalvat/pen/HaqBf
- geekam 13y ago
  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 13y ago
    That would be the point of comparison I believe.

TazeTSchnitzel 13y ago

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

krapp 13y ago
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.
- gridmaths 13y ago
  Great point - Id really like a way to flag 'svg only, no scripts' say in the img tag. I use both heavy SVG apps with a lot of javascript, and also small svgs for icons etc.
- TazeTSchnitzel 13y ago
  Embedded with an img tag, scripts are disabled.
MatthewPhillips 13y ago
<title>Hacker News</title>
timdorr 13y ago
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-Browser-Polyfills#svg https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
- ianstormtaylor 13y ago
  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. [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=600207 https://bugzilla.mozilla.org/show_bug.cgi?id=600207

hayksaakian 13y ago

I wish there was an easy way to pay for a CSS version of a logo. Could OP turn his skills into a business?

ztratar 13y ago
Easily... but I'm sure his time is worth more than simply making CSS logos. Average user doesn't care. It's just cool and shows mastery of a skill.
slacka 13y ago
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.

pacomerh 13y ago

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

coherentpony 13y ago

http://fortawesome.github.io/Font-Awesome/ http://fortawesome.github.io/Font-Awesome/

jlogsdon 13y ago
What relevance is this? Font Awesome is... a font. The OP is logos in pure CSS with comparisons to the original.
- IanChiles 13y ago
  Would it be possible to recreate font awesome in pure CSS? Or would it just not be worth it?
  - lttlrck 13y ago
    Would it be as awesome? Probably not.

ztratar 13y ago

Great job!

sergiotapia 13y ago

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?

rickdale 13y ago
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.
- goostavos 13y ago
  Nonsense. 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.
  - PommeDeTerre 13y ago

chasb 13y ago

This is very cool, nice job.

taternuts 13y ago

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!

deckar01 13y ago

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

gridmaths 13y ago

SVG seems more 'natural' way of doing logos ? [ Also more amenable to editing tools ]

gridmaths 13y ago
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 13y ago
  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.

emini_guy 13y ago

Neat, should be utilized more. Thought about something like that when working on a new version of my site, but I am not conversant enough with CSS to go for it at this point. Nice job, though.

adregan 13y ago

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

sharkweek 13y ago
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

kumar_navneet 13y ago

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 13y ago
one of my favorite XKCDs speaks directly to this -- http://xkcd.com/927/ http://xkcd.com/927/

hawkharris 13y ago

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 13y ago
These arguments really are arguments for vector graphics. There are definitely saner formats for vector graphics than hand-crafted CSS.
octatone2 13y ago
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)?

grey-area 13y ago

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 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 13y ago
I don't think he is proposing CSS in place of SVG...
- tracker1 13y ago
  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.

coderhs 13y ago

Nice...

coderhs 13y ago

Nice...

stdclass 13y ago

I tried the same thing 2 years ago [1], but this one is way nicer! [1] http://lab.dornauer.cc/apple-logo-css3/ http://lab.dornauer.cc/apple-logo-css3/

_sabe_ 13y ago

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?

svl 13y ago

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