Single Element MacBook Pro with CSS
If 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 though. It's good work.
Cool, 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.
There really should be a warning on all these demos, something like: "Don't actually draw with css in the wild, you'll break the web."
http://codepen.io/anon/pen/vyHwk
one line difference and you have the non-glossy screen version.
Wow. There have been many of these "Look what I can do in CSS" articles lately, and frankly, they are normally quite boring. However this is the first time I have ever gone "wow". Very impressive. Quite useless really, but good work.
Very cool. Not sure why I'd ever need this, but it's impressive that it can be done. Congratulations on making something awesome.
And now we've got a Macbook Air!
It's been well established that you can achieve just about any icon purely with CSS. Why is this getting so many upvotes?
While undoubtedly impressive, I think using css :before and :after kind of defeats the point of 'single element'
Here is the comparison between different web browsers. Note that the image does not even load in IE8, so it is not included.
Impressive. 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 geographically-shaped elements.
And because I'm a content-management geek: http://codepen.io/anon/pen/wxytJ
Looks like it's probably even smaller than the equivalent SVG would be. Wish I had a use for it.
Very nice!
Add: text-align: center; line-height: 100px;
to the .macbook css, so you can add text to the screen ;)
Chrome-only? Doesn't appear to work in Firefox nightly.
Edit: Somehow my fault. Works with new profile in FF14. Curiously doesn't work in my standard profile in Aurora or Nightly even with plugins disabled.
This one has a GPS like device made of only CSS: http://geeksigner.com/clients/egl/
Wow, this markup language that provides shapes, positions, colors, gradients, and transparency can be used to create images!
Does anyone else think the front is too wide for that perspective? My only criticism.
Pfft, thats not a retina display.
added the macbook pro logo to top it off. hope you dont mind :D
Very cool. Nice work.
I hate CSS
Are you a wizard?
