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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.9 Pure CSS3 “PowerPoint”-Like Presentation

Hi, and welcome back to 10CSS3, branding and presentation projects. Now what would a course on presentation be without making an actual presentation? In this project, you're gonna be creating a pure CSS presentation of the style that you would make in a program like PowerPoint. We've got all the HTML that you need for this one already in place. So go down to the related link section below this video and find the link to the base pen, and then fork that base pen into your CodePen account. All right now each one of our slides is wrapped in a div that has the class slide. It also has a unique ID, which we'll be able to tag it a little later, but to get started, put some basic sizing in on those slides. We want each one to take up 100% height and width. And we also want a standard background color and text color. So, we'll apply to the body tag a radial gradient to give us a lighter glow in the center here and to give us white text. Nested inside our slide class divs, we also have a div with the class content. And that's where you're going to put the text or the image that you want to have display inside your slide. So we're going to style that class now. It looks like a bit of a jumble right at the moment, and that's because what we've just done is taken all of our slides and just stacked them right on top of each other in exactly the same position. So they're all 100% width and height and they're all absolutely positioned in the same location. But what we're gonna do now is set all of our content divs to opacity zero, to hide them all, and then we're gonna target just the first slide with the id of one, and set it to our opacity one. So now all the slides are hidden except for the first slide. All right, now we're going to add a little extra code to our content class to take care of some alignment and font sizing. All right, so we've pumped up the font size and we're using 2.2 VW. So VW are those viewpoint relative units. So the font size of our slides is gonna change with the width of the view port. So if it's bigger, the font size gets bigger. And if it's smaller, the font size gets smaller. And that way we can make sure that the text of our slides always fits. We've also set display to flex, because that's gonna give us a pretty straightforward way of both vertically and horizontally centering anything that goes inside these slides. So we've set flex direction column so that any child elements in a slide sit one on top of the other, and then we've set align items to center and justify content to center, and that's what's giving us both our vertical and horizontal alignment. And then finally, we've set animation film mode both. We're gonna be using animations to transition from one slide to the next, and animation film mode makes sure that wherever an animation is applied, its starting state is gonna affect that element before the animation runs, and its ending state is going to persist on that element after the animation finishes. For example, we're going to add in the default animation for transitioning from one slide to the next, fade in. So whereever we have applied this fade in animation, before it runs the opacity of the element it's applied to is gonna be zero. And then after it's finished running, it's gonna keep an opacity of one. Now let's get our navigation icons going. Inside each slide, you'll find a div with the class navigation. Inside that, you'll find two links. You'll find one with class of prev and another with a class of next. The links on each one are different, so this first set of navigation here, the next link links to the ID two, which is the id for the next slide. Because there's no slide before this one, we don't have any href property on this first link, but we do have the class disabled. So as you're adding in slides, make sure that you have the right IDs in the href attributes for the next n previous links, or if there are no next or previous slides, make sure you instead use the class disabled. Okay, let's make those navigation links visible by adding some icons to them. We are just using codes here for a couple of fonts or some icons. So now you can see we've got a little left arrow and a little right arrow. Now we will color and position those icons and we will also color the disabled class. So now, this is our icons down here. At the moment, all of the icons for all of the slides have the same positioning and are stacked right on top of each other. So what we want to do is hide all the icons, except the ones for the current slide. We'll do that with this code. So we're hiding all the navigation items, except for the one in the currently active class, which is the one with the id one. Now to make these navigation buttons work, they have to do two things. First, they have to hide all the slides and all the navigation buttons because there's no way to tell with CSS which one will currently be showing, so we're just gonna hide them all. Then, we're going to target the one slide that should be visible and the one set of navigation buttons that should be visible and turn them back on again. This code is gonna handle hiding all the navigation buttons and slide content. Now we're making these work using the same technique that we did in the last project with our horizontal picture book. We've got a bunch of empty divs up top here, each with the class slide switch. And every time one of our links targets the ID of a slide, it's also targeting the ID of one of these slide switches. So if you haven't yet done that last project, you really should go back and do that now before you go on with this because I won't go through how that operates in this video, cuz we covered that in the last one. So with this first piece of code, when any of those slide switches is targeted, we are gonna hide all of the navigation items. So we're setting that display to none. And with this lot of code, whenever a slide switch is targeted, no matter which one, we're having it reach out to every one of our slides. So we have all of those slide IDs in here and find their content, class DIVS and set their opacity to zero. And then we're going to have one slide picked out and then turned back on again and one matching set of navigation buttons, also turned back on again. So if the targeted ID is one, then we find the slide with the ID one, and we find its navigation, and we set that display back to block. And then same thing again here. If the targeted ID is one, then we find the slide with the ID one, we find its content div, and in this case we run the fade in animation that we created just a little earlier. So now, when we hit our navigation buttons, we get a nice fading effect from one slide to the next. The cool thing about building a presentation this way is that anything you could do on a regular website, you can do inside your slides to style their appearance. So I'm gonna put in a whole other CSS all at once to style all five of our current slides to give you an idea of what kind of things you can do. All right, with that first slide we've given a darker blue background behind it with some fat blue edges on the left and right side just to make that a little bit more interesting. With our second slide, we've set a background image of this cute little fox. We've set background size to cover, so that it will always cover the entire size of this slide. Then we've changed the alignment of our flex box items. We've changed our line items to flex start, so that instead of being centered, they're off here on the left side. And then we've also given a different background color to our text here so that it can be seen over the top of our background image. In the third frame, we're using an animated GIF, and we've applied the class stretch to our GIF and then we've set its width to auto and its height to 100%. So that has stretched our image up to fill the entire height of the frame. And then we've also been able to change the background color on the fly, in this case to white, to match the background of our GIF. In our fourth frame, we've used a big circle behind our text and we've done that by putting a pseudo element against our content class div. Then in the fifth slide, we've used our logo that you'll recognize from a previous project. So we've added that as in line SVG, and we've used the same code that we did in that first project, and in a little bit, we're gonna animate that as well. Now we're going to add in some extra animations to create alternative slide transitions. So we've added in three, we've added in a flip transition, a slide from left transition and a grow transition. And you'll be familiar with these also from the motion topography project that we created. And we're using basically the same processes now, but we're applying them to our slides instead, and we're gonna set these up to work when an extra class is added to our content divs. So, in our first content div, we don't have any extra class added, so that's just gonna run the normal fade in default transition. But in our second slide, we have the class flip added. In our third slide, we have the class slide from left, added. And in our fourth slide, we have the class, grow, added. Now, we'll enable those alternate transitions with this CSS. So we're using almost exactly the same targeting code again, but this time we're looking for the classes that might have been added to that content div. So, when we find the class slide from left, then we set the animation name to be slide from left, and we also include the important flag so that it overwrites the animation name fade in that's already there by default. And we've done the same thing for if the flip class is found, we run the flip animation. And note here, this is a 3D animation which is flipping our content over 180 degrees, so we set backface visibility to hidden so that you can't see that content when it's facing the wrong direction. And then when we find the class grow, we run the animation grow. All right, now let's see all of those working. This is our flip transition, this is our slide transition, and this is our grow transition. Now, I mentioned earlier that we were also going to animate the logo that we have in the last slide. Not only can you animate the transitions, you can also animate anything that's inside any of your slides. So, we're just gonna drop in the exact same animations that we wrote when we were putting together our animated SVG logo project. So we have our back triangles animation, front triangles and letter a animation. And now, we can use the same select structure again to target this fifth slide. So we've identified that the fifth slide is being targeted, we've found that fifth slide, and then we've found the SVG element with the appropriate ID, a nd then we're calling each one of those animations that you'll remember from that earlier project. So now when we go through to the fifth slide, We have our animated logo. So now you're all done. You've got five different slide with a bunch of different types of transitions, and all different types of content and formatting, and not a single line of JavaScript in sight. So when you finished your PowerPoint Style Presentation Pen we would love to see what you've come up with, especially if you've put together some of your transitions or some of your own differently styled slides. So please Tweet your pens through to us at #10CSS3projects. In the next and final project for the course, we're gonna be creating a sprite animation and an infinite looping SVG background. I'll see you in the next project.

Back to the top