Create a Fullscreen Slider with CSS

[MUSIC] 0:00 Hi everybody I'm Dave Conner and this tree house workshop we're going to create 0:04 a full screen horizontal page slider. 0:08 No JavaScript simply using HTML and CSS. 0:10 These sliders have been a popular design pattern for many years and 0:14 their are hundreds of jQuery plugins out there to create them. 0:16 Today, however, we will demonstrate, that HTML and 0:19 CSS are more than capable of handling the task. 0:22 And once we start coding, it may surprise you how little CSS it takes, 0:26 to create some pretty neat effects. 0:29 So let's get started. 0:31 First, let's look at what we will be building. 0:32 We have a full page slider with navigation. 0:35 There are transitions, and fade-ins. 0:38 Pretty much a typical slider. 0:41 In order to create our slider we will be using radio input elements 0:43 along with their check pseudo-class. 0:46 It is this pseudo-class that will allow us to target and style each individual slide. 0:49 Along with any annotations or content we wish to overlay. 0:53 In our index.html, we have a div with the class name of rap. 0:56 And we have a radio input group named slides. 1:01 Notice that we have the first one checked. 1:06 This will be our starter slide. 1:10 The natural behavior of the radio button to only allow for 1:13 one checked element in a group will provide the checked state. 1:15 If we open this up in the browser, 1:19 you can see only one of these radio inputs can be checked at one time. 1:21 If we click on one, the other is unselected. 1:25 So this is the check state and 1:29 this is what the check pseudo-class will target in our CSS. 1:31 But before we get into our styles, let's first build or slides. 1:34 We will be placing one slide in between each radio element. 1:38 Before the first input, we will add a section. 1:46 We will give it a class of slide, and since it is our first slide, 1:52 we will also give it a class of slide-1. 1:55 Inside our section, I'm going to add a headline tag that says Headline One. 2:04 And that's it for our slide. 2:13 Let's copy this, and paste one section between each of our radio elements. 2:15 Then I'll just change the class of the sections to slide-2. 2:37 Slide-3 and slide-4. 2:42 And we will also be changing these headlines up as well. 2:46 This will be headline two, headline three, and headline four. 2:51 Okay, now we have four slides. 3:00 The next thing we wanna do is create our navigation. 3:03 We could use our radio inputs but instead we will create labels for 3:06 each of our radio elements. 3:09 These labels will act as controls for our slider. 3:11 So right above our slides we will create a header. 3:15 Inside this header will be our labels. 3:25 We will use the four attribute, to tie them to their respective radio inputs. 3:28 So we use the idea of the first radio as the value of our first four attribute. 3:33 Which in this case is slide-1-trigger. 3:40 Then I'll just call this Slide One. 3:48 With that done I'm just going to copy and past three more times and 3:51 update each of these four attributes along with the text. 3:54 So, we'll change this to Slide Two, 4:06 Slide Three, and Slide Four. 4:12 So far we have a div that's serving as our wrapper. 4:23 We have a header which contain our navigational elements. 4:26 And finally we have our radio slider section combinations here. 4:31 Now let's go add some styles. 4:35 We have two stylesheets linked in our index.html document. 4:42 The first one is style.css. 4:46 This is just some demo border plate code. 4:48 We will be working in horizontal.css. 4:51 Opening it up. 4:55 We will begin by making sure our html and 4:57 body elements are both 100% in height and width. 4:59 So we'll write html, body. 5:03 And make the height 100%. 5:09 And the width also 100%. 5:13 Then we will remove any padding or margin. 5:17 This is to make sure that our slides will be full screen so we wanna take away any 5:24 padding or margin that the browser will add to either of these elements. 5:28 Now we will style our wrapper which is this class of wrap. 5:35 I'm going to give this a height and width of 100%. 5:41 I'm going to give this a height and width of 100%. 5:52 But this could really be any size you want the slider to be. 5:55 The div with the class of wrap dictates the size of our slides and our images. 5:59 Next we wanna set our div relative And set our overflow to hidden. 6:04 This is so we can position our slides absolutely off screen and 6:15 we won't get any horizontal scroll bars. 6:18 Finally I'm just going to set the background to a dark gray and 6:21 set our text color to white. 6:24 So the headline is centered, we're gonna go ahead set text align to center. 6:33 So, now that our wrapper is done, let's create our header navigation. 6:41 We are going to give the header a background that is slightly lighter grade 6:48 than our wrapper and apply it like box shadow. 6:52 We will position it absolutely to the top-left corner. 7:08 And give it a z-index of 900 so 7:22 that we are sure that's on top of the rest of the content. 7:23 Finally we will set the width to 100%. 7:28 Next lets style our labels. 7:36 We'll set the color to a light gray 7:38 that you can see here. 7:51 We must change the cursor so it looks like a length so we will set that to pointer. 7:53 Next we will display inline-block. 8:02 This way, our labels will be side-by-side and centered in the middle of our header. 8:09 Inline-block also allows for our line height to be respected, 8:14 which we will add now. 8:17 Let's go ahead and 8:19 add a line height of 4.25em. 8:22 This gives us a larger clickable area. 8:27 So, the layout of our label buttons are done. 8:30 Let's go ahead and add our textiles and some pattern. 8:33 First, we'll add font size of .667em. 8:36 Then we'll add font weight of bold. 8:44 And finally, the padding. 8:50 Which we'll just add 0 1em. 8:52 Let's also go ahead and add a slight hover effect. 8:57 For this, we'll just set the background to a lighter shade of grey. 9:09 And with that our navigational buttons are done. 9:17 Let's save this and look at our page. 9:21 As you can see we have our header and our header buttons. 9:26 If we click on slide two the second radio gets selected. 9:30 So our label buttons are performing as expected and looking good. 9:34 Now it is just a matter of styling our slides. 9:38 So going back to horizontal.css, 9:41 we are going to style all the slides as a whole using our slide class. 9:44 Once again we will set width and height to 100%. 9:55 Now we will set each slide's position to absolute and 10:05 we'll give them a top of zero and a left of 100%. 10:07 With these styles, we are pushing all of our slides off to the side of the window. 10:20 Next we will set all known z-index to 10, then some padding. 10:25 For padding I'm gonna have 8em, 1em 0. 10:34 Okay, our base slide styling is done. 10:41 Now we must set our background images for each slide. 10:44 Before we do that, on the slide class, 10:48 I'm going to set the background color the same as the wrapper. 10:50 I'll center the background with background position 50%, 50%. 11:02 Then, I'll set the background size to cover so 11:15 our images fill up the entire slide. 11:17 Next, I'm just going to copy and paste some images here for each slide. 11:26 These tiles give each slide a different background image. 11:31 You can copy this code form the teacher’s notes. 11:34 And with that our slides are done; but they are all currently off screen. 11:37 We want to move them onto the screen only when the right radio element is checked. 11:41 So all that is left to do is to target this text state. 11:47 We are going to use an attribute selector to select any input that has an ID 11:51 that starts with slide. 11:55 Then we will further qualify the selector by adding the pseudo-class of check. 12:00 This will target any of our radio inputs as they all begin with slide. 12:08 Then by using the adjacent sibling combinator which is the plus sign, 12:14 we can finally target our slide. 12:18 When our radio element is checked, we want to position our slide 12:27 back on the left corner of our wrapper, so we will set left to 0. 12:31 Then, we wanna raise the z-index to 100, 12:36 to be sure our slide is on top of the previous one. 12:39 And that's it. 12:45 Let's save that and see what we just did in our browser. 12:46 And there you have it. 12:51 We have a nice header navigation. 12:52 And when we click on our labels we get a new slide image. 12:53 Okay that's pretty cool. 12:59 But the name of the workshop is Full-Screen Slider. 13:01 And this is definitely not sliding. 13:03 For that, we just have to apply some CSS transitions. 13:06 Let's go back, one more time, to horizontal.css. 13:09 To smooth our whole slide or 13:14 transition out, we're going to add a transition to our checked slide. 13:15 So, inside our checked slide selector, 13:19 we are going to transition our left property over .65 seconds. 13:21 With a little easing. 13:26 And this case we'll use ease-out. 13:29 And since we want our current slide to wait until the next one has come onto 13:32 the screen. 13:35 We will go to our slide class and add a transition from the left as well. 13:36 This time we want it to happen immediately so we'll set the duration to 0. 13:43 But we also want to delay it by 0.75 seconds. 13:47 So these transition styles have the new slide coming in and 13:53 afterward our old slides, slides back out. 13:56 And while we're adding transitions, we're not limited to just the slide itself. 13:59 We can also do some slide animations with these headlines that we have in 14:03 each slide. 14:07 I'm going to target our slide H-1, and I'm going to give it an opacity of 0. 14:13 Then I'll translate that dow the Y-axis by adding a transform of translate Y 100%. 14:22 Then I'll give it a transition for transform with a 0.5 second duration and 14:31 a point 0.5 delay. 14:36 We'll add a comma. 14:47 And then we'll transition the opacity over 0.5 seconds. 14:48 This transition will allow us to see the opacity go down to zero, but 14:57 it will delay the transform until the next slide is already covering it. 15:00 Now we will target our headline when our input is in its checked state. 15:05 We will change the opacity back to 1. 15:19 And translate back to 0. 15:23 For this we'll transition both over 0,5 seconds and give them a 0.5 second delay. 15:30 This will have our headline appearing and 15:39 rising as the slide is coming onto the screen. 15:41 So let's save this, and real quick, look how that'll code we have actually written. 15:44 Not that much so lets check that out in the browser. 15:52 And there you go. 16:00 Nice new transitions for our full-screen slider. 16:02 There you have it. 16:10 We've just built a full-screen slider, without the need for 16:11 a single line of JavaScript. 16:14 As front end developers we have a lot of tools at our disposal. 16:15 Exercises like these are a great way to push those tools to the limit and 16:18 see just how much they can do. 16:21 With just a small amount of CSS we're able to create some nice animation effects and 16:23 do to the built in behavior of radio inputs. 16:28 The arrow keys provide the second means of navigation. 16:30 This technique provides a great CSS alternative to a classic JS approach. 16:32 So I hope you have enjoyed this workshop. 16:37 I'm Dave Conner and i'll see you next time, thanks for watching. 16:39