- This topic is empty.
August 25, 2014 at 9:54 pm #180636
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:
August 25, 2014 at 9:55 pm #180638
- It’s small as hell (file wise)… almost instant load.
- Extremely tweakable.
- Fully responsive… in every way.
- I can morph it into an iPhone on scroll.
- Because I can!
The only REAL difference is the shadow on the actual photo is darker. I wanted to keep it more subtle.August 25, 2014 at 10:23 pm #180639
Why the black screen? You know why:August 26, 2014 at 5:47 am #180651FezVrastaParticipant
the border of the monitor could be improved, by the way it’s nice.August 26, 2014 at 8:06 am #180676
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.August 26, 2014 at 9:14 am #180688
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.August 26, 2014 at 11:01 am #180701
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.August 26, 2014 at 11:10 am #180705FezVrastaParticipant
This is a good tool to generate gradients.
You should even add a inner white shadow on the camera lens.August 26, 2014 at 11:12 am #180706
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.”August 26, 2014 at 11:15 am #180709
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.August 29, 2014 at 7:37 pm #181119chrisburtonParticipant
Have you seen the one Joshua Hibbert made with a single element?August 29, 2014 at 7:48 pm #181120
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.August 30, 2014 at 7:04 pm #181212chrisburtonParticipant
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.August 31, 2014 at 8:44 am #181240
No worries man. His is still super badass.August 2, 2017 at 1:51 am #257310schawkiParticipant
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?
- The forum ‘Design’ is closed to new topics and replies.