
Single Element MacBook Pro with CSS - michaelkscott
http://codepen.io/joshnh/pen/JCGoF
======
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.

~~~
joshnh
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.

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

~~~
ender7
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)

~~~
javajosh
SVG fills me with dread. Canvas, maybe.

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

~~~
toyg
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.

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

~~~
MatthewPhillips
How so?

~~~
riobard
Just try visiting the page on iPad and zoom. You'll know.

(Hint: browser crash)

~~~
larholm
Browser crash?

Better fire up IDA!

------
zbowling
<http://codepen.io/anon/pen/vyHwk>

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

~~~
TazeTSchnitzel
That's a white MacBook for me, but still glossy.

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

~~~
andrewflnr
A pure hack if there ever was one.

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

------
aba_sababa
And now we've got a Macbook Air!

<http://codepen.io/anon/pen/kqALB>

~~~
FWeinb
Here I tried to create all MacBooks <http://codepen.io/FWeinb/pen/dEnbz>

------
andrewfelix
It's been well established that you can achieve just about any icon purely
with CSS. Why is this getting so many upvotes?

~~~
marknutter
It's been well established that you can paint just about anything with oil
paints. Why do people go to art museums?

~~~
andrewfelix
Not sure that Hacker News is comparable to an art museum. But point taken.

~~~
marknutter
Legos might have been the better example :)

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

~~~
JCB_K
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.

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

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

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

~~~
Groxx
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.

------
wickeand000
Here 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>

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

~~~
bti
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>

------
calvintennant
And because I'm a content-management geek: <http://codepen.io/anon/pen/wxytJ>

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

------
phaemon
Very nice!

Add: text-align: center; line-height: 100px;

to the .macbook css, so you can add text to the screen ;)

------
lunarscape
Chrome-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.

~~~
joshsharp
Works for me in Firefox 14.

------
mrbrownie
This one has a GPS like device made of only CSS:
<http://geeksigner.com/clients/egl/>

------
blt
Wow, this markup language that provides shapes, positions, colors, gradients,
and transparency can be used to create images!

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

~~~
joshnh
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.

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

~~~
joshnh
Here is the image I used for reference: [http://store.storeimages.cdn-
apple.com/6442/as-images.apple....](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)

------
antidaily
Pfft, thats not a retina display.

------
paulocal
added the macbook pro logo to top it off. hope you dont mind :D

------
cjdentra
Very cool. Nice work.

------
irunbackwards
Are you a wizard?

~~~
hisyam
This is not reddit.

