No it doesn't really, it keeps your HTML clean. Sure, there's better ways of getting a MacBook into your webpage, but this definitely shows the power of the :before and :after selectors.
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.
The thing to keep in mind is that the use of pseudo-elements keeps the style separate from the content. In terms of practicality, there isn't much; I did this as an experiment in semantics and the latest CSS properties and techniques.
Were it a photo, that would only depend on the focal length of the lens i.e. a super-wide-angle lens could make the front even wider relative to the screen.
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.
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.
G'day, I'm the guy that made it. I agree with your comment completely, I had one pretty big constraint though; one element allowed. I'd like to think that is why it is getting upvoted.
I think more than "you'll break the web" the issue is that it's almost never the right choice to make when compared to using more traditional techniques (e.g. images or svgs). Also it won't work in older browsers.
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.
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
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.
68 comments
[ 3.1 ms ] story [ 65.5 ms ] threadYou can also keep your kitchen clean by stuffing all the dirty stuff into the cupboards.
Nonetheless, I find it quite ingenious! Bravo
one line difference and you have the non-glossy screen version.
Missed a spot! This is true non-glossy.
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.
Add: text-align: center; line-height: 100px;
to the .macbook css, so you can add text to the screen ;)
(Hint: browser crash)
Better fire up IDA!
Drawing in CSS like this isn't as simple as dropping jQuery on the page.
If there was a jQuery plugin to automate this process from image to css, then we should worry!
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 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.
(not to be a downer, it's incredibly impressive, but not something you should do in production code)
Of course, SVG should be generated by tools rather than typed by hackers, but people tend to forget that.
http://i.imgur.com/ibi7I.png
http://codepen.io/anon/pen/kqALB