6 ms·
Single Element MacBook Pro with CSS
- wickeand000 14y agoHere is the comparison between different web browsers. Note that the image does not even load in IE8, so it is not included. http://i.imgur.com/ibi7I.png http://i.imgur.com/ibi7I.png
- antidaily 14y agoPfft, thats not a retina display.
- peter_l_downs 14y agoVery cool. Not sure why I'd ever need this, but it's impressive that it can be done. Congratulations on making something awesome.
- MattBearman 14y agoWhile undoubtedly impressive, I think using css :before and :after kind of defeats the point of 'single element'
- JCB_K 14y agoNo 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.
- fredley 14y agoIt may keep your HTML clean, but it makes your CSS messy!
- JCB_K 14y agoThat's why I said there's better ways of getting a MacBook into your webpage. But my point still stands, :before and :after are very powerful.
- MatthewPhillips 14y agoI'd much rather have clean, reusable HTML. CSS you can use preprocessors to abstract away the messiness.
- lolsal 14y agoAren't you using templates and macros for HTML already?
- Groxx 14y agoChanging 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.
- MatthewPhillips 14y agoNo, I typically write entirely client side applications.
- tobyjsullivan 14y agoAny reading recommendations for someone who isn't?
- arnarbi 14y ago> No it doesn't really, it keeps your HTML clean. You can also keep your kitchen clean by stuffing all the dirty stuff into the cupboards.
- joshnh 14y agoThe 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.
- mparlane 14y agoDoes anyone else think the front is too wide for that perspective? My only criticism.
- NLips 14y agoWere 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.
- peshkira 14y ago+1 the left and right should be -15px instead of -22 and the led light should be moved a bit to the left and it looks perfect imo. Nonetheless, I find it quite ingenious! Bravo
- joshnh 14y agoI simply eyeballed an image rather than working to scale. As it is just an experiment, I'm not too fussed by the incorrect dimensions.
- mparlane 14y agoDw, I think its brilliant and I upvoted. The perspective just gets to me is all :)
- joshnh 14y agoHere is the image I used for reference: http://store.storeimages.cdn-apple.com/6442/as-images.apple.com/is/image/AppleInc/mbp2012-step0-macbookpro-lh?wid=341&hei=218&fmt=png-alpha&qlt=95 http://store.storeimages.cdn-apple.com/6442/as-images.apple....
- kondro 14y agoLooks like it's probably even smaller than the equivalent SVG would be. Wish I had a use for it.
- zbowling 14y agohttp://codepen.io/anon/pen/vyHwk http://codepen.io/anon/pen/vyHwk one line difference and you have the non-glossy screen version.
- TazeTSchnitzel 14y agoThat's a white MacBook for me, but still glossy.
- stevenleeg 14y agohttp://codepen.io/anon/full/lCAEc http://codepen.io/anon/full/lCAEc Missed a spot! This is true non-glossy.
- aidos 14y agoIf 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.
- otneusnocuh 14y agoIt's a demo, not a best practice.
- joshnh 14y agoYou could actually scale it if I had have used ems/rems instead of px. But you are right, an image is the way to go for production.
- irunbackwards 14y agoAre you a wizard?
- hisyam 14y agoThis is not reddit.
- al_james 14y agoWow. 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.
- andrewflnr 14y agoA pure hack if there ever was one.
- andrewfelix 14y agoIt's been well established that you can achieve just about any icon purely with CSS. Why is this getting so many upvotes?
- joshnh 14y agoG'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.
- andrewfelix 14y agoTake it you're an Aussie. In which case, more power to you (I'm in Newcastle). Lovely icon.
- joshnh 14y agoI am; Melbourne based. Thanks!
- marknutter 14y agoIt's been well established that you can paint just about anything with oil paints. Why do people go to art museums?
- andrewfelix 14y agoNot sure that Hacker News is comparable to an art museum. But point taken.
- marknutter 14y agoLegos might have been the better example :)
- RobotCaleb 14y agoBecause Apple, maybe?
- phaemon 14y agoVery nice! Add: text-align: center; line-height: 100px; to the .macbook css, so you can add text to the screen ;)
- maqr 14y agoThere 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."
- se85 14y agoI wouldn't worry too much. 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!
- MatthewPhillips 14y agoHow so?
- zevyoura 14y agoI 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.
- riobard 14y agoJust try visiting the page on iPad and zoom. You'll know. (Hint: browser crash)
- cjdentra 14y agoVery cool. Nice work.
- lunarscape 14y agoChrome-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.
- joshuahedlund 14y agoImpressive. 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.
- javajosh 14y agoCool, 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.
- ender7 14y agoThis 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)
- javajosh 14y agoSVG fills me with dread. Canvas, maybe.
- eblume 14y agoWhy does SVG fill you with dread? (Honest question.)
- toyg 14y agoProbably because of "wall-of-xml" syndrome. Of course, SVG should be generated by tools rather than typed by hackers, but people tend to forget that.
- drhowarddrfine 14y agoI love SVG.
- joshnh 14y agoSpot on. I clearly state in the description field that it is only an experiment.
- blt 14y agoWow, this markup language that provides shapes, positions, colors, gradients, and transparency can be used to create images!
- bill999 14y agoI hate CSS
- paulocal 14y agoadded the macbook pro logo to top it off. hope you dont mind :D
- aba_sababa 14y agoAnd now we've got a Macbook Air! http://codepen.io/anon/pen/kqALB http://codepen.io/anon/pen/kqALB
- FWeinb 14y agoHere I tried to create all MacBooks http://codepen.io/FWeinb/pen/dEnbz http://codepen.io/FWeinb/pen/dEnbz
- calvintennant 14y agoAnd because I'm a content-management geek: http://codepen.io/anon/pen/wxytJ http://codepen.io/anon/pen/wxytJ
- mrbrownie 14y agoThis one has a GPS like device made of only CSS: http://geeksigner.com/clients/egl/ http://geeksigner.com/clients/egl/