Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Logos in Pure CSS

bchanx.com

Post reply on HN
Print view View original

71–77 of 77 posts

Re: Show HN: Logos in Pure CSS

#71

Post by octatone2 »

hawkharris wrote: post #51

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…

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

Re: Show HN: Logos in Pure CSS

#72

Post by hash9 »

bchanx wrote: post #23
TazeTSchnitzel wrote: post #5

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

It's a problem when I lack the proficiency to even create gradients in photoshop! However, I can create gradients all day with CSS. Don't read too far into this comment though, this was purely something fun I wanted to attempt.

If you're finding Photoshop difficult try Fireworks. It's easier for basic web stuff like gradients and simple shapes.

Re: Show HN: Logos in Pure CSS

#73

Post by meerita »

DigitalSea wrote: post #66
TazeTSchnitzel wrote: post #60

Earlier quoted context omitted.

I'm not being negative. It's a cool hack, I'll give them that, but don't use it in production for god's sake.

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 experim…

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.

Don't take this as an offense.

Re: Show HN: Logos in Pure CSS

#74

Post by meerita »

DigitalSea wrote: post #67
pete_b wrote: post #53

Earlier quoted context omitted.

Why see it as negativity? 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 exhibit…

You can do it manually. SVG is a XML file, just that. You can hand code all logos, wich it gonna be a waste of time in most cases.

Re: Show HN: Logos in Pure CSS

#75

Post by pete_b »

DigitalSea wrote: post #67
pete_b wrote: post #53

Earlier quoted context omitted.

Why see it as negativity? 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 exhibit…

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.

Re: Show HN: Logos in Pure CSS

#76

Post by X4 »

bchanx wrote: post #19
DigitalSea wrote: post #2

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.

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.

Re: Show HN: Logos in Pure CSS

#77

Post by tracker1 »

lttlrck wrote: post #63
grey-area wrote: post #54

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 enou…

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

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.

Post reply on HN