]Master Class Fluid Grids] [CSS: Part 3]

We're done with the first 2 columns, but now, it's time to move on to the third one.

This last column will contain our call to action button and

our testimonial quotes about the app.

So let's go ahead and switch back to TextMate and continue.

We're going to go ahead and create a new comment flag so that we can

sort of start a new section here, and we'll make some room to work, and we're going to call

this section "Call to Action" because we have quite a bit of styling that we want to go ahead

and apply to our call to action button because we're going to create a button out of css 3.

So we're going to go ahead and select it.

It's in the miscellaneous column and remember, the div is named call to action,

and this button is actually just going to be a link, but there's a lot of things we need to

do to go ahead and style this.

First, we're going to go ahead and start out with the color.

We want this to be white because it's going to be

set against sort of a darker colored background.

We'll set the font weight to bold.

We'll set the text decoration to none.

We'll set the display to block because links are of course in line by default.

We'll set the margin to 100% on the top, auto on the left and right and 30 pixels

on the bottom just to sort of space it out.

We want the text inside of our button to be aligned center, and we'll put some

padding around the text so the text isn't actually touching the borders of the button.

We'll set the font size manually using 1.7 ems, and we'll scroll down a bit here.

We'll set a border radius using webkit border radius, and

we want a nice big border radius of 30 pixels.

We'll go ahead and copy that and paste it in and do the same for Mozilla,

and then finally, we want just the default without any sort of vendor prefix,

and then we're going to set a box shadow on this, so we'll say -webkit-box-shadow.

We want the x offset to be zero,

the y offset to be one, and the blur radius to be one, and we do want this to be an actual

shadow so we'll set it to black.

We'll go ahead and copy that and change the vendor prefix for Mozilla, and then

we'll paste it in one more time and remove the vendor prefix entirely.

And now, we're going to repeat this pattern one more time for the text shadow.

So we'll go ahead and say -webkit-text-shadow, and we want to sort of create an

indented text effect, or make the text look like it's pressed into the button.

So we'll set the x offset to zero pixels, the y offset to negative one pixels so that the

so that the shadow actually appears above the text.

We'll set the blur radius to one pixel just to sort of make it blend into the button,

and then we'll go ahead and set the shadow color to black.

Now remember, our text color is white here, so we're putting a black shadow just above

the text, and again, that will make the text look like it's pressed into the button because

the black shadow will actually look like an inner shadow.

So we'll go ahead and copy this and change the vendor prefix to Mozilla, and then we'll

paste it in one more time and remove the vendor prefix entirely.

So let's go ahead and save that out, and we'll switch over to Google Chrome and

refresh the page, and we want to watch this "start taking notes button"

so we'll refresh, and now we have a pretty good looking button,

but we still need to apply a background color.

Now to do that we're going to apply a gradient.

So let's go ahead and switch over to TextMate and first, we'll go ahead and do the

Mozilla styling, and we're going to actually put a noise png on top of our gradient.

Applying just a little bit of noise will give our gradient some variation and

remove any artifacts from color banding.

So we'll go ahead and set the url for that.

We'll jump outside of our css directory, go into the images directory, and the image we want

is called "noise.png."

We're going to be using multiple backgrounds here, so we want to put a comma there, and

our next background is going to be "Mozilla linear gradient",

and we want to set that to top, and I have a very specific green color picked out

from our Photoshop document, so I'll just go ahead and type that in.

It's "46D06C" and we'll set that to 0% so that will start from the top, and then I have sort of a

darker green color and that will work us down to the bottom.

So we'll set that to 100%, and then we'll go ahead and copy this, paste it onto the next

line and now we're going to do the webkit styling, and of course, we can't just simply

change the vendor prefix because the gradient syntax in webkit is different.

So we're going to delete all this but keep our noise png.

We'll say "-webkit-gradient."

We want the type of gradient to be linear.

We'll set it to left top and work our way down to left bottom.

The first color stop will be 0%, and we want to use that same green color that we started out

