Show your work in context with photo overlay, iframe and 3d css
Creating digital sites and apps is very satisfying. However it’s difficult to imagine/explain the context of where the user would use the app or site and who they are. Lets take a look at how we can imitate a real user using your app.
One of the ways designers/videographers have tried to get around this, is to photograph/video the user using the app in a specific situation. This is a powerful technique as it tells us alot about how the product is expected or actually being used.
I wanted to see how we could do this using modern technologies to make it more interactive.
First we need to show a project in the page. You could use an image, or load the html as an include, but i’ve decided to use an iframe to see the actual working site:
<div class="frame">
<div class="inner">
<iframe src="http://www.bynd.com"></iframe>
</div>
</div>
Then we can add some css to angle it to match a background image of a person holding an iPad:
body {
background-image: url('http://cdn2.digitalartsonline.co.uk/cmsdata/slideshow/3473607/BARBICAN_012_EK4A5585_ipad_landscape.jpg');
background-position: top center;
background-repeat: no-repeat;
}
.frame {
margin: 220px auto 0 auto;
width: 630px;
height: 487px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.inner {
width: 100%;
height: 100%;
overflow: hidden;
margin: -28px 0 0 54px;
-webkit-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg);
-moz-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg);
-ms-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg);
-o-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg);
transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg);
}
iframe {
width: 100%;
height: 100%;
border: none;
}
Next we can add some gloss to the iframe to make it look like behind the screen:
<div class="frame">
<div class="inner">
<span class="gloss"></span>
<iframe src="http://www.bynd.com"></iframe>
</div>
</div>
and some css magic
.gloss {
pointer-events: none;
position: absolute;
width: 130%;
height: 45%;
top: -20%;
right: -5%;
background: rgba(255,255,255,0.3);
-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-ms-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
View the demo here:
https://jsfiddle.net/kmturley/nxt25/90/