"Python Basics (2015)" was retired on June 22, 2018. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS3 Master Class!
You have completed CSS3 Master Class!
Preview
In this chapter, we'll write the majority of CSS for our photo gallery project. You'll learn how to apply numerous CSS3 properties to real world scenarios.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?music?]
0:00
[CSS]
0:02
[Nick Pettit] So now we're ready to move on to the CSS
0:05
and the first thing that we're going to do
0:09
is we're going to go ahead and create our CSS file
0:12
and we're going to call it application.css.
0:16
The reason we're calling it application is typically you have other CSS
0:21
that you're including in your project, which, in our case, is Blueprint.
0:26
Using the file name "application" indicates that this CSS is application-specific,
0:30
or it's specific to our project,
0:36
so we'll create application.css inside of the CSS folder,
0:39
and the first that we're going to do is we're going to select our body
0:44
body {
0:49
and we're going to use multiple backgrounds, which is new in CSS3,
0:52
and we're also going to use CSS3 gradients.
0:56
So first, we're going to include an image,
1:00
so we'll jump out of our CSS directory,
1:06
we'll go into the ('../images/'); directory
1:09
and we're going to use the image noise.png.
1:13
And then below this, we're going to create a gradient.
1:17
So we'll start out with the -webkit-gradeent;
1:21
and this is going to be a radial gradient,
1:26
we're going to set the inner circle, just like that,
1:30
and we'll set the outer circle just like that.
1:35
And this gradient will be going from
1:40
a sort of gray color (#888) that's pretty light
1:44
to (#222) a darker gray color.
1:51
We're going to set this background to no-repeat.
1:55
So let's go ahead and switch over to our HTML
2:01
and just after blueprint, we'll go ahead and include our style sheet.
2:05
So we'll link it in there: <link href="css/application.css">
2:10
and it's in the CSS directory
2:14
and it's called application.css
2:16
The media type is screen
2:20
media="screen"
2:23
We'll say rel="style sheet"
2:25
and of course the type="text/css"
2:29
and I'll close that tag there />
2:33
And now, when we switch over to Google Chrome and refresh the page,
2:35
you can see that we have this really nice gradient going,
2:39
and you'll also notice that we have some very subtle noise
2:42
overlaid on top of our gradient.
2:46
This is a really nice trick to use.
2:48
It's always good to add just a little bit of noise to your gradient
2:51
because not only does it give it some variation;
2:55
it also combats color banding when you don't quite have all the colors you need
2:57
to display a smooth gradient.
3:02
So let's go ahead and switch back to our CSS
3:05
and we need to do the equivalent of this in Firefox,
3:10
which is a little bit different.
3:14
So let's go ahead and jump down to the next line.
3:18
And again, we're going to use the same image for our noise,
3:24
so we'll say "../images/noise.png"
3:32
And then after the comma, we'll say -moz-radial-gradient;
3:37
because in Firefox, the property name is where we specify
3:43
if we want a radial or linear gradient
3:47
and we'll say this gradient is centered,
3:50
punch in a few values here 260px 0deg
3:56
It's going to be a circular gradient and we want this gradient to hit the closest-side,
4:02
and we'll give it the same color values here, going from our lighter gray #888 0%
4:10
to our darker gray #222 110%.
4:17
And again, we don't want this to repeat.
4:23
And then, finally, as a fallback measure, we'll go ahead and set our background-color
4:30
to our darker gray #222
4:37
and that's just in case browsers don't support multiple backgrounds
4:40
or don't support gradients.
4:44
So let's go ahead and switch over to Firefox and we'll refresh the page
4:46
and that's what our gradient looks like there.
4:51
And again, that's what our gradient looks like in Google Chrome.
4:54
So let's switch back to our text editor.
4:57
Next, we're going to include some web fonts,
5:01
and in order to do that, we're going to go to
5:04
code.google.com/webfonts.
5:09
And here, we're going to grab two different web fonts.
5:19
The first web font is going to be for our h1 up at the top here,
5:24
and the next one is going to be for our paragraph text down at the bottom here.
5:29
So let's go ahead and look through the Google web font directory.
5:35
I'm going to go ahead and sort by alphabet because I know what font I'm looking for.
5:41
The first one we're going to get is called Just Me Again Down Here,
5:46
so we'll go ahead and click on that font
5:53
and we'lll say Use This Font,
5:57
and to use this font in our web page,
5:59
we just need to go ahead and copy this link tag,
6:02
and we'll switch over to our text editor.
6:06
Right before our style sheets here, we'll go ahead and paste in that font.
6:11
And now, in our CSS, we can go ahead and use that font.
6:15
So we need to find one more font, and this one is called Raleway.
6:20
so we'll go ahead and scroll down to Raleway here,
6:26
and we'll say Use This Font, and again,
6:31
we'll just double-click and copy this here,
6:37
and we'll paste it right after our first font.
6:44
And there we go.
6:48
Now we can switch over to our CSS
6:50
and we'll go ahead and select our first-level headline h1 {
6:53
and we'll say font-family: "Just Me Again Down Here";
6:57
and as a fallback, we'll use arial, serif;
7:07
and then we'll set the font-size: 6em;
7:15
because we want that font to be pretty large.
7:19
We'll set the font-weight: normal;
7:22
we'll give it some margin: 12px 0px 30 px
7:27
just to separate it from other elements.
7:33
We'll give it a white color: #FFF;
7:37
because it is on a dark background.
7:39
We want to align this text center;
7:42
and we'll also give it a very slight text-shadow.
7:45
The X offset will be 0px,
7:49
the Y offset will be 2px,
7:52
the blur radius will be 1px,
7:55
and we'll set that shadow to black #000;.
7:58
It will really make the text pop off of the lighter colored gradient.
8:01
So let's go ahead and switch over to Google Chrome
8:05
and we'll refresh the page,
8:08
and there you can see we are now using our font and there's a very slight text shadow
8:11
just underneath it--like I said--to separate it from the lighter colored gradient.
8:15
So now, we need to go ahead and style this second-level headline down here,
8:21
and this paragraph text here, which right now
8:27
you can't even see because it's against a dark background.
8:30
So we'll go ahead and make some room to work here,
8:34
and we'll select our second-level headline.
8:38
Again, we'll give it a white color #FFF.
8:42
We'll set the font-family: "Raleway",
8:49
and we'll use arial, serif as our fallbacks again.
8:55
We'll set the font-weight: bold;
9:01
and again, we're going to give this second-level headline
9:04
a slight text-shadow: and the X offset will be 0px,
9:09
the Y offset will be -1px, which will put the shadow just above our text by 1 pixel.
9:14
We'll set the blur radius to 1px, and we'll set this shadow to black #000
9:22
and this is a really neat trick.
9:28
I'm going to go ahead and refresh the page here.
9:30
As you can see, we have white text and our shadow is just above the text,
9:33
which will make the text look like it's inset or pressed into the page.
9:40
So let's go ahead and style our paragraph text now.
9:44
So we'll go ahead and select our paragraph p {
9:49
and we'll scroll down here a little bit.
9:52
And again, we're going to set the font-family: "Raleway"
9:56
and our fallbacks will once again be arial, serif.
10:02
We're going to set the color to a very light gray color. #CCC
10:07
We don't want to set this to be completely white because from a design point of view,
10:11
it will create a little bit too much texture on the page
10:16
if we have it as a pure white color,
10:20
so we want to make it just a little bit lighter.
10:22
We'll set the font-size: 1.3em;
10:25
we'll set the line-height: 1.2em
10:29
and let's go ahead and switch over to the browser
10:33
and see what that looks like.
10:36
Now, what I'm noticing here is that this text looks pretty good,
10:39
but the problem right now is that we have very long lines
10:43
that go all the way across the page.
10:47
And so, when you get to the end of a line, it's very difficult to pick up the next line
10:49
at the other side of the page.
10:54
We can mitigate this issue by using the multi-column layout module
10:56
which is new in CSS3.
11:00
So let's go ahead and switch back to the browser,
11:02
and let's go ahead and make this work in webkit first.
11:05
-webkit-column-count: 2;
11:09
We'll say webkit-column-gap: 80px;
11:16
and we'll set the gap to 80 pixels.
11:22
This is the amount of space that is between our two columns.
11:25
And then we'll set webkit-column-rule
11:30
to 1px wide solid
11:34
and we'll set it to a dark gray color #333.
11:38
Now, because this column-rule will be on a dark gray background
11:42
and it's a dark gray color, it will just appear to be a very light border
11:46
between our two columns.
11:52
So let's go ahead and switch over to our browser and refresh the page.
11:54
That's already looking a lot better.
11:59
That's much more readable than it was before.
12:01
So let's go ahead and make this work in Mozilla.
12:04
We'll use the exact same properties here,
12:08
only instead of webkit,
12:13
we're just going to change all these to Mozilla.
12:15
So we'll just change the vendor prefix there -moz
12:20
and now, we'll go ahead and switch over to Firefox and we'll refresh the page.
12:24
And of course you can see our font is up there at the top,
12:28
we have our font for the second-level headline,
12:31
and we have our multi-column layout, just like that.
12:35
Now, another design tip here:
12:39
you may be tempted to justify this text
12:42
when you have this sort of ugly-looking rag here,
12:45
but you want to keep that rag there
12:48
because when you justify the text,
12:51
it makes the actual outline of the text on the page a bit too strong
12:54
and the variable word spacing makes the text really difficult to read.
12:59
So while this rag may or may not look good to you,
13:04
it's a lot better than the alternative, which is really strange word spacing.
13:07
So let's go ahead and switch back to our text editor,
13:12
and now, we're going to move on to the stage area,
13:15
which is where all of our photos are.
13:19
So let's go ahead and select the #stage {
13:22
we're going to give it a light-colored background: #000;
13:27
we're going to give it an explicit height: 368px;
13:31
we're going to give it 10px of padding,
13:37
we'll give it margin on the top and bottom
13:40
but not on the left and right,
13:45
and let's just make a little bit more space to work here.
13:47
So next, we're going to give it a -webkit-box-shadow:
13:52
and we're going to use the value inset here
14:00
and this shadow will actually appear inside of our div
14:03
rather than outside, so we'll go ahead and set the rest of our values here.
14:07
We'll say 0px on the X, 0px on the Y.
14:11
We'll give it 5px of blur radius and we'll set the color to black #000.
14:15
Of course, we also need to make this work in Firefox,
14:20
so we'll change -webkit to -moz and we can actually keep the exact same values there,
14:24
just like that.
14:30
We're also going to use a border-radius of 20px;
14:31
-moz-border-radius: 20px;
14:37
and in webkit, we can actually just use the border-radius property now
14:43
without the vendor prefix.
14:47
In Firefox, we do need to still say moz.
14:49
We're going to set the position: relative;
14:53
and we're going to use this neat little property called -webkit-user-select
14:59
and we're going to set that to none, and what that will do is in webkit,
15:04
when somebody tries to select the photos, they won't be able to actually select them,
15:08
so it'll make the gallery a little bit nicer when we're actually interacting with it.
15:13
So let's go ahead and switch over to Google Chrome.
15:18
So here you can see we already have our stage
15:21
and it has a really nice inset shadow here
15:24
and we have our curved borders, so let's go ahead and switch over to Firefox
15:27
and we'll refresh, and let's look at our stage here.
15:33
It looks like we're doing pretty well in both browsers
15:37
so let's go ahead and switch back to our text editor.
15:41
And now, we're actually going to use transitions
15:44
to make our photos animate when we click on them.
15:47
So first, we'll select our staging area
15:51
and then we want to select all of the images
15:53
that are children of our stage area.
15:56
So we'll go ahead and open that up
15:59
and first, we'll do our -webkit-transition.
16:03
We want to transition on all properties.
16:08
We'll make the transition last for 0.2 seconds
16:11
and we want to use the animation curve ease-in-out;
16:15
and this looks exactly the same in Firefox;
16:21
we just need to change the vendor prefix -moz, just like that.
16:25
Now, we're going to go ahead and style each of our photos,
16:30
so we'll select all of our photos inside of the stage.
16:36
#stage .photo {
16:41
We're going to give them an explicit width: 190px;
16:45
we're going to give them a height: 140px;
16:51
a background of white #FFF;
16:55
we're going to give them a border:
17:01
10px solid #FFF; and that will make
17:03
a nice little Polaroid effect with a white border all the way around our images,
17:07
and we're going to set their position: absolute;.
17:11
So now we're going to create a hover state for our photos,
17:19
so we'll go ahead and select the #stage.
17:24
We'll select all the photos inside and create a hover state for them.
17:26
#stage .photo:hover {
17:30
We'll give them a -webkit-box-shadow
17:33
when we hover over them,
17:36
and for the color of this particular shadow, we're going to use the rgba color model
17:40
and we'll set that to black (0,0,0,
17:45
and then we'll set the opacity to 0.9
17:48
and this will look exactly the same in Firefox,
17:51
so we'll just change the vendor prefix
17:54
from -webkit to -moz.
17:56
And another nice thing we should do
17:58
is set the cursor: pointer
18:01
so that when people hover over the photos,
18:03
even though they're not anchor tags,
18:06
they'll still get that nice pointer cursor so that they know that they can click on those photos.
18:09
So now comes the tedious part.
18:15
We need to absolutely position all of our photos.
18:17
Now, I know what some of you experts are thinking--
18:20
this is not exactly the best way to do this,
18:23
but we'll address this later on in this Master Class.
18:26
So first, we'll select our first photo,
18:29
#photo01 { top:
18:32
we'll set the top offset to 22px;
18:36
and we'll set the left offset to 22px;
18:40
and then, we're just going to copy this and we'll paste it eight times,
18:45
and then we'll adjust all the values,
18:49
so 1, 2, 3, 4, 5, 6, 7, plus the first one we did.
18:51
And then we'll change all of these selectors
18:57
so that we're selecting the proper photos here.
19:01
Then we just need to adjust mostly the left values here,
19:07
so we'll say this one is 256px offset,
19:10
this one is 490px offset,
19:15
this one is 724px offset.
19:19
And then, we get to the second row of photos
19:23
and these are obviously going to have a different top offset of 206px.
19:29
We just need to adjust the offsets for left, just like we did before,
19:39
so we'll set that to 256px, 490px, and 724px.
19:44
Now, you can tell I already did all of the math for you here,
19:53
but this will lay the photos out in a nice, neat grid.
19:57
So let's just go ahead and clean up our text a little bit there;
20:00
it's always good to have nice, readable CSS.
20:03
And we'll save that out, and let's go ahead and switch over to Google Chrome
20:06
and see how we're doing.
20:10
So we'll go ahead and refresh the page, and there, you can see we now have
20:12
these nice, absolutely positioned photos,
20:15
and when we hover over them, we get that really nice transition on the box shadow.
20:18
So let's go ahead and switch over to Firefox and see how we're doing there.
20:25
We'll refresh the page,
20:29
and here you can see we have the exact same thing.
20:31
We have these really nice transitions on the hover state
20:35
with these box shadows,
20:38
so let's go ahead and switch over to TextMate and just finish this up.
20:40
We'll select our stage again
20:45
#stage .large_photo {
20:47
and we'll go ahead and create this class large_photo,
20:57
which we'll be using in just a second, but for now, let's go ahead and fill out these values.
21:00
Large_photo class is going to be for when we actually click on the photos
21:06
and they enlarge.
21:13
We'll set this to position: absolute;
21:15
and we've given it an explicit width and height.
21:18
We'll set the top offset to 0px;
21:22
and the left offset to 200px.
21:26
We want this photo to appear on top of all of our other photos,
21:29
so we'll set the z-index: 1000 just to ensure that it's always on top.
21:34
We'll set a -webkit-transform on this
21:41
and we'll say rotate(-5deg) degrees
21:46
and what this will do is create a really nice rotation effect
21:51
when we go ahead and enlarge our photo; it will just sort of offset our photo slightly
21:55
and give it a little bit more life.
22:00
So we'll go ahead and copy and paste that
22:02
and change the vendor prefix to -moz
22:04
for Firefox, and again, we want to say cursor: pointer
22:09
because this is going to be something that is clickable.
22:13
We also want to set a slightly larger border on this.
22:18
We'll set it to border: 15px solid white #FFF;
22:21
and we're going to have this slightly thicker border on it
22:27
because the photo should appear as though it's actually coming at you in the browser
22:31
along the z-plane.
22:36
So we'll go ahead and set a -webkit-box-shadow on this,
22:38
and again, because the photo is supposed to appear as though it's further off the page
22:43
or as though it's lifting off the page,
22:48
we want to set a slightly larger shadow on this.
22:51
So we'll set the offsets to 0px 0px,
22:54
we'll set the blur radius to 30px,
22:57
and we'll go ahead and set this to be pure black #000;
23:00
and we'll go ahead and copy and paste this,
23:07
and we'll just, once again, change the vendor prefix from -webkit to -moz for Mozilla,
23:10
and we won't be able to test this just yet.
23:19
Before we can actually test this class,
23:22
we need to go ahead and write a little bit of jQuery
23:25
so that we can toggle between our photo class
23:28
and our large_photo class.
23:31
So let's go ahead and create a new file inside of our JavaScripts folder.
23:33
We'll go ahead and call this application.js
23:41
because once again, this is our application-specific JavaScript.
23:45
So first, before we can actually start writing any jQuery,
23:51
we need to include jQuery into our project.
23:55
A really great way to do that is to use the Google hosted version
24:00
because if your site visitors have visited other websites
24:04
that already have the Google hosted version,
24:08
it will be cached on their computer and it will make your webpage
24:11
load a little bit faster.
24:14
So just past the CSS here,
24:16
we'll go ahead and open a script tag
24:19
and the source for this is going to be
24:23
"http://ajax.googleapis.com/ajax/libs/jquery/1.5"> which is the current latest version.
24:26
And then, we want the minified version, so we'll say /jquery.min.js".
24:47
And again, that will make our page load a little bit faster.
24:55
So we'll go ahead and close our </script> tag there,
24:59
and then once again, we need to open another script tag
25:02
to include our own JavaScript, and the source for this will be
25:05
src="javascripts/application.js"
25:10
and we need to go ahead and close that just like that.
25:17
So now, we can go ahead and start writing our JavaScript,
25:22
so we'll go ahead and switch over to application.js
25:25
and we want to start this with a self-executing function
25:30
that will run once the page has loaded.
25:34
$(function() {
25:38
});
25:47
And then, we're going to go ahead and use our $ function
25:52
to select all of the images on the page $('img'),
25:55
and when these images are clicked,
26:00
we want to execute a function
26:03
.click(function)() {
26:07
just like that.
26:13
And inside of our function, we want to use $(this) as a reference
26:15
because it's the photo that we're clicking on
26:20
and we want to go ahead and toggleClass
26:23
between photo and large_photo.
26:27
So basically, if the image has the class photo and it is clicked,
26:32
it will switch over to the class large_photo.
26:37
If the photo has the large_photo class and it is clicked,
26:40
it will switch over to the photo class.
26:43
So we'll go ahead and switch over to Google Chrome here,
26:47
and when we refresh the page and click on these,
26:51
you can see that these photos will now enlarge.
26:54
And not only that--they will slightly turn and they will animate
26:57
using the CSS3 transition that we applied.
27:02
So let's go ahead and switch over to Firefox and we'll refresh the page here,
27:05
and same thing--when we click on these photos,
27:09
they will enlarge--just like that.
27:12
Now, one thing I would like to note here is that I am using the Firefox 4 beta
27:15
in which transitions are now supported.
27:20
In prior versions, CSS3 transitions were not supported.
27:23
So now that we've gone ahead and created this project,
27:28
let's look at ways that we can improve it.
27:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up