Chrome logos in CSS(codepen.io)
codepen.io
Chrome logos in CSS
http://codepen.io/kevinjannis/pen/pyuix
6 comments
This is awesome. CSS is becoming very powerful. I was proud of myself when I made a simple css triangle
I fail to see the awesome-ness. It's a proof of concept about a concept that just doesn't make sense. There are significantly better ways of presenting color/logo/icon/anything other than CSS.
It's a proof of skill, if anything. Or a proof of "it can be done". It doesn't have to be productive.
That said, it does give out the wrong impression. What platforms are capable of rendering this CSS and are not capable of rendering SVG? SVG doesn't get anywhere near as much attention because doing something like this would be incredibly easy.
That said, it does give out the wrong impression. What platforms are capable of rendering this CSS and are not capable of rendering SVG? SVG doesn't get anywhere near as much attention because doing something like this would be incredibly easy.
I agree. It's not practical, but neither is climbing Everest or swimming The English Channel. You get no points for taking a boat or a helicopter. People do stuff like this specifically because it's a challenge/the path of more resistance.
It has no practical use, nor is it meant to be. Just a showcase.
How do you make a triangle in pure CSS?
http://css-tricks.com/snippets/css/css-triangle/
And this awesome animation explains how it works: http://codepen.io/chriscoyier/details/lotjh
And this awesome animation explains how it works: http://codepen.io/chriscoyier/details/lotjh
I mean, it could be no-classes-pure css if we just had divs with no classes and then used n-th child selectors, but then what is pure css?
this is what I was referring to
This is not pure CSS. This requires Markup, and Markup is something that Marks Up Text to give it semantic meaning.
Typically you use :before or :after in CSS to add the required content.
Like this: http://codepen.io/chriscoyier/full/lotjh
That's so awesome! I wish http://thecodeplayer.com/ was more active for things like this.
How hard does it make it change all static sizes to %s? I've seen a couple of these and wondered if it would be pretty easy to just convert all your px to % making the logo easily scalable just from the wrapper's size.
I'm still waiting for someone to design a vector drawing program that can export to CSS. (or something that can take a vector format like SVG and turn it to CSS)
This is really nice. But really, this can also be done with 4 lines of SVG. Maybe that is a better tool for assets like these?
Why no love for ::before or ::after? Would certainly clean up the html to a more practical level.
Poor support for rotate on before and after :) this was my initial idea, but it didn't work as expected.