Single Element MacBook Pro with CSS

#1

Post by michaelkscott » Wed, Aug 15, 2012, 7:01 AM UTC

Single Element MacBook Pro with CSS
codepen.io

Re: Single Element MacBook Pro with CSS

#2

Post by peter_l_downs » Wed, Aug 15, 2012, 8:22 AM UTC

Very cool. Not sure why I'd ever need this, but it's impressive that it can be done. Congratulations on making something awesome.

Re: Single Element MacBook Pro with CSS

#3

Post by MattBearman » Wed, Aug 15, 2012, 8:26 AM UTC

While undoubtedly impressive, I think using css :before and :after kind of defeats the point of 'single element'

Re: Single Element MacBook Pro with CSS

#4

Post by JCB_K » Wed, Aug 15, 2012, 8:30 AM UTC

MattBearman wrote: post #3

While undoubtedly impressive, I think using css :before and :after kind of defeats the point of 'single element'

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.

Re: Single Element MacBook Pro with CSS

#5

Post by fredley » Wed, Aug 15, 2012, 8:40 AM UTC

JCB_K wrote: post #4

MattBearman wrote: post #3

While undoubtedly impressive, I think using css :before and :after kind of defeats the point of 'single element'

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.

It may keep your HTML clean, but it makes your CSS messy!

Re: Single Element MacBook Pro with CSS

#6

Post by mparlane » Wed, Aug 15, 2012, 8:44 AM UTC

Does anyone else think the front is too wide for that perspective? My only criticism.

Re: Single Element MacBook Pro with CSS

#7

Post by NLips » Wed, Aug 15, 2012, 9:15 AM UTC

mparlane wrote: post #6

Does anyone else think the front is too wide for that perspective? My only criticism.

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.

Re: Single Element MacBook Pro with CSS

#8

Post by peshkira » Wed, Aug 15, 2012, 9:16 AM UTC

mparlane wrote: post #6

Does anyone else think the front is too wide for that perspective? My only criticism.

+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

Re: Single Element MacBook Pro with CSS

#9

Post by kondro » Wed, Aug 15, 2012, 9:17 AM UTC

Looks like it's probably even smaller than the equivalent SVG would be. Wish I had a use for it.

Re: Single Element MacBook Pro with CSS

#10

Post by zbowling » Wed, Aug 15, 2012, 9:18 AM UTC

http://codepen.io/anon/pen/vyHwk

one line difference and you have the non-glossy screen version.