Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Single Element MacBook Pro with CSS

codepen.io

Post reply on HN
Print view View original

11–20 of 69 posts

Re: Single Element MacBook Pro with CSS

#11

Post by JCB_K »

fredley wrote: post #5
JCB_K wrote: post #4

Earlier quoted context omitted.

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!

That'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.

Re: Single Element MacBook Pro with CSS

#12

Post by aidos »

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.

Re: Single Element MacBook Pro with CSS

#14

Post by al_james »

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.

Re: Single Element MacBook Pro with CSS

#15

Post by joshnh »

MattBearman wrote: post #3

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

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.

Re: Single Element MacBook Pro with CSS

#17

Post by mparlane »

joshnh wrote: post #16
mparlane wrote: post #6

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

I simply eyeballed an image rather than working to scale. As it is just an experiment, I'm not too fussed by the incorrect dimensions.

Dw, I think its brilliant and I upvoted. The perspective just gets to me is all :)

Re: Single Element MacBook Pro with CSS

#18

Post by joshnh »

mparlane wrote: post #17
joshnh wrote: post #16

Earlier quoted context omitted.

I simply eyeballed an image rather than working to scale. As it is just an experiment, I'm not too fussed by the incorrect dimensions.

Dw, I think its brilliant and I upvoted. The perspective just gets to me is all :)

Here is the image I used for reference: http://store.storeimages.cdn-apple.com/6442/as-images.apple....
Post reply on HN