Call to Action and Quotes

]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