(bright music) Welcome back to Knowledge City's course on Cascading Style Sheets. I'm Cliff Brozo. And in this lesson, we're going to take a look at something called a Splash Screen. Now you might see that the rest of our lesson four is blank. We're gonna get to that in a little bit, but let's take a look at what goes into creating a Splash Screen. In looking at Adam and our development platform, we have a basic HTML document that has the general information up top pointing to a splash.css file, and we have two wrappers, one is called container, one is called content, and those two will handle the way the text appears on the screen. As you can see, all of our text is set to an H2 heading two size, and for each one of these items, I have applied a class, a separate, well, I'm calling them rules for how each line of this text will be displayed, and basically, what we have here is the instructions for how to play the game. We need to give the user some sort of knowledge going in so that they know what to do. So I've got 11 different rules. Well, the last one's not exactly a rule. The last one actually points to the start of the game, and each rule explains a different part of how the game is played. Let's take a look at the CSS and we're going to concentrate on looking at all of the different rule numbers. In our CSS, starting in line 10, you can see that I have my container, which puts a fixed position and sets everything up so that it's in the top left-hand corner. I'm using 100% of the width and height of the screen, and this container goes all the way in the background, and what I'm doing here is I'm creating a radio gradient background, and again, this is allowing me to, instead of having one simple color, I want a little bit of color to come from the middle out toward the edges, and you'll see how that looks, so instead of a plain blue background, we're gonna get a soft white middle and growing outwards and blurring as it goes to the outside. The content portion has the same thing except for the Z index that changes, and what that does is I set it to a very high number, 1,000 should be sufficient, and that ensures that the content that's displayed is going to go on top of whatever is in the container, which is the background. My rules for H2 begin on line 30 and I set the general font size to five times the view width, and I want to make sure that it fills the screen. I center the text. I transform anything to uppercase. I make the color transparent and I create an animation called blur fade in and fade out. That animation is going to be three seconds long, and each of these H2's will have these attributes attached to them, and that's why I created that special container for that. Then I go about setting up each rule individually and I create a different font size for each of the rules, and the reason for the different font sizes, I start off with seven here, drop down to five, that will depend on how much text I'm going to show. The shorter rules will have a larger font, and the more words that are in the rule will have a little bit of a smaller font to make sure that they fit on the screen. The key here is the animation delay, and what I'm trying to accomplish is set up a series of seconds of when these things should appear. So at the very beginning, what happens is rule one begins at zero seconds. There is no animation delay. When this starts out, the first rule actually appears. That rule says this is Knowledge City. That's rule number one. So that will appear on the screen right away. Then it will stay there for five seconds because rule number two has a delay of five seconds so that the user has a chance to read the rules. Now each of these animation delays will have different amount of seconds to wait so that the user has time to read what the rule is, and the more words that are on the rule, the longer the animation is, typically, 10 seconds is long enough, and as you can see, a lot of them are 10 seconds. Rule number three is nine. When we get to rule number nine way down here on line 79, that's 15 seconds, and that's a lot of text, and we want to give the user a chance to read all of the text that's on there. Rule number nine, as it turns out, doesn't appear until a minute 10 into the beginning of this screen, and you can see the delay is 70 seconds. So this is a way to code all of the rules screen-by-screen, but just using one screen using CSS.
