It's been well established that you can achieve just about any icon purely with CSS. Why is this getting so many upvotes?
Because Apple, maybe?
Single Element MacBook Pro with CSS
41–50 of 69 posts
Re: Single Element MacBook Pro with CSS
#42If you add .macbook {zoom:4;} you can see how the detail is done. Basically you use lots of box-shadows to give you elements to glue together. The details on the front are not actually solid lines, but a collection of circles side by side. That's when you realise this technique is a bit flawed - you can't actually scale the element and keep the detail, you'd be better off with an image. Not to take anything away from…
It's a demo, not a best practice.
Re: Single Element MacBook Pro with CSS
#43Re: Single Element MacBook Pro with CSS
#44Impressive. While I'm generally familiar with CSS I haven't delved into the icon logo stuff yet. I'm toying with the idea of trying to create JS/CSS-based country/state maps with customizable mouseover/onclick functionality, since there aren't really any good free versions available (that I've found). This kind of stuff inspires me that it might be possible, though I have no idea how hard it would be to create geogra…
You should look into SVG for doing detailed graphics. There are a number of libraries for making it easier to work with, Raphael came to mind because I remembered this demo: http://raphaeljs.com/australia.html
Re: Single Element MacBook Pro with CSS
#45Cool, and I'm glad that someone is demonstrating a way to use CSS3 to create graphics in a way that doesn't require extra markup. One of the biggest problems with CSS3 is that, in a twist of irony, it's image composition power entices developers into adding markup to hang the CSS off of. This ends up complicating the markup merely to generate an image, which is a mistake.
This technique, on the other hand, using the :before and :after selectors shows the right way to use CSS3 image composition, if you choose to do it. This example should be shouted from the hilltops to all front-end web devs.
Re: Single Element MacBook Pro with CSS
#46Cool, and I'm glad that someone is demonstrating a way to use CSS3 to create graphics in a way that doesn't require extra markup. One of the biggest problems with CSS3 is that, in a twist of irony, it's image composition power entices developers into adding markup to hang the CSS off of. This ends up complicating the markup merely to generate an image, which is a mistake. This technique, on the other hand, using the…
This should be an SVG. Using box-shadows to create shapes is not only confusing but really, really performance-draining.
(not to be a downer, it's incredibly impressive, but not something you should do in production code)
Re: Single Element MacBook Pro with CSS
#47Cool, and I'm glad that someone is demonstrating a way to use CSS3 to create graphics in a way that doesn't require extra markup. One of the biggest problems with CSS3 is that, in a twist of irony, it's image composition power entices developers into adding markup to hang the CSS off of. This ends up complicating the markup merely to generate an image, which is a mistake. This technique, on the other hand, using the…
This should be an SVG. Using box-shadows to create shapes is not only confusing but really, really performance-draining. (not to be a downer, it's incredibly impressive, but not something you should do in production code)
SVG fills me with dread. Canvas, maybe.
Re: Single Element MacBook Pro with CSS
#48Re: Single Element MacBook Pro with CSS
#49Earlier quoted context omitted.
This should be an SVG. Using box-shadows to create shapes is not only confusing but really, really performance-draining. (not to be a downer, it's incredibly impressive, but not something you should do in production code)
SVG fills me with dread. Canvas, maybe.
Why does SVG fill you with dread? (Honest question.)
Re: Single Element MacBook Pro with CSS
#50Earlier quoted context omitted.
I'd much rather have clean, reusable HTML. CSS you can use preprocessors to abstract away the messiness.
Aren't you using templates and macros for HTML already?
Changing how the HTML macros expand likely ends up requiring CSS changes (in practice, though not necessarily in a theoretically-ideal code base). One change in two places, vs one change in one place.