1 00:00:04,260 --> 00:00:08,990 So going back to that tutorial the next step is to begin working on our C-s us. 2 00:00:09,150 --> 00:00:13,420 So we need to create a new C S S file and public style sheets and call it. 3 00:00:13,590 --> 00:00:15,280 That success. 4 00:00:15,510 --> 00:00:20,860 So if we go back here go to our public directory open up stylesheets looks like it's already open and 5 00:00:20,940 --> 00:00:24,930 with a right click Create new file and I'll call this one. 6 00:00:24,930 --> 00:00:26,350 Blanding that's yes. 7 00:00:27,430 --> 00:00:32,120 Now if I open it up it's blank and it's ready to be filled in with all the rules that will style our 8 00:00:32,130 --> 00:00:35,530 main page. 9 00:00:36,150 --> 00:00:41,450 So back here the first thing we want to do is open learning Danciu says which we've done. 10 00:00:41,590 --> 00:00:44,750 And we want to set the bodies background color to block. 11 00:00:44,800 --> 00:00:46,120 You can choose any color you like. 12 00:00:46,120 --> 00:00:50,860 I just think that it looks nice to fade into the first image from a black background and then begin 13 00:00:50,860 --> 00:00:51,980 the crossfade from there. 14 00:00:55,530 --> 00:01:00,300 So I've pasted in this rule what we've done is selected the body tag and then set the back on color 15 00:01:00,300 --> 00:01:01,230 to hash. 16 00:01:01,270 --> 00:01:07,530 0 0 0 which is the same as black. 17 00:01:07,610 --> 00:01:13,010 So now I need a position of all context and to view all campgrounds one we have is selected with an 18 00:01:13,010 --> 00:01:13,720 ID. 19 00:01:13,760 --> 00:01:19,290 So we're going to go ahead and use the IDs selector and that is Blanding dash header. 20 00:01:19,870 --> 00:01:24,630 And what we've done here is we've taken this text and we've given a z index of 1. 21 00:01:24,640 --> 00:01:29,700 So if you don't know about z index basically the web page can be viewed on a three dimensional plane. 22 00:01:29,860 --> 00:01:36,310 We have X and Y which is left and right up and down and then Z which is forward and backward into space. 23 00:01:36,310 --> 00:01:40,120 So if we give it a z index of 1 It's coming forward towards us. 24 00:01:40,240 --> 00:01:45,860 And that layered on top of any other content that has a z index smaller than one in order for us to 25 00:01:45,860 --> 00:01:50,980 be able to use the z index we have to change the position from something other than static static is 26 00:01:50,980 --> 00:01:54,380 the default position value for all its HTML elements. 27 00:01:54,580 --> 00:01:58,300 And if you use static it'll actually ignore the z index. 28 00:01:58,300 --> 00:02:01,080 Now what we want to do is center that text and the button. 29 00:02:01,090 --> 00:02:05,440 So I just use text align center here and that will get us centered horizontally. 30 00:02:05,470 --> 00:02:09,730 Now in order for us to subtract vertically on the page it is actually a lot of different ways to do 31 00:02:09,730 --> 00:02:15,880 this but I've discovered that the easiest way to do it is just use the view height. 32 00:02:15,910 --> 00:02:19,920 So what we do here is we set padding top to 40 view height. 33 00:02:20,230 --> 00:02:24,690 The reason I don't play at 50 is because that would actually push the content down lower. 34 00:02:24,700 --> 00:02:26,490 And it looks look like it's centered. 35 00:02:27,010 --> 00:02:33,380 So we're going to save this rule go back over here refresh and you can see that the background is black 36 00:02:33,930 --> 00:02:35,220 and the bottom. 37 00:02:35,290 --> 00:02:35,560 Yeah. 38 00:02:35,580 --> 00:02:40,020 Can't text is centered on the page if we want we can refresh here. 39 00:02:40,150 --> 00:02:42,710 See a little bit better. 40 00:02:42,720 --> 00:02:47,630 So right now the Welcome to your camp text is barely visible so we'll change that here in a second. 41 00:02:49,800 --> 00:02:57,030 And it looks like we just take the landing head or Slichter we add an H1 selector to it and we change 42 00:02:57,030 --> 00:02:58,960 the color to 1. 43 00:02:59,700 --> 00:03:07,200 So add that here I'll go and say that refresh the page and now it's a lot easier to see the text. 44 00:03:07,270 --> 00:03:11,170 And when we get the background in there it will be easier to see it as well. 45 00:03:13,730 --> 00:03:17,080 So the next thing we want to do is style the unordered list. 46 00:03:17,360 --> 00:03:21,370 And because you know the list has a class of slide show it's very easy for us to slide it. 47 00:03:21,650 --> 00:03:25,040 So I will take this rule and we'll plug it in here. 48 00:03:25,580 --> 00:03:32,330 So we've selected the honorless with its class and we set the position affixed to within the height 49 00:03:32,390 --> 00:03:38,060 to 100 percent so it'll take up the entire page and then we nudge it up into the top left corner of 50 00:03:38,060 --> 00:03:41,360 the page using top level positions of zero. 51 00:03:41,690 --> 00:03:44,890 And then if you see here we have the z index set to zero. 52 00:03:45,000 --> 00:03:49,940 This will make sure that the background images are behind the other content like are welcome to YOUR 53 00:03:49,970 --> 00:03:52,130 can text in our view or campgrounds. 54 00:03:53,910 --> 00:03:55,070 Set our list style. 55 00:03:55,080 --> 00:03:58,240 And on this war move the bullet points that way. 56 00:03:58,240 --> 00:04:00,340 We're not seeing them from the list items. 57 00:04:00,340 --> 00:04:03,170 And lastly we want to make sure that there's no margin or padding. 58 00:04:03,340 --> 00:04:05,180 So we set those both to zero. 59 00:04:05,620 --> 00:04:08,530 Now we save we go back here and we were fresh. 60 00:04:08,770 --> 00:04:12,480 We can see that the bullet points that were on the left hand side here have disappeared. 61 00:04:16,660 --> 00:04:19,670 Now we actually need to style the individual list items. 62 00:04:19,780 --> 00:04:26,460 So we'll pull this rule right here copy it bring it over Intourist the SS paste it below the unrooted 63 00:04:26,470 --> 00:04:32,670 list and what we have here is the same dots slide shows of the class selector for the honor roll list 64 00:04:33,040 --> 00:04:38,950 and then we're telling it to select each list item inside of the list yet again we set the width and 65 00:04:38,950 --> 00:04:40,570 height to 100 percent. 66 00:04:40,600 --> 00:04:47,470 This time we position it absolute top and left or zero again the background size is set to cover. 67 00:04:47,470 --> 00:04:53,100 And this is what's going to allow the images to take up the entire space of the page. 68 00:04:53,110 --> 00:04:56,240 We also set our back position to 50 percent 50 percent. 69 00:04:56,430 --> 00:04:59,660 And this will center the images perfectly on the page. 70 00:04:59,660 --> 00:05:02,720 Then lastly we set the background happy to no repeat. 71 00:05:03,010 --> 00:05:06,870 This where the image is not repeating vertically or horizontally. 72 00:05:07,060 --> 00:05:13,330 We set our opacity to zero because we want our images to start faded out and then we'll use the animation 73 00:05:13,330 --> 00:05:17,650 that we're going to create here a little bit to slowly fade them into an opacity of one. 74 00:05:17,770 --> 00:05:22,930 We set our z index to zero yet again this will make sure that the background images are placed behind 75 00:05:23,020 --> 00:05:24,790 the text and the button. 76 00:05:25,150 --> 00:05:29,540 The last property we have here is called animation and this is something we haven't seen before. 77 00:05:29,590 --> 00:05:33,430 So this is going to allow us to actually fade images in and out. 78 00:05:33,490 --> 00:05:38,920 So the name of the animation is image animation and this is arbitrary you can call it whatever you want 79 00:05:38,920 --> 00:05:44,430 as long as it matches up with animation that we're going to create here in minute and then we tell the 80 00:05:44,430 --> 00:05:46,950 animation to last for 50 seconds. 81 00:05:47,130 --> 00:05:51,780 We make sure it's linear and what linear means is it's just showing the animation to be the same speed 82 00:05:51,780 --> 00:05:54,120 from beginning to end. 83 00:05:54,150 --> 00:05:57,370 And lastly we tell the animation to loop infinitely. 84 00:05:57,480 --> 00:05:59,410 That way our slide show never ends. 85 00:06:01,160 --> 00:06:05,810 So we can say this but if we preview it nothing's going to show yet because we don't have the animation 86 00:06:05,810 --> 00:06:06,430 set up. 87 00:06:06,530 --> 00:06:10,130 We also don't have any images set to the individual list items. 88 00:06:10,130 --> 00:06:11,580 So let's go ahead and do that now. 89 00:06:15,890 --> 00:06:20,900 So we're going to copy all of the slideshow list item into child selectors and this is what's going 90 00:06:20,900 --> 00:06:24,390 to add the background images to the actual list items. 91 00:06:30,790 --> 00:06:37,690 So now and we can see that there are five list items starting with child one going all the way through 92 00:06:37,690 --> 00:06:38,470 five. 93 00:06:38,520 --> 00:06:44,050 We give each one a background image your role and if you want you can link to these locals or you can 94 00:06:44,050 --> 00:06:48,030 put the images inside of your public directory inside of an images directory. 95 00:06:48,070 --> 00:06:53,020 I've gone ahead and just upload them using image or this is a free uploading service on the web. 96 00:06:53,200 --> 00:06:58,780 It's not really intended for hosting images to use on your Web site but it's a quick fix on hand used 97 00:06:58,780 --> 00:06:59,390 it. 98 00:06:59,770 --> 00:07:02,740 The animation for the first background image is going to begin immediately. 99 00:07:02,830 --> 00:07:05,030 So we don't have to give it an animation delay. 100 00:07:05,110 --> 00:07:09,570 We want each image to fade in after 10 seconds of the previous image. 101 00:07:09,580 --> 00:07:15,290 So I set the next image animation delay to 10 seconds and then we increment by 10 for every image thereafter. 102 00:07:15,430 --> 00:07:20,590 So 20 seconds for the third 30 for the fourth and 40 for the fifth which will carry us all the way up 103 00:07:20,590 --> 00:07:24,320 to 50 seconds and then start back again at Image number one. 104 00:07:25,150 --> 00:07:30,460 So again we can go ahead and say the landing at CSSA file but we're not going to see anything yet because 105 00:07:30,460 --> 00:07:35,600 all the pieces are set to zero and we don't have the animation set up to fade them into one. 106 00:07:35,620 --> 00:07:41,330 So go ahead and do that now. 107 00:07:41,420 --> 00:07:48,400 So I'm going to copy the keyframes image animation rule from the tutorial and paste it in here. 108 00:07:54,240 --> 00:08:01,590 So what we're doing is taking the at frame selector and giving the animation the name of image animation. 109 00:08:01,590 --> 00:08:07,490 And this matches up with the earlier value that we had for the animation property on our slide show 110 00:08:07,500 --> 00:08:09,900 was slide rule. 111 00:08:09,900 --> 00:08:16,150 So we have that in place what we'll do is indicate what we want to have happen at various keyframes 112 00:08:16,200 --> 00:08:17,700 within the animation. 113 00:08:17,820 --> 00:08:23,520 So the animation goes from zero percent all the way to 100 percent but we're only concerned with zero 114 00:08:23,520 --> 00:08:24,800 through 30 percent. 115 00:08:25,110 --> 00:08:31,230 So what happens here is we start our animation at zero for the opacity and then all the way up through 116 00:08:31,230 --> 00:08:32,220 10 percent. 117 00:08:32,370 --> 00:08:34,260 We let it fade into space. 118 00:08:34,290 --> 00:08:41,580 When we leave the opacity at one all the way through 20 percent and then we find it back out to zero 119 00:08:41,580 --> 00:08:43,110 at 30 percent. 120 00:08:43,110 --> 00:08:50,040 You also notice that we have the property animation timing function set to ease in from 0 to 10 and 121 00:08:50,040 --> 00:08:53,100 then also it tends to ease out. 122 00:08:53,160 --> 00:08:58,030 So this gives us a more smooth transition as we Faden from 0 to 1. 123 00:08:58,920 --> 00:09:02,200 So you may be wondering where we came up with these percentages. 124 00:09:02,400 --> 00:09:08,840 So I went ahead and created a graph of the animation to help you better visualize what's happening here. 125 00:09:09,840 --> 00:09:16,020 So basically we have an image that will animate from zero seconds to 10 seconds and then the second 126 00:09:16,020 --> 00:09:17,880 image will go from 10 to 20. 127 00:09:17,880 --> 00:09:25,510 The third from 20 to 30 and then 30 to 40 and then 40 to 50 making up five images at 10 seconds apiece. 128 00:09:25,740 --> 00:09:32,340 So from zero seconds to 10 seconds we have a five second Faden and then we have the image staying faded 129 00:09:32,340 --> 00:09:40,000 in at the opacity of one and then from 10 seconds to 15 seconds we fade out into the next image. 130 00:09:40,260 --> 00:09:47,330 So this can be represented by Blue which is fade in red which is sollen and then fade out which is orange. 131 00:09:47,700 --> 00:09:54,810 So the first image goes from 0 percent to 10 percent and that's fading in from zero seconds to five 132 00:09:54,810 --> 00:09:59,250 seconds and it stays solid from 10 percent to 20 percent. 133 00:09:59,250 --> 00:10:03,330 So you see we have 10 percent to 20 percent of pasty one pasty one. 134 00:10:03,570 --> 00:10:08,920 And then from 20 percent to 30 percent it's actually fading from one back out to zero. 135 00:10:09,270 --> 00:10:16,200 And as that's happening the next image who's animation has already begun at 10 seconds is going to be 136 00:10:16,290 --> 00:10:18,870 at zero to one from 10 to 15. 137 00:10:18,870 --> 00:10:22,070 And that will overlap here creating this crossfade effect. 138 00:10:22,290 --> 00:10:27,510 So this stays solid for five seconds and then we have another overlap as it fades out and the next image 139 00:10:27,510 --> 00:10:34,990 fades in and the same pattern repeats itself until we get to 50 seconds which is the end of our animation. 140 00:10:35,040 --> 00:10:36,630 This image is solid. 141 00:10:36,840 --> 00:10:42,200 And then we go all the way back to the beginning where the original image gets faded in as the fifth 142 00:10:42,210 --> 00:10:47,300 image gets faded out and then starts all over again and loops infinitely. 143 00:10:47,340 --> 00:10:51,910 So let's go ahead and save our US and open up the web cam. 144 00:10:52,020 --> 00:10:56,380 Make sure your servers running and refresh and we can see the animation live. 145 00:11:02,590 --> 00:11:07,530 So this image is visible for five seconds and now it's going to fade out as the next image fades in. 146 00:11:07,630 --> 00:11:09,450 So that's a five second transition. 147 00:11:09,550 --> 00:11:13,870 We get five more seconds of this photo and then it'll fade out into the next one. 148 00:11:16,550 --> 00:11:22,070 So the last thing you want to do is make sure that our background slider works on all browsers. 149 00:11:22,190 --> 00:11:29,420 So the back to the tutorial here and at the very bottom I have this rule here or copy it. 150 00:11:29,420 --> 00:11:31,380 Bring it back into your success. 151 00:11:31,440 --> 00:11:38,540 Paste it at the bottom and you see I've got this comma it says older browsers support the no CSSA animations 152 00:11:38,540 --> 00:11:45,680 Klowns was added by moderniser and we already had the modernisers CD and right here if you want to know 153 00:11:45,680 --> 00:11:54,600 how I found that I just looked up modernizer CDR and I picked the first one. 154 00:11:55,760 --> 00:12:02,420 So I just end up copying the file version and then I add it to a script tag in the head and I set the 155 00:12:02,420 --> 00:12:08,270 script to a sync which makes it so that this javascript blows simultaneously along with the other assets 156 00:12:08,270 --> 00:12:10,510 on the page. 157 00:12:11,420 --> 00:12:16,330 So if we go back to the CSSA we can see that they just have the capacity set to 1. 158 00:12:16,340 --> 00:12:21,500 So what will happen here is that browsers that do not support systems integration will just have one 159 00:12:21,500 --> 00:12:25,250 slide visible and that would be the background for that image. 160 00:12:27,070 --> 00:12:30,390 So that's it for full screen background image slider. 161 00:12:30,550 --> 00:12:33,640 If you have any questions just like now and I'll see the next video. 162 00:12:33,640 --> 00:12:34,000 Thanks.