7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 CSS3 Flipbook

Hey this is Kezz back with another bonus lesson. In this project what we're gonna be doing is another version of an image slider, but this time we're gonna make it work like a flip book. Now these are almost always powered by JavaScript but in this case we're gonna be doing it with pure CSS. So every time you go to the next slide, you get a little animation that looks like you're flipping through pages in a book. And just like with our last project, this is not gonna be exactly like a JavaScript pad project. And that's for the same reason, because you can't select something prior to any given element. Which means that while everything looks great while you're going forward. When you're going backwards, it's not quite the right effect. So, once again, you can treat this as a learning exercise, or if you need a pure CSS fallback for a JavaScript-powered flipbook, or if you really just need the best thing that you can get without using JavaScript. All right, so, once again, we have a base pen that you can fork to get the ball rolling with this project. And first up, I'm gonna take a little look at how the HTML for this project is setup. And if you scroll down you can see that we'll actually got each one of these images placed twice into the page. And we'll just take a look at the HTML that's controlling that. You can see that we've got the same classes that we've had before, we've got our input field acting as a switch, our label, and then our slide-content. But then inside that, we have a div with the class name page, and then inside that, we have the actual image, that's gonna show in our slider. And then we have the same thing again. So doing that twice in each of our slides. And the reason that we have to do is because when you think about it, when you're flipping a page in a book, you don't have just one item you have two items. You have the page on the left and the page on the right. So we are gonna need to have one copy of the image that's made to look like the left page and the other copy of the image that's made to look like the right page. All right, so now let's get started with our CSS. First thing that we're gonna do is add in the default styling that we're gonna use for each one of our slides and for the images inside those slides. So that is gonna be, This code. So we're targeting that slide-content class that we've had in each vessel added so far. And we're also targeting that page class that we just talked about. So in each case, we want the div to be a full 100% width and height and we want it to be absolutely positioned. We want its left right and top parameters to be set to 0, and we're gonna set the opacity to 1. Now you'll notice here that the image looks a little bit like it's off into the left. That's actually not on purpose. That's happening because these images are a little too small for the footprint that we want to create. So we're gonna fix that by tagging the images that are inside that page class with this code. So now we've set a fixed width and height for our images and that's forced those images up to the correct seize. And then we are absolutely positioning our images and we've set all four sides to be positioned at 10 pixels. So what that's gonna do is give us 10 pixels of space around the outside of each one of our images. And we're gonna use that to create the effect that these images have been printed on to a page that has a little bit of white space around the edges. And you'll see that as we move forward. All right now let's start turning our images into these left and right side pages that we talked about. And we're gonna start with the left page and we're gonna create that left page out of the first of the two copies of each image. And we'll do that with, This code. Now you might not have spotted the change that happened there. But, if you look really closely you can see that now we have this white edge along the outside here but, only on the left hand side. So, what you can actually see is on this left side here you only have half an image. So this actually stops right here, but because the other image is placed perfectly next to it, there's not gonna be any visible divide in between the left and right sides. So, how are we achieving this? The first thing that you wanna have a look at is, we're targeting our slide content class. It contains all of our slides. Then, we're targeting that page class that we have wrapped around each copy of our images. And then, we're using first-of-type to find the first of those two images. Later one, we're gonna be able to use last-of-type to find the second one. So the first one we're converting into the left page and the second one by using last-of-top we're gonna convert into the right page. And what we're doing is hiding half of that image and half of that page. Now we do that with this clip line here. Now, wha that's doing is telling the browser to clip this div and only show the portion of it that's specified by these coordinates here. Now, what this clip line is doing is telling the browser to only show that left half of our page div, which also clips the image that we have inside it. Now even though we're only showing half of the image, we still need to have the width and height set to 100%. Because we want our image to be full width, but we only wanna show half of that width. And then we're positioning our half page, absolutely, in that same position where we have the left, right, and top coordinates all set to zero. And then finally, we have the background set to white, and we have a border radius on here, affecting this corner and this corner. Creating a little bit of rounding. That rounding will be more apparent later when we add a bit more styling, but we're leaving this corner square and this corner because that's gonna match up and align flush with the right page. So, speaking of the right page, let's put the code in for that as well now. And now you can see that we have the rest of that white border around the outside here. And we've just done the same thing. This is basically the same code, but we are using last-of-type to grab that second copy of the image instead. And we have a slightly different click parameters, so that we get the right side of that div instead of the left side. And then we also are putting our five pixel rounded border in the inverse position on the left side so that we get this corner and this corner rounded. So, right now, if you page through these slides, you're not gonna see any change. So what we're gonna do now is add in some animation to start creating our Flipbook effect. We're gonna need to animate the left page and the right page independently of one other. So we'll start with the animation for the left page. In this case, we're not gonna be using a transition. We're gonna be using a key frame animation. So the first thing we're gonna do is add in the key frame animation for the left page with this code. Now what we're doing here is two things. We are gonna animate the horizontal position of the left page with this line and this line. So we're starting with the page push all the way over to the right side here. And then we're gonna end with the page all the way over in the left side here. And now we're also gonna animate that click property that we looked at earlier. We're gonna start this page out so it's still 450 pixels high, but it has 0 width. So you can see it right at the beginning. And then across the course of the animation, we're gonna grow that out so it becomes 410 pixels wide instead, which is the width of our single page. So as the animation runs, you're gonna see the page increase in width from zero to this half page size, and it's gonna move from right to left across our flip book. And that with those two things combined, is gonna give us that page flipping fit. All right, so now let's apply that animation to our left page, but only when the lift page has been selected. So do that with this code. And there you can see that page turning effect as the left page comes in. What we're doing here is using the same series of selectors that you've already used before. Where we're looking for the checked slide switch. And, then we're using the plus symbol to go down the adjacent siblings until we reach the slide content class div. And then inside that, we're going further in and finding the page div inside, but we only want the first of type here. So that's giving us that first page, so we can apply our animation to it, only when it's checked. And here is where we're replying our animation. So we've specified that we wanna use this left_page animation that we just added in here here, and that we want the animation to run for one second. And then we're also bumping the z index of our left page up to two to make sure that it's above everything else that's in our page. So now when you switch to any one of these other pages, you're gonna see that page turning animation happen. Now, obviously that's on the first step to creating our full effect. The next thing we need to do is add any animation for the right page. So this is the animation that we're gonna use for the right side. In this case we don't need to move the right page. It just needs to stay on that right hand side. But as the left page turns, we wanna make it look like that right page is being revealed at the same rate. So we're gonna animate the clip property just like we did with the left page. And we're gonna change it from having 0 width up to having 410 pixels in width. So then with the left page animating over the top of it, that's gonna make it look like you're seeing that right page gradually appear. So now we'll implement the right page animation in the same way that we did the left page with this code. So it's the same thing again, but this time we're looking for the last of type. So that's gonna give us that second page. This time we're implementing our animation to run at 0.75 seconds, our left page animation is running at 1 second. So this one is gonna run a little bit faster, so that as the left page is turning, we make sure we don't have any gap here in between the two pages breaking the illusion of that page turning effect. In this case we're setting our right page to have a z-index of 1. Because we want it to be below the left page, so we don't break our page turning effect, but we still want it to be above all the other pages. So now let's try out our page turning effect and see what we have so far. All right, so now that's starting to look pretty good. There's still a couple of glitches that we'll iron out but our right page is appearing gradually as the left page folds back. And we've got a pretty solid start to our effect. One of the most obvious glitches that we still need to sort out is when you turn the page, you see that last image here, with the bright green trees, shows up, Between every page turn. Now the effect that we want to achieve is, when we turn a page, the one before it should still be visible underneath, but we want every page after the currently selected one to be invisible. And we're gonna make that happen by adding this code. So now you can see right there, there was no page showing on the left when we have the first page selected. And if we go to the second page, now we don't have that bunch of green trees showing up and getting in the way anymore. So that has fixed that. The way that we fixed it Is by finding the current page then using that tilde assemble to start searching through the sibling elements that come after it. And find every instance of the class slide-content. So that finds all the pages that come after the currently selected one. And then we set the opacity to zero to hide all of those pages. So now functionally we have everything we want but stylistically it's still doesn't quite look like a flip book. And a big part of that is because we're not giving any impression of three dimensionality in our book, so we need to add in some shadows, and we need to add in a backing behind our book to make it look like there's a cover wrapping the book. So the first thing that we're gonna do is put some shadows over these pages to make it look like there's a bit of a curve here. And to achieve that look we're gonna create some linear gradients that are partially transparent, and we're gonna have them laid over the top of our pages. And we'll do that with, This code. All right so now you can see that we've got a little shadow in between the pages where they meet and coming out to either side of that join in the middle. And we've also got a little bit of darkness on the left and on the right to create the impression that the center part of each page is the highest point on that page receiving the most light. And the way we have created this effect is by finding the first page. This is in the case of the left page, and then using the after pseudo-element. So basically creating a div out of nowhere. And then we are absolutely positioning that page so it fills the whole width of that left page area. And then we're adding in a linear gradient background that has several stops on it that create different levels of opacity in a black color to give us the shadow effect. And then we've done the same thing with the right page just by using the last of type selector instead. And then we have the same type of linear gradient. We just have each one of the stops of that gradient in the reverse order. The next thing we wanna do now is add a cover to the book so backing that's gonna go around our flip book. And we already have an empty div up here at the very start of the slider before any one of our slides. So what we need to do is attach some CSS that will target that element and we'll do that with this code. All right, and there's our cool backing, creating the impression that this flip book has a cover. So, all we've done here is give our backing class some height and width. We've positioned it absolutely so that we can make sure that it's up to the top and left side of our internal pages. We've set its zed index to -1 to make sure it's below everything else. We've set its background color so that it looks like a book cover. And then we've set a box shadow so that it's just a soft shadow all the way around the edges of our cover, giving it an impression of having some depth. So now there's only one more thing that we still need to do and that is to add another shadow here under each side, of this flip book to make it look there's a stack of pages here in this flip book and they have some height that's casting some shadow down below each of these pages. And we're gonna do that by targeting our slider class here that wraps our whole flip book, and we're gonna use the before and after pseudo element. So we're gonna add in, This code here, And now you can see we have this nice soft circular shadow that makes it look like there is bit of hot at this pages. Now the way we have achieved this is by creating a circular shape by using the border radius property, and then applying a box shadow to that circular shape and, setting it to be behind everything in the document. So, I'm just gonna bump this zen index so you can see the circular shape that I'm talking about. So, there you can see this oval shape here. And, we're just showing the very bottom part of it's shadow. So, I just put that zen index back. So we're using the before pseudo element to place the shadow on the left side, and we're gonna use the after pseudo element, To place the shadow on the right side as well. And there we go, so now we have that same circle shape that's partially obscured, creating a shadow that makes it look like our pages have some height. And that's it so that's now our completed flipbook. So we can page through and check out each one of our slides. And every time we do, it's gonna look like we're flipping through our book. All right, so I hope you really enjoyed that project, in the next project, we're gonna do one more variation on a slide up. This time, we're gonna use it as a white experiment with some cool CSS3 border and background effects. We're gonna be playing around with making background images appear inside the borders around a div. And we're also gonna look at how you can make a background image come through your text. So that you can look through each one of your letters and see the background image behind it. So, for that, I'll see you in the next lesson.

Back to the top