Preview

Start a free Courses trial
to watch this video

Call to Action and Quotes

Name: Call to Action and Quotes
Uploaded: 2013-06-17T20:38:47Z
Duration: 778 s
Description: In this video, we'll work on the third and final column in our layout. This column will contain our large call to action button, along with some testimonial quotes about the mobile web app we're advertising.

12:58 with Nick Pettit

In this video, we'll work on the third and final column in our layout. This column will contain our large call to action button, along with some testimonial quotes about the mobile web app we're advertising.

Video Transcript
Downloads

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

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

This last column will contain our call to action button and 0:11

our testimonial quotes about the app. 0:14

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

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

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

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

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

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

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

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

do to go ahead and style this. 1:07

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

We want this to be white because it's going to be 1:13

set against sort of a darker colored background. 1:16

We'll set the font weight to bold. 1:19

We'll set the text decoration to none. 1:22

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

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

on the bottom just to sort of space it out. 1:41

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

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

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

We'll set a border radius using webkit border radius, and 2:05

we want a nice big border radius of 30 pixels. 2:12

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

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

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

We want the x offset to be zero, 2:35

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

shadow so we'll set it to black. 2:45

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

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

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

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

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

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

so that the shadow actually appears above the text. 3:24

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

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

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

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

the black shadow will actually look like an inner shadow. 3:50

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

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

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

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

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

but we still need to apply a background color. 4:20

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

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

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

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

remove any artifacts from color banding. 4:46

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

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

is called "noise.png." 5:00

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

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

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

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

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

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

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

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

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

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

We'll say "-webkit-gradient." 6:05

We want the type of gradient to be linear. 6:09

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

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

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

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

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

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

So I'll copy that and paste it. 6:54

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

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

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

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

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

and we'll go ahead and select that button again. 7:18

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

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

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

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

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

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

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

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

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

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

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

and goes to a lighter colored green. 8:41

So that's pretty nice. 8:44

You can go ahead and switch back to TextMate now, and 8:46

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

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

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

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

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

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

going to style is the font family. 9:24

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

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

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

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

There it is. 9:53

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

is copy this style sheet into our html document. 10:00

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

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

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

and use that font in our css document. 10:21

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

and just a "serif" font. 10:34

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

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

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

separation from the elements around it. 10:57

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

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

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

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

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

person that the quote is attributed to. 11:26

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

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

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

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

actually different from the quote. 11:53

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

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

fall backs to arial and sarif. 12:06

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

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

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

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

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

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

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

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

So that looks pretty good. 12:56

You need to sign up for Treehouse in order to download course files.