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

61–69 of 69 posts

Re: Single Element MacBook Pro with CSS

#62

Post by joshnh »

ender7 wrote: post #46
javajosh wrote: post #45

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…

This 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)

Spot on. I clearly state in the description field that it is only an experiment.

Re: Single Element MacBook Pro with CSS

#63

Post by tobyjsullivan »

lolsal wrote: post #43
MatthewPhillips wrote: post #29

Earlier quoted context omitted.

I'd much rather have clean, reusable HTML. CSS you can use preprocessors to abstract away the messiness.

Aren't you using templates and macros for HTML already?

Any reading recommendations for someone who isn't?

Re: Single Element MacBook Pro with CSS

#64

Post by toyg »

eblume wrote: post #49
javajosh wrote: post #47

Earlier quoted context omitted.

SVG fills me with dread. Canvas, maybe.

Why does SVG fill you with dread? (Honest question.)

Probably 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.

Re: Single Element MacBook Pro with CSS

#65

Post by joshnh »

aidos wrote: post #12

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…

You 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.

Re: Single Element MacBook Pro with CSS

#66

Post by Evbn »

joshuahedlund wrote: post #40

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 geogra…

D3.js

Re: Single Element MacBook Pro with CSS

#68

Post by se85 »

maqr wrote: post #24

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."

I 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!

Post reply on HN