Pure CSS Macbook Pro

[nixnerd]

So, I’m not posting a Codepen… because I’m not done and completely happy. Here is a screen-shot of the progress (it’s just divs!):

Here is the original:

What do you guys think? Legit? The purposes are many:

1. It’s small as hell (file wise)… almost instant load.
2. Extremely tweakable.
3. Fully responsive… in every way.
4. I can morph it into an iPhone on scroll.
5. Because I can!

[nixnerd]

The only REAL difference is the shadow on the actual photo is darker. I wanted to keep it more subtle.

[nixnerd]

Why the black screen? You know why:

http://codepen.io/Joe_Temp/pen/yEgiz

[FezVrasta]

the border of the monitor could be improved, by the way it’s nice.

[nixnerd]

Yep… real Macbook has a slightly sharper border-radius. Good eye. Not too worried about the color of the outer edge… because it will be adjusted based on the background photo and the light source in the photo. Wrote a NICE little mixin for that.

BTW @FezVrasta… I like your Gravatar. Love me some Rio 2. I was just remarking on how beautiful that frog is.

[nixnerd]

Had to look at it for a bit to be able to tell the differences.

Hopefully you’ll have to look even longer when it’s done! Ha ha.

Edit: The gradients aren’t absolutely perfect… but they take a lot of trial and error. Unless there’s a gradient tool out there I don’t know about. Also… I won’t have the actual photo on my site for comparison… so that will help.

[nixnerd]

For sure. The performance gains and flexibility are well worth it to me though… and you know, doesn’t have to be perfect. Just has to be good enough to not get noticed for what it is.

[FezVrasta]

This is a good tool to generate gradients.
http://www.cssmatic.com/gradient-generator

You should even add a inner white shadow on the camera lens.

[nixnerd]

Oh I totally agree. I didn’t mean a high res image would be superior to your solution, only that I might have noticed the difference if I was comparing to a high res image.

Oh no, I know. You can just slightly tell that the gradients are a tad smoother. It’s weird, on the photo they have some pixelated “grit” to them that doesn’t necessarily look nice… but it looks realistic… the way light shines off aluminum. I think that’s what people are accustomed to seeing in photos. Little touches of reality that let them know they’re looking at something real, not a facsimile.

That being said, the real photo is INSANELY touched up. But… the artist(s) knew to keep enough reality intact that it still looks like a photo. Does that make sense?

At any rate, I’m getting damn close to “good enough.”

[nixnerd]

This is a good tool to generate gradients.

I was talking about a tool that I can feed a photo and it will output a proper gradient. That would be insanely awesome.

You should even add a inner white shadow on the camera lens.

There’s actually a VERY subtle gradient on the lens… because it’s subtle in the real photo. On the iPhone however, the lens has a gradient that includes white, purple and almost a cyan. I may choose to incorporate a bit of that in the Macbook if I think it looks cool.

[chrisburton]

Have you seen the one Joshua Hibbert made with a single element?

[nixnerd]

Have you seen the one Joshua Hibbert made with a single element?

I have now! It looks really good. More of an icon though. Not quite the level of realism I’m looking for. The cool thing about one element is… it’s one element. Cool thing about multiple elements is… lots of fine grained control.

The coolest thing that makes it really look like a photo is the ability to change the gradient around the screen and on the front edge… independently. This allows me to take into account the light source on a photo for pretty insane realism.

I want the vast majority of people to not know it’s divs.

[chrisburton]

I want the vast majority of people to not know it’s divs.

Gotcha. I now see you’re going a different route than what I originally thought.

[nixnerd]

No worries man. His is still super badass.

[schawki]

hi Nixnerd, I was looking for a solution like this to build a slider inside the screen of the computer. Did you ever release the code? If not, are you planning to release it? it would be really awesome because there’s no mockup so realistic as yours in html & CSS. have you built other devices with the same method?

[Author]

Posts