demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Shake it, shake it, come on and shake it. (Or, you know, hover).

Develop A Polaroid Photograph With CSS Transitions

css / filters

Estimated reading time: 1 minute, 41 seconds

I’ve talked about animating previously, but they are not always the most appropriate way to create image transitions. For some effects – such as replicating the development process of a Polaroid photograph –  you might need to think a little out of the box.

Whatever we are about to do to this image, we don’t want it affecting the outside edge of the picture, which would happen if we simply added a border. Instead we’ll create a frame with a div:

<div id=polaroid>
<img src=christine-adams.jpg alt="Christine Adams">
</div>

(Alternatively, you could place the image as a background for a div with a set height and width.)

We’ll float the outside div to bring it against the edges of the interior element, creating the frame at the same time:

div#polaroid { float: left; border: 25px solid #f3f4e3; border-bottom-width: 50px; background: #1d1904; }
div#polaroid img { width: 400px; height: 364px; }

We want the Polaroid to visibly develop from the center out towards the edge. To do that, we’ll reset the styles above and apply an inset box-shadow with no offset and a large spread value to the div. I have also added a slight sepia filter to make give the picture a little more of a Polaroid feel. (In the CSS, we’ll keep to the W3C standard property for transitions; you will need to add vendor prefixes for broader support in other ).

div#polaroid {
float: left; border: 25px solid #f3f4e3;
border-bottom-width: 50px; transition: 3s all ease-in;
box-shadow: 0 0 200px 200px rgba(29,25,4,1) inset;
}

We won’t be able to see this shadow due to the fact that the image is "on top" of the div. We’ll change that in the next section:

div#polaroid img { width: 400px; height: 364px; position: relative; z-index: -1; }

Finally, we’ll change the div’s box-shadow on hover:

div#polaroid:hover { box-shadow: 0 0 100px 0 rgba(29,25,4,0.8) inset; }

It’s very possible to develop the image after shaking it on the screen, but that will need and a future article. Play with this code on CodePen

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.