Adding dimensions to text - jQuery Tutorial

Our first step in creating our masthead text, is to define the initial dimensions for each of the letters. Now, to do that, we're going to use some of the very common box model properties that you're probably quite familiar with using. So, here I have the speed.htm file open from the 03_02 directory. One of the things that I'd like to point out to you, if I scroll down, you can see. That all we have is a paragraph on the page, with the class of hotrod applied to it. And if we go up to the head of our document, we could see that again, we're using lettering, so there's our function. It's targeting hotrod, and applying the lettering function to that. So that's going to encase each letter in a span tag. Now, in this case, because each letter can look the same, they don't have to change, we don't necessarily need to write a selector for. Every single character we can just use this selector right here, which is targeting any span found inside of a class of hot rod. So there's some initial styling going on right now if I look at this in the browser, I can see that the word hot rod is sized appropriately. It's white which is what we wanted and it's also using the font we wanted as well. So, now we need to add some additional dimensions to it. Okay, the first thing I'm going to do is I'm just going to go down here to the end and I'm going to change the display property and I'm going to change that to inline block. Now, the reason that I want to do that is because we want to use things like margins and padding and borders and things like that. And we, we, so we need to use those block model properties, but if I change display to block, then, each of the characters would stack one on top of each other and not still display inline, as you're, you're seeing here. So, I've seen a lot of people do it the other way. They'll do display block and then they'll use floats to bring them back inline, that sort of thing. It doesn't really matter which one you use. I really like using inline block, when I know, you know? It's just going to be a single line of text. I'm not really having to worry about how it's interacting with anything else. I'm a big fan of inline block. Okay. So the next thing we're going to do is we're going to give it a background colour. So we're going to give each letter a background colour. So I'm going to do background-colour. And the colour I'm going to use is pound F00, which is, a bright red colour. So I'm going to save that. And you can see that each of the letters is now getting that red colour. Now, because the letters are not spaced apart from each other it just looks a solid block right now but each, it's actually happening to each individual span tag. All right, below that we just need to add some additional dimensions here, so I'm going to give each letter a width. And I'm gong to define the width as 120 pixels. So here I'm defining a fixed width to it, not relative. I'm also going to give it a height. Each one of them a height. The height is going to be 150 pixels for each one of them. So again we've got a width of 120 pixels, a height of 150 pixels. If I save that and test it. Now I know it looks like it spaced the letters out a little bit but it hasn't. Its just made them all a little bit wider, so they're occupying more space on the screen and each individual span is a little wider as well. We'll have to use margins to space them apart from each other if we want to do that. Okay. So the next thing we're going to do is we're going to apply a border radius to this. So I'm going to go down to the next line. I'm going to type in border radius. And we're just going to use a border radius of 10 pixels. So this is going to be 10 pixels all the way around, I'm not targeting any individual corners of this. It's just going to round the corners all the way around this. And, I don't know if you remember from the masthead, the finished version, I showed you later, but. There was a lot more space above the letters than there were sort of below it so give it sort of badge look to each one of them. And to do that, I'm just going to do a little bit of padding on the top. So padding top of 40 pixels. So saving this and then going back over. Okay. So we can start to see the rounded corners. they're all still sort of touching each other which is fine, but when you see the rounded corners, we also see that we have a lot more space above the letters than we do below it which is exactly what we're looking for. And then, finally we need to space them a apart from each other. And to do that, just going to do a little bit of margin to the right. So margin-right. And I'm just going to do a margin-right of 20 pixels. So if I save that. And preview, in there is the spacing that we're looking for, so now each of the individual letters has its own display characteristics, its own dimensionality. You've got, defined width, defined heights they've got a little bit of padding to the top to give that little bit of extra spacing, the border radius is round in the corners, and making those look little bit more like badge-like. Kind of like all individual hood ornament or badges or something like that. But we've gotten the look. I guess what I'm trying to say is we've gotten the look that we wanted to. So next, we need to make our text look a little bit more dramatic. And start to simulate sort of directional lighting and we do that through the use of gradients.