So going back to that tutorial the next step is to begin working on our C-s us.
So we need to create a new C S S file and public style sheets and call it.
That success.
So if we go back here go to our public directory open up stylesheets looks like it's already open and
with a right click Create new file and I'll call this one.
Blanding that's yes.
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
main page.
So back here the first thing we want to do is open learning Danciu says which we've done.
And we want to set the bodies background color to block.
You can choose any color you like.
I just think that it looks nice to fade into the first image from a black background and then begin
the crossfade from there.
So I've pasted in this rule what we've done is selected the body tag and then set the back on color
to hash.
0 0 0 which is the same as black.
So now I need a position of all context and to view all campgrounds one we have is selected with an
ID.
So we're going to go ahead and use the IDs selector and that is Blanding dash header.
And what we've done here is we've taken this text and we've given a z index of 1.
So if you don't know about z index basically the web page can be viewed on a three dimensional plane.
We have X and Y which is left and right up and down and then Z which is forward and backward into space.
So if we give it a z index of 1 It's coming forward towards us.
And that layered on top of any other content that has a z index smaller than one in order for us to
be able to use the z index we have to change the position from something other than static static is
the default position value for all its HTML elements.
And if you use static it'll actually ignore the z index.
Now what we want to do is center that text and the button.
So I just use text align center here and that will get us centered horizontally.
Now in order for us to subtract vertically on the page it is actually a lot of different ways to do
this but I've discovered that the easiest way to do it is just use the view height.
So what we do here is we set padding top to 40 view height.
The reason I don't play at 50 is because that would actually push the content down lower.
And it looks look like it's centered.
So we're going to save this rule go back over here refresh and you can see that the background is black
and the bottom.
Yeah.
Can't text is centered on the page if we want we can refresh here.
See a little bit better.
So right now the Welcome to your camp text is barely visible so we'll change that here in a second.
And it looks like we just take the landing head or Slichter we add an H1 selector to it and we change
the color to 1.
So add that here I'll go and say that refresh the page and now it's a lot easier to see the text.
And when we get the background in there it will be easier to see it as well.
So the next thing we want to do is style the unordered list.
And because you know the list has a class of slide show it's very easy for us to slide it.
So I will take this rule and we'll plug it in here.
So we've selected the honorless with its class and we set the position affixed to within the height
to 100 percent so it'll take up the entire page and then we nudge it up into the top left corner of
the page using top level positions of zero.
And then if you see here we have the z index set to zero.
This will make sure that the background images are behind the other content like are welcome to YOUR
can text in our view or campgrounds.
Set our list style.
And on this war move the bullet points that way.
We're not seeing them from the list items.
And lastly we want to make sure that there's no margin or padding.
So we set those both to zero.
Now we save we go back here and we were fresh.
We can see that the bullet points that were on the left hand side here have disappeared.
Now we actually need to style the individual list items.
So we'll pull this rule right here copy it bring it over Intourist the SS paste it below the unrooted
list and what we have here is the same dots slide shows of the class selector for the honor roll list
and then we're telling it to select each list item inside of the list yet again we set the width and
height to 100 percent.
This time we position it absolute top and left or zero again the background size is set to cover.
And this is what's going to allow the images to take up the entire space of the page.
We also set our back position to 50 percent 50 percent.
And this will center the images perfectly on the page.
Then lastly we set the background happy to no repeat.
This where the image is not repeating vertically or horizontally.
We set our opacity to zero because we want our images to start faded out and then we'll use the animation
that we're going to create here a little bit to slowly fade them into an opacity of one.
We set our z index to zero yet again this will make sure that the background images are placed behind
the text and the button.
The last property we have here is called animation and this is something we haven't seen before.
So this is going to allow us to actually fade images in and out.
So the name of the animation is image animation and this is arbitrary you can call it whatever you want
as long as it matches up with animation that we're going to create here in minute and then we tell the
animation to last for 50 seconds.
We make sure it's linear and what linear means is it's just showing the animation to be the same speed
from beginning to end.
And lastly we tell the animation to loop infinitely.
That way our slide show never ends.
So we can say this but if we preview it nothing's going to show yet because we don't have the animation
set up.
We also don't have any images set to the individual list items.
So let's go ahead and do that now.
So we're going to copy all of the slideshow list item into child selectors and this is what's going
to add the background images to the actual list items.
So now and we can see that there are five list items starting with child one going all the way through
five.
We give each one a background image your role and if you want you can link to these locals or you can
put the images inside of your public directory inside of an images directory.
I've gone ahead and just upload them using image or this is a free uploading service on the web.
It's not really intended for hosting images to use on your Web site but it's a quick fix on hand used
it.
The animation for the first background image is going to begin immediately.
So we don't have to give it an animation delay.
We want each image to fade in after 10 seconds of the previous image.
So I set the next image animation delay to 10 seconds and then we increment by 10 for every image thereafter.
So 20 seconds for the third 30 for the fourth and 40 for the fifth which will carry us all the way up
to 50 seconds and then start back again at Image number one.
So again we can go ahead and say the landing at CSSA file but we're not going to see anything yet because
all the pieces are set to zero and we don't have the animation set up to fade them into one.
So go ahead and do that now.
So I'm going to copy the keyframes image animation rule from the tutorial and paste it in here.
So what we're doing is taking the at frame selector and giving the animation the name of image animation.
And this matches up with the earlier value that we had for the animation property on our slide show
was slide rule.
So we have that in place what we'll do is indicate what we want to have happen at various keyframes
within the animation.
So the animation goes from zero percent all the way to 100 percent but we're only concerned with zero
through 30 percent.
So what happens here is we start our animation at zero for the opacity and then all the way up through
10 percent.
We let it fade into space.
When we leave the opacity at one all the way through 20 percent and then we find it back out to zero
at 30 percent.
You also notice that we have the property animation timing function set to ease in from 0 to 10 and
then also it tends to ease out.
So this gives us a more smooth transition as we Faden from 0 to 1.
So you may be wondering where we came up with these percentages.
So I went ahead and created a graph of the animation to help you better visualize what's happening here.
So basically we have an image that will animate from zero seconds to 10 seconds and then the second
image will go from 10 to 20.
The third from 20 to 30 and then 30 to 40 and then 40 to 50 making up five images at 10 seconds apiece.
So from zero seconds to 10 seconds we have a five second Faden and then we have the image staying faded
in at the opacity of one and then from 10 seconds to 15 seconds we fade out into the next image.
So this can be represented by Blue which is fade in red which is sollen and then fade out which is orange.
So the first image goes from 0 percent to 10 percent and that's fading in from zero seconds to five
seconds and it stays solid from 10 percent to 20 percent.
So you see we have 10 percent to 20 percent of pasty one pasty one.
And then from 20 percent to 30 percent it's actually fading from one back out to zero.
And as that's happening the next image who's animation has already begun at 10 seconds is going to be
at zero to one from 10 to 15.
And that will overlap here creating this crossfade effect.
So this stays solid for five seconds and then we have another overlap as it fades out and the next image
fades in and the same pattern repeats itself until we get to 50 seconds which is the end of our animation.
This image is solid.
And then we go all the way back to the beginning where the original image gets faded in as the fifth
image gets faded out and then starts all over again and loops infinitely.
So let's go ahead and save our US and open up the web cam.
Make sure your servers running and refresh and we can see the animation live.
So this image is visible for five seconds and now it's going to fade out as the next image fades in.
So that's a five second transition.
We get five more seconds of this photo and then it'll fade out into the next one.
So the last thing you want to do is make sure that our background slider works on all browsers.
So the back to the tutorial here and at the very bottom I have this rule here or copy it.
Bring it back into your success.
Paste it at the bottom and you see I've got this comma it says older browsers support the no CSSA animations
Klowns was added by moderniser and we already had the modernisers CD and right here if you want to know
how I found that I just looked up modernizer CDR and I picked the first one.
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
script to a sync which makes it so that this javascript blows simultaneously along with the other assets
on the page.
So if we go back to the CSSA we can see that they just have the capacity set to 1.
So what will happen here is that browsers that do not support systems integration will just have one
slide visible and that would be the background for that image.
So that's it for full screen background image slider.
If you have any questions just like now and I'll see the next video.
Thanks.