with so I'll just go ahead and copy and paste that and then our next color stop

will be 100%, and we want to use that same darker green color.

So I'll go ahead and copy and paste that, just like that, and as a fall back I'm just going to go

ahead and say "background-color" and set it to that same dark green color.

So I'll copy that and paste it.

And of course, that will just be for browsers that may not support css 3 gradients.

So let's go ahead and switch over to Google Chrome and refresh the page, and

you can see that button is starting to look pretty nice.

Now we need to create a hover state for that button.

So let's go ahead and switch back to TextMate and scroll down here,

and we'll go ahead and select that button again.

So we'll say miscellaneous for the column, and the button is of course called "call_to_action",

and we want to use the hover pseudo class, and for this we want to use a very similar

background to the one we had before, and we want to change this color to a lighter

colored green, so we'll say "46FF6C" and for this next color we'll say "46D06C",

and we want to do the same thing for webkit, so we'll go ahead and copy what we have here,

and then we'll just paste in these new colors.

So there's our first one and there's our second one, and then of course we do need a

fall back for browsers that don't support gradients, so we'll just say "background-color",

and we'll set it to this lighter color here.

So now when we switch back to Google Chrome and refresh the page, we can go

ahead and hover over our button and you can see that when we hover over it, it highlights

and goes to a lighter colored green.

So that's pretty nice.

You can go ahead and switch back to TextMate now, and

we'll go ahead and move onto the next section.

So the next thing we want to style is our quotes, or testimonials.

So we'll copy a comment flag and paste it in there, and we're going to call this section

"Quotes" and these quotes appear just below our call to action button.

So we'll go ahead and select our column miscellaneous, and these are block quotes

so we're just going to select the element "blockquote", and the first thing I'm

going to style is the font family.

So I'm going to go ahead and type "font-family", and I actually want to use a special font here.

I want to use the same Pacifico font that we used for our logo, and to do that,

we need to visit the Google font api, which you can check out at google.com/webfonts.

So I'm just going to go ahead and find on the page here Pacifico.

There it is.

And I'm going to say "use this font" and all I need to do

is copy this style sheet into our html document.

So I'll switch over to our html here, and we want to put this above all of our style sheets so

I'll go ahead and put this above application.css.

So I'll paste that in there, and now we're ready to go ahead

and use that font in our css document.

So it's called "Pacifico" and then we'll have a few fall backs such as "arial"

and just a "serif" font.

The font size is going to be set manually to 1.6 ems.

The line height will be 1.8 ems, and the margin bottom will be 24 pixels.

Now these values are fairly large, but I want this font to be pretty large and have some nice

separation from the elements around it.

So next we're going to go ahead and style the div that is inside of our block quote.

Let's switch back to our markup just so we can see what's going on here.

I'll go ahead and scroll down to the miscellaneous column, and here we have

a block quote, and inside of the block quote we have some text which is the actual quote.

Nested inside of our block quote we also have a div which contains the name of the

person that the quote is attributed to.

So we're going to go ahead and style that now and go ahead and switch over to our css,

and we'll go ahead and select the miscellaneous column, the block

quote and then the div inside of the block quote, and we'll scroll down here and the font family

I want to be different from the quote just so you can tell that the person's name is

actually different from the quote.

I'll set that to Helvetica which is of course our default font, but we've already set

this font to Pacifico so we need to override that cascading style, and we'll set our

fall backs to arial and sarif.

We'll set the font weight to bold just so it stands out.

We want the font size to be significantly smaller than the quote, so we'll say 0.7 ems

and we want a little bit of margin left on this, and then we'll set the color to

sort of a lighter gray color just so it doesn't detract from the quote.

So let's go ahead and switch over to Google Chrome, and we'll close the fonts here

because we don't need that anymore and we can refresh our page.

And now, you can see that we have this nice Pacifico font on our quotes, and then we

have the name of the person that that quote is attributed to right below it.

So that looks pretty good.