Wow. I am seriously impressed. This has to have caused you more than one headache! While I admire the results of what you did, I think this is not where the future of the web should go. CSS3 at this point is not good enough to do rich graphics like this. We seriously need to be able to do this stuff from within the stylesheet and not flood the content with non-semantic elements, and the lack of shapes, like polygons and bezier curves makes creating any of this rich graphics a chore.
While this is amazing I remember you all there's an excellent graphics oriented language called SVG which makes much more sense for this kind of stuff. The CSS tools that we have now are made for UI elements with not such level of detail.
Besides of that, check out the HTML needed for this. This isn't definitely the way to go. In some way, it's going back to the tables. Using HTML for presentational reasons.
However, as a proof of concept, an amazing exercise for learning the new browser capabilities and presenting them to the public, this is superb. Again, great work, Louis!
@Alberto: Yes, agree 100%, this is way too tedious to be "the new way to draw graphics." Though, people seem to like this sort of thing anyway... judging from today's statistics.
I think ideally what web designers would like is being able to do this right in the stylesheet. For example: you have an element like this: <div class="address_book">Address Book</div> and then apply styles where you create all the parts of the graphic right from css. Adding elements and applying effects. Being able to give shapes to those elements... Maybe throw in alpha blending... Then what we would end up with would be semantic HTML, and great graphics in the browser. Darn I wish that would be possible. And in my lifetime.
Or you can just call your svg from your css file instead and do the job on it. Complex graphics should be separated from the website layout, and there's already an appropriate language with far more backound and dedicate orientation. Why reinvent the wheel?
Imagine Adobe wouldn't have waisted their (and our) time on the Flash blame game, and would have worked on releasing a Photoshop that creates these in CSS or SVG or what ever...
@Alberto I disagree completely. We all are longing for better graphics capabilities in the layout language. Why limit those capabilities to images? SVG is great at creating vectorial images, but you wouldn't want to use it to style buttons, menus, boxes, all sorts of UI elements... Apart from the scalability and filesize there is not that big of an improvement over what we can already do with raster images.
The popularity of this shot proves that we want to do rich graphics from our layout language of choice, which right now is CSS, since there is no direct alternative. The problem is, CSS is not good enough to do that job satisfactorily, since it is very text-oriented and not graphics-oriented.
Look at how hard it is to create something like this. It's no wonder everyone is impressed, if it was easy we would see this stuff popping up everywhere. Doing stuff this way, we not only have to make sure that it looks awesome, but also find a way to do it with just border-radiuses and transforms.
That user shape on the address book icon, for example, to create the shoulders he used circles that cover the shape from the outside with brown color. What if he wanted to put that shape elsewhere, with transparent background? That's not possible...
To recap, my point is that we do want those capabilities in a CSS like language, but CSS is flawed because of its simple origins.
@Miro Keller I think you miss the point. CSS is not to design, is a language to present and give style to the information. If you want to design use SVG/Photoshop/Fireworks/Flash or whatever, not CSS.
I mean as an awesome experiment is totally perfect.
@Miro, you're talking about two different things. UI elements doesn't usually require that level of complexity. Rich graphics (i.e. icons) should be made in a graphic software editor or directly with code (if you're talented enough) in a image oriented coding language like SVG.
And about the popularity of this… It's obvious it's a proof of concept and has no sense in real world. What bring ppl here was Louis talent and courage to do this with just CSS, the awesomeness of the fact that this is possible with the most modern tools vendors bring to us. CSS is a language to give our content some beauty, not to be the content itself. That's it.
@Fran & Alberto: my question to you is why? Why limit yourself in what you can do with a language like CSS? I fully agree with you that to design an icon, or another fancy image that is meant to be content on its own you should definitely do it in a specialized tool like SVG, PS, etc, but on a website there is a lot more to it than that...
I strongly disagree with the level of complexity that you say an UI element need. Yes, usually interfaces are overly simple, but would you argue that's a good thing? If my design needs a triangle, like on a "next" button, for example, are you saying that there shouldn't be any other way to do it, except placing an image of a triangle as a background that I created in Photoshop or SVG? If I want to present a help text that explains what certain button does, wouldn't it be awesome to create a speech bubble like shape right from CSS? And I mean easily, not with non-semantic elements and images.
The great designers out there are creating awesome graphics for UI elements in websites, and they do it in Photoshop because there is no other darn way to do it, not because of some ideological choice.
And I never talked about creating the content in CSS. What I'm saying is we should be able to do more than just add "some" beauty. We should be able to design an entire webpage, with rich graphics (and I mean the design, not content) all created without using images at all...
@Alberto: I know. I was thinking of an entirely new language, that would bring some drawing capabilities to the layout engine, that's all... and don't tell me you wouldn't use them, because you already did to some extent, on your CSS3 buttons ;)
@Miro Keller if you really need to draw something by code, you can simply use <canvas> and JavaScript to draw whatever you want, even animation and interaction.
@Miro, it was for an UI element, which consists in just an anchor tag and the design consists of a rectangle with a simple gradient, 3 shadows and a border. For that, it's perfectly fine.
For drawing purposes there's canvas, as Na said, and there's SVG, as I constantly insisted. There's no need for another new language.
@Alberto Yes, and it's certainly a step in the right direction. But it seems you are arguing that there is no need for anything beyond what you can do now...
I'd like to understand why, since I'm thinking long term what would be the ideal solution. I know that there are technologies available that allow many things, like <canvas> and SVG. But they are all but easy to use.
I'm actually in the process of developing such a language, with a syntax inspired in CSS, but with graphic capabilities way beyond it. That's why I'm interested in knowing how designers would like to take advantage of those capabilities.
If what you are saying is that everything is perfect and that there is no need for innovation, well then I guess I cannot argue with that and there is no need for this discussion ;)
4,305,485,105 pixels dribbbled
Take fewer time-outs from your creative work. Power forward with affordable images & fonts
62 responses
Not a single image, whatsoever.
See it in the browser!
(requires Safari 5 or Chrome)
2 months ago
respect.
2 months ago
*bows*
2 months ago
Unbe-freaking-lievable
2 months ago
Absolutely stunning!!!
2 months ago
very impressive!
2 months ago
What everybody else said :)
2 months ago
This is crazy man! impressive...
2 months ago
HOly shit!
2 months ago
This is impressive. It scales almost perfectly too.
2 months ago
Wow. I did spot one little fault though in your Messages icon the tip part isn't quite right. Sorry for being so nitpicky :)
2 months ago
Louis that's unreal!
2 months ago
You just won the game.
2 months ago
Just amazing...
2 months ago
omg, so freaky amazing! :D very good job. css3 is so awesome
2 months ago
Love the scalability of these. I wonder how long before we get image editors that export to css3 and html5?
2 months ago
That's impressive!
2 months ago
Wow.
Love this, but not too sure about practicality - it also slows Safari to a screeching halt when I open the page.
Nevertheless, they are amazing.
2 months ago
Thanks all!
I've worked on that messages icon for a long time, and it seems impossible for that tip to display correctly.
And yes, Safari does not like rendering all of the CSS (especially when resizing the window) but that's not important for this demo.
Is this really practical though? Probably not as of right now, but it's freaking cool.
2 months ago
Wow. I am seriously impressed. This has to have caused you more than one headache! While I admire the results of what you did, I think this is not where the future of the web should go. CSS3 at this point is not good enough to do rich graphics like this. We seriously need to be able to do this stuff from within the stylesheet and not flood the content with non-semantic elements, and the lack of shapes, like polygons and bezier curves makes creating any of this rich graphics a chore.
2 months ago
Art doesn't have to be practical. Great job! A wonderful contribution to the Internets, I had no idea this was even possible.
2 months ago
*Installs Safari*
2 months ago
Ha! That's some crazy innovative stuff my man! ;)
2 months ago
That is insane!
2 months ago
Unreal.
2 months ago
How? Amazing!
2 months ago
wowzers
2 months ago
God damn Louis!
Thats a MASSIVE 3 point end game shot!
Amazing. Innovative. And foremost, Cool as hell!
2 months ago
@Louis how many hours were spent on these?
2 months ago
While this is amazing I remember you all there's an excellent graphics oriented language called SVG which makes much more sense for this kind of stuff. The CSS tools that we have now are made for UI elements with not such level of detail.
Besides of that, check out the HTML needed for this. This isn't definitely the way to go. In some way, it's going back to the tables. Using HTML for presentational reasons.
However, as a proof of concept, an amazing exercise for learning the new browser capabilities and presenting them to the public, this is superb. Again, great work, Louis!
2 months ago
Mind=Blown.
2 months ago
@Alberto: Yes, agree 100%, this is way too tedious to be "the new way to draw graphics." Though, people seem to like this sort of thing anyway... judging from today's statistics.
2 months ago
Yeah! I jumped off my chair myself when I saw it! ;D
2 months ago
wow!
2 months ago
CSS pawns all
2 months ago
Dude...
2 months ago
I think ideally what web designers would like is being able to do this right in the stylesheet. For example: you have an element like this: <div class="address_book">Address Book</div> and then apply styles where you create all the parts of the graphic right from css. Adding elements and applying effects. Being able to give shapes to those elements... Maybe throw in alpha blending... Then what we would end up with would be semantic HTML, and great graphics in the browser. Darn I wish that would be possible. And in my lifetime.
2 months ago
Or you can just call your svg from your css file instead and do the job on it. Complex graphics should be separated from the website layout, and there's already an appropriate language with far more backound and dedicate orientation. Why reinvent the wheel?
2 months ago
Awesome.
2 months ago
Oh man, so rad.
2 months ago
Imagine Adobe wouldn't have waisted their (and our) time on the Flash blame game, and would have worked on releasing a Photoshop that creates these in CSS or SVG or what ever...
Practical or not, this is great.
2 months ago
Insanely good — well done!
2 months ago
Incredible.
2 months ago
@Alberto I disagree completely. We all are longing for better graphics capabilities in the layout language. Why limit those capabilities to images? SVG is great at creating vectorial images, but you wouldn't want to use it to style buttons, menus, boxes, all sorts of UI elements... Apart from the scalability and filesize there is not that big of an improvement over what we can already do with raster images.
The popularity of this shot proves that we want to do rich graphics from our layout language of choice, which right now is CSS, since there is no direct alternative. The problem is, CSS is not good enough to do that job satisfactorily, since it is very text-oriented and not graphics-oriented.
Look at how hard it is to create something like this. It's no wonder everyone is impressed, if it was easy we would see this stuff popping up everywhere. Doing stuff this way, we not only have to make sure that it looks awesome, but also find a way to do it with just border-radiuses and transforms.
That user shape on the address book icon, for example, to create the shoulders he used circles that cover the shape from the outside with brown color. What if he wanted to put that shape elsewhere, with transparent background? That's not possible...
To recap, my point is that we do want those capabilities in a CSS like language, but CSS is flawed because of its simple origins.
2 months ago
@Miro Keller I think you miss the point. CSS is not to design, is a language to present and give style to the information. If you want to design use SVG/Photoshop/Fireworks/Flash or whatever, not CSS.
I mean as an awesome experiment is totally perfect.
2 months ago
@Miro, you're talking about two different things. UI elements doesn't usually require that level of complexity. Rich graphics (i.e. icons) should be made in a graphic software editor or directly with code (if you're talented enough) in a image oriented coding language like SVG.
And about the popularity of this… It's obvious it's a proof of concept and has no sense in real world. What bring ppl here was Louis talent and courage to do this with just CSS, the awesomeness of the fact that this is possible with the most modern tools vendors bring to us. CSS is a language to give our content some beauty, not to be the content itself. That's it.
2 months ago
Impressive. I would however look into creating a custom font instead of doing it all with css. Or I would draw it with JS on a Canvas.
2 months ago
@Fran & Alberto: my question to you is why? Why limit yourself in what you can do with a language like CSS? I fully agree with you that to design an icon, or another fancy image that is meant to be content on its own you should definitely do it in a specialized tool like SVG, PS, etc, but on a website there is a lot more to it than that...
I strongly disagree with the level of complexity that you say an UI element need. Yes, usually interfaces are overly simple, but would you argue that's a good thing? If my design needs a triangle, like on a "next" button, for example, are you saying that there shouldn't be any other way to do it, except placing an image of a triangle as a background that I created in Photoshop or SVG? If I want to present a help text that explains what certain button does, wouldn't it be awesome to create a speech bubble like shape right from CSS? And I mean easily, not with non-semantic elements and images.
The great designers out there are creating awesome graphics for UI elements in websites, and they do it in Photoshop because there is no other darn way to do it, not because of some ideological choice.
And I never talked about creating the content in CSS. What I'm saying is we should be able to do more than just add "some" beauty. We should be able to design an entire webpage, with rich graphics (and I mean the design, not content) all created without using images at all...
2 months ago
@Miro, CSS is not made for drawing. That's it.
2 months ago
@Alberto: I know. I was thinking of an entirely new language, that would bring some drawing capabilities to the layout engine, that's all... and don't tell me you wouldn't use them, because you already did to some extent, on your CSS3 buttons ;)
2 months ago
wow.
2 months ago
@Miro Keller if you really need to draw something by code, you can simply use <canvas> and JavaScript to draw whatever you want, even animation and interaction.
2 months ago
@Miro, it was for an UI element, which consists in just an anchor tag and the design consists of a rectangle with a simple gradient, 3 shadows and a border. For that, it's perfectly fine.
For drawing purposes there's canvas, as Na said, and there's SVG, as I constantly insisted. There's no need for another new language.
2 months ago
@Alberto Yes, and it's certainly a step in the right direction. But it seems you are arguing that there is no need for anything beyond what you can do now...
I'd like to understand why, since I'm thinking long term what would be the ideal solution. I know that there are technologies available that allow many things, like <canvas> and SVG. But they are all but easy to use.
I'm actually in the process of developing such a language, with a syntax inspired in CSS, but with graphic capabilities way beyond it. That's why I'm interested in knowing how designers would like to take advantage of those capabilities.
If what you are saying is that everything is perfect and that there is no need for innovation, well then I guess I cannot argue with that and there is no need for this discussion ;)
Cheers.
2 months ago
@Miko, ROFL. Nevermind.
2 months ago
@Alberto Yeah, you laugh... just wait and see :)
2 months ago
Awesome.
You could always lower the amount of empty elements by using :before & :after. :)
2 months ago
Louis, were you bit by a radioactive spider as a child?
2 months ago
Mad respect! That's impressive. :)
2 months ago
Tried to think of a professional way to say "holy fucking shit!". Couldn't.
2 months ago
Fucking brilliant! Well done.
2 months ago
Just wanted to say: Awesome work.
about 1 month ago