Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:13Length:2.6 hours
Css3 brand
  • Overview
  • Transcript

2.4 Polaroid Image Gallery

Hi, welcome back to 10 CSS3 Branding and Presentation Projects. In this project, you're gonna be creating a Polaroid style photo gallery. And to get started, you can fork the base pane that you see on your screen right now. You'll find a link for that in the related links section below this video. You might also notice that we're using one of the backgrounds from our background pens project. This rough paper start makes really great backdrop for a photo gallery like this. Let's begin by adding in our first image. So here's the actual image tag for the image that we're using. And we have that wrapped in a couple of other div's. So we've got a div for the class Polaroid. We're gonna use this Polaroid class to give the actual Polaroid style around the image. And then that is in turn wrapped in a class named item. And we'll be doing some other positioning type of things with that. And then below the image tag, we have a div for the class caption. And we're using that to capture the images with whatever you would like to capture them. Be it attribution or notes or anything that you like. If you check out the CSS that we've already got in our base pen, we've got the beginnings of the responsive functionality. We've set all images to be no greater than 100% width. So that means that they're never gonna overlap the parent container that they're in. And we have set their height to be auto so that they'll maintain their aspect ratio. So even now, if we shrink down the space that we have to work with, the image will shrink down with it. Let's add in the styling for our Polaroid class first. Now, here we're just giving it a white background around our Polaroid. We're putting some spacing around the outside and we're putting in a basic box shadow and you can see that box shadow around the edges. Now, right now this div is a block element. So that's why you're seeing it come out to these widths here and obviously we only want this white to be around the edges of the image at the size that we're working with. So we're gonna add some styling in for our item class. And now, we've set the autumn class rather than displaying as a block element, we're setting it to display as an inline block element. So now, instead of stretching the full width of the viewport. It's only going to take up the width that it needs to take up. So that's the size of the image plus the size of the padding that we've put around the outside. And then with our item class, we've also added a little bit of margin at the top to make sure that we don't have images touching one another as we have more on the page. And then we've added in this filter, grayscale. Now, there's a whole bunch of really cool filters in CSS now that you can do for things like this. Making a photo black and white, you can also add sepia tones. You can do various things to change the coloring around. And in that case, we've just set this to black and white because a little bit later we're going to have these photos turned back into full color when you hover over them. Now we're just add a little styling on the caption. We're just boosting up font size and we're setting it's line height. So that it creates that familiar thicker area at the bottom of a Polaroid image. And the next thing that we're gonna do is change up the angle of the Polaroid. So that it looks like it's being pinned onto this board with a little rotation on it. And we're gonna give it a shadow that makes it look like the corner is turned up a little. We're gonna have four different variants of that rotation and that turned up corner shadow. So in preparation for creating those, we're first going to put in some standard styles that are gonna apply to all of our Polaroids. And these styles are applying to the before element on our Polaroid. We're setting the content on it to nothing. Positioning that before element absolutely, so that we can put that shadow in the right place. So it looks natural. We're setting the z index to -1 to make sure that that shadow appears behind our Polaroid. And we're putting a transition in place. So that later, when we change the shadow when we hover over, we animate the changes that are being applied to those shadows. Now, let's set up the scaling and the rotation on the first of the four different types of Polaroid that we're going to use. You can see that this has applied itself already. It's rotated our Polaroid by five degrees which is coming from this code. And it's made the Polaroid smaller. It's scaled it down to 0.8 by 0.8, so that means that the height and the width of the Polaroid are now 80% of their original size. And we're using the nth-of-type selector to apply this style to every 4th image. Now, when you use this n figure here, in conjunction with nth-of-type. You can set that up so that it will choose every nth item. Now, by putting 4 in here we're saying, apply this every four items. You can change it to 3n and it would be every three items, 2n and it would be every two items. And then by saying +1, we're making sure that that applies to the first item in our gallery. So it' will find the first item in our gallery and then four items after that. It will find the next one, so it'll find the first and the fifth and so on. If that doesn't fully make sense yet, it will make sense as we start to add in the rest of the styles that we're gonna be using. You'll see how that works with those other selectors. And then we've also once more, used a transition here. When we hover over the Polaroid later, we're gonna be changing its scale and its rotation. And this transition will animate those changes. Now, we'll add in our turned up corner shadow. There you can see the little shadow there giving the effect that this corner is just a little lifted. We're using the same nth-of-type selector, and then we're using that to put up a four pseudo element on the Polaroid on this first item and then every four items after that. Probably, the best way to understand how this shadow works is if I move it, so that instead of being behind this Polaroid it is pushed down and you can see how it looks by itself. So I'm just gonna change this to say -130. And that is how our shadow looks by itself. So we just have a regular square or a rectangle rather, and we've put a drop shadow on it. But we've rotated that shadow. And then the way that we've positioned it, makes it look like it's part of the shadow of this box here. If I undo that. And see it go back to where it belongs. And now, you can visualize that there is still a rectangle behind here. But you just don't really see it that way. You automatically just view this as being a shadow of this Polaroid. And that's how we create that turned up effect. And you'll note that the width here is percentage based and so is the height. So that even when we start to scale this image down. That shadow is still gonna look pretty good. Now, we are gonna add in our harvest style. So we have it now, that when we hover over one of the Polaroids that black and white filter will disappear. So it will go back to full color and then it will go back up to its default scale and rotation of zero degrees. Then we're also transitioning it, so that as you hover over and then as you take your mouse away again, we animate those changes. So now, when we hover over the image zooms up, it rotates itself back to being straight and it goes to full color. Now, the only thing that's not quite right here is we still have the turned up corner shadow. If you imagine that the light source for our Polaroid gallery is at the top coming down then when we rotate our image and bring it closer, we don't expect it to have the same shadow. So now, we're gonna change that shadow when we're hovering, so that it looks a bit more natural. So now, when we hover over we have a shadow that looks more like it has a light source from above and we've also changed the way that it looks to give the impression that the Polaroid has moved further away from the board that it's pinned to. And we've done that by resetting the rotation on our pseudo element back to zero. So the shadow's not rotated any more. We've set its height and width to 90%, so that rather than being in that one corner, it's spread out more evenly along the bottom of the Polaroid. And then we've just tweaked the box shadow itself, so that it's a little softer and it just looks a little bit more realistic. That's our first Polaroid style ready to go. Now, we're gonna add in the rest of our images to our gallery and then style up the remaining three Polaroid's styles we're gonna use. Add in our HTML. And right now you can see that only the first one is being affected by our rotation and shadow. And that's that selector that we went through before, the nth-of-type selector. All the rest of them just have default Polaroid styling until we reach the fifth one, which is where our nth-of-type selector kicks in again, for the styles that we've put in so far. Now, we're gonna style these Polaroids as well. So we're gonna grab a copy of the styling that we already used. So both of these, copy those and paste them down here. And now, instead of saying +1 here, we're gonna say +2. And what that's gonna do is start with the second Polaroid and then target every fourth one after that. So swap that around. And now, you can see this second Polaroid is styled. And if we had a sixth one you would see that as well. And we wanna use the same style but just rotated in the other direction. So rather than rotating both of these by positive amounts, we're going to switch those to rotate by negative amounts. So that's got our rotation looking as we want it. And then instead of having our turned up shadow on the right side of the Polaroid we're gonna have it on the left side. So we'll just change this from reading right 12 pixels to left 12 pixels. And now, that second Polaroid style is finished. Now, for the third Polaroid style, grab the style that we just created and duplicate it. And just like we did before, we're gonna increment this value. We're gonna change that from 2 to 3. So now, our third Polaroid is styled but this time, we don't want it to have quite as much rotation as those first two. So we're gonna reduce this rotation from 5 degrees to 3, and we're gonna reduce this rotation from 6 degrees to 4. And now, because we don't have quite as much as rotation, we're not gonna need quite as heavy a shadow. So we're gonna reduce the alpha channel on our shadow down to 0.3 opacity. And that's just lightened that off a little bit. Now, that's our first, second, and third styles are all done. Now, we only have our fourth style to do. So just like we did before, grab a copy of the code that we just created, duplicate it. We're gonna bump that up from three to four. And now, instead of a negative rotation, we'll put this back to a positive rotation. That rotates that around to the right. And now we just need to move this shadow from a left side to the right. So where it says left 12 pixels here. We just change that to right 12 pixels. So now, we've got a little bit of variety on the way that the rotations are gonna come up. And you don't have to put a specific class name on any of these Polaroids to determine which rotation they're gonna use because we are using our nth-of-type selector. Everything will just automatically iterate itself, and you'll get that variety on your images just by adding more and more in. And because we used display inline block early in this project, this is automatically responsive. So that's just as soon as we've reduced the size of the viewport. Let's just collapsed them down into a single row. And likewise, if you're on a wider screen then these will fill up the whole width of the screen. They'll fit as many Polaroids onto each row as they can. And you can add as many images as you want to into this gallery. All you need to do is just make a duplicate of this HTML that we used per item, and just change up the image address and the caption. When you finish building your CSS3 Polaroid gallery we would love to see your work. Please Tweet us through your finished pen to #10CSS3projects. In the next project, we're gonna be creating a cover section for a website that uses parallax scrolling effects. And parallax is a term that we use to describe the way in three dimensional space objects that are further away from you move slower than those that are closer to you. So by using paralex scrolling, it gives an impression of depth in a website. Now, previously if you're gonna use parallax scrolling, you would need to use JavaScript. But because CSS3 brings some 3D transforms into the picture for us, there is now a way to do it with pure CSS3. You're gonna learn how in the next project. I'll see you there.

Back to the top