1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:05,000
[CSS]

3
00:00:05,000 --> 00:00:09,000
[Nick Pettit] So now we're ready to move on to the CSS

4
00:00:09,000 --> 00:00:12,000
and the first thing that we're going to do

5
00:00:12,000 --> 00:00:16,000
is we're going to go ahead and create our CSS file

6
00:00:16,000 --> 00:00:21,000
and we're going to call it application.css.

7
00:00:21,000 --> 00:00:26,000
The reason we're calling it application is typically you have other CSS

8
00:00:26,000 --> 00:00:30,000
that you're including in your project, which, in our case, is Blueprint.

9
00:00:30,000 --> 00:00:36,000
Using the file name "application" indicates that this CSS is application-specific,

10
00:00:36,000 --> 00:00:39,000
or it's specific to our project,

11
00:00:39,000 --> 00:00:44,000
so we'll create application.css inside of the CSS folder,

12
00:00:44,000 --> 00:00:49,000
and the first that we're going to do is we're going to select our body

13
00:00:49,000 --> 00:00:52,000
body {

14
00:00:52,000 --> 00:00:56,000
and we're going to use multiple backgrounds, which is new in CSS3,

15
00:00:56,000 --> 00:01:00,000
and we're also going to use CSS3 gradients.

16
00:01:00,000 --> 00:01:06,000
So first, we're going to include an image, 

17
00:01:06,000 --> 00:01:09,000
so we'll jump out of our CSS directory,

18
00:01:09,000 --> 00:01:13,000
we'll go into the ('../images/'); directory 

19
00:01:13,000 --> 00:01:17,000
and we're going to use the image noise.png.

20
00:01:17,000 --> 00:01:21,000
And then below this, we're going to create a gradient.

21
00:01:21,000 --> 00:01:26,000
So we'll start out with the -webkit-gradeent;

22
00:01:26,000 --> 00:01:30,000
and this is going to be a radial gradient,

23
00:01:30,000 --> 00:01:35,000
we're going to set the inner circle, just like that,

24
00:01:35,000 --> 00:01:40,000
and we'll set the outer circle just like that.

25
00:01:40,000 --> 00:01:44,000
And this gradient will be going from 

26
00:01:44,000 --> 00:01:51,000
a sort of gray color (#888) that's pretty light

27
00:01:51,000 --> 00:01:55,000
to (#222) a darker gray color.

28
00:01:55,000 --> 00:02:01,000
We're going to set this background to no-repeat.

29
00:02:01,000 --> 00:02:05,000
So let's go ahead and switch over to our HTML

30
00:02:05,000 --> 00:02:10,000
and just after blueprint, we'll go ahead and include our style sheet.

31
00:02:10,000 --> 00:02:14,000
So we'll link it in there: <link href="css/application.css">

32
00:02:14,000 --> 00:02:16,000
and it's in the CSS directory 

33
00:02:16,000 --> 00:02:20,000
and it's called application.css

34
00:02:20,000 --> 00:02:23,000
The media type is screen

35
00:02:23,000 --> 00:02:25,000
media="screen"

36
00:02:25,000 --> 00:02:29,000
We'll say rel="style sheet"

37
00:02:29,000 --> 00:02:33,000
and of course the type="text/css"

38
00:02:33,000 --> 00:02:35,000
and I'll close that tag there  />

39
00:02:35,000 --> 00:02:39,000
And now, when we switch over to Google Chrome and refresh the page,

40
00:02:39,000 --> 00:02:42,000
you can see that we have this really nice gradient going,

41
00:02:42,000 --> 00:02:46,000
and you'll also notice that we have some very subtle noise 

42
00:02:46,000 --> 00:02:48,000
overlaid on top of our gradient.

43
00:02:48,000 --> 00:02:51,000
This is a really nice trick to use.

44
00:02:51,000 --> 00:02:55,000
It's always good to add just a little bit of noise to your gradient 

45
00:02:55,000 --> 00:02:57,000
because not only does it give it some variation; 

46
00:02:57,000 --> 00:03:02,000
it also combats color banding when you don't quite have all the colors you need

47
00:03:02,000 --> 00:03:05,000
to display a smooth gradient.

48
00:03:05,000 --> 00:03:10,000
So let's go ahead and switch back to our CSS

49
00:03:10,000 --> 00:03:14,000
and we need to do the equivalent of this in Firefox,

50
00:03:14,000 --> 00:03:18,000
which is a little bit different.

51
00:03:18,000 --> 00:03:24,000
So let's go ahead and jump down to the next line.

52
00:03:24,000 --> 00:03:32,000
And again, we're going to use the same image for our noise,

53
00:03:32,000 --> 00:03:37,000
so we'll say "../images/noise.png"

54
00:03:37,000 --> 00:03:43,000
And then after the comma, we'll say -moz-radial-gradient;

55
00:03:43,000 --> 00:03:47,000
because in Firefox, the property name is where we specify 

56
00:03:47,000 --> 00:03:50,000
if we want a radial or linear gradient

57
00:03:50,000 --> 00:03:56,000
and we'll say this gradient is centered,

58
00:03:56,000 --> 00:04:02,000
 punch in a few values here 260px 0deg

59
00:04:02,000 --> 00:04:10,000
It's going to be a circular gradient and we want this gradient to hit the closest-side,

60
00:04:10,000 --> 00:04:17,000
and we'll give it the same color values here, going from our lighter gray #888 0%

61
00:04:17,000 --> 00:04:23,000
to our darker gray #222 110%.

62
00:04:23,000 --> 00:04:30,000
And again, we don't want this to repeat.

63
00:04:30,000 --> 00:04:37,000
And then, finally, as a fallback measure, we'll go ahead and set our background-color

64
00:04:37,000 --> 00:04:40,000
to our darker gray #222 

65
00:04:40,000 --> 00:04:44,000
and that's just in case browsers don't support multiple backgrounds

66
00:04:44,000 --> 00:04:46,000
or don't support gradients.

67
00:04:46,000 --> 00:04:51,000
So let's go ahead and switch over to Firefox and we'll refresh the page

68
00:04:51,000 --> 00:04:54,000
and that's what our gradient looks like there.

69
00:04:54,000 --> 00:04:57,000
And again, that's what our gradient looks like in Google Chrome.

70
00:04:57,000 --> 00:05:01,000
So let's switch back to our text editor. 

71
00:05:01,000 --> 00:05:04,000
Next, we're going to include some web fonts,

72
00:05:04,000 --> 00:05:09,000
and in order to do that, we're going to go to 

73
00:05:09,000 --> 00:05:19,000
code.google.com/webfonts.

74
00:05:19,000 --> 00:05:24,000
And here, we're going to grab two different web fonts.

75
00:05:24,000 --> 00:05:29,000
The first web font is going to be for our h1 up at the top here,

76
00:05:29,000 --> 00:05:35,000
and the next one is going to be for our paragraph text down at the bottom here.

77
00:05:35,000 --> 00:05:41,000
So let's go ahead and look through the Google web font directory.

78
00:05:41,000 --> 00:05:46,000
I'm going to go ahead and sort by alphabet because I know what font I'm looking for.

79
00:05:46,000 --> 00:05:53,000
The first one we're going to get is called Just Me Again Down Here,

80
00:05:53,000 --> 00:05:57,000
so we'll go ahead and click on that font

81
00:05:57,000 --> 00:05:59,000
and we'lll say Use This Font,

82
00:05:59,000 --> 00:06:02,000
and to use this font in our web page,

83
00:06:02,000 --> 00:06:06,000
we just need to go ahead and copy this link tag,

84
00:06:06,000 --> 00:06:11,000
and we'll switch over to our text editor.

85
00:06:11,000 --> 00:06:15,000
Right before our style sheets here, we'll go ahead and paste in that font.

86
00:06:15,000 --> 00:06:20,000
And now, in our CSS, we can go ahead and use that font.

87
00:06:20,000 --> 00:06:26,000
So we need to find one more font, and this one is called Raleway.

88
00:06:26,000 --> 00:06:31,000
so we'll go ahead and scroll down to Raleway here,

89
00:06:31,000 --> 00:06:37,000
and we'll say Use This Font, and again,

90
00:06:37,000 --> 00:06:44,000
we'll just double-click and copy this here,

91
00:06:44,000 --> 00:06:48,000
and we'll paste it right after our first font.

92
00:06:48,000 --> 00:06:50,000
And there we go.

93
00:06:50,000 --> 00:06:53,000
Now we can switch over to our CSS

94
00:06:53,000 --> 00:06:57,000
and we'll go ahead and select our first-level headline h1 {

95
00:06:57,000 --> 00:07:07,000
and we'll say font-family: "Just Me Again Down Here";

96
00:07:07,000 --> 00:07:15,000
and as a fallback, we'll use arial, serif;

97
00:07:15,000 --> 00:07:19,000
and then we'll set the font-size: 6em;

98
00:07:19,000 --> 00:07:22,000
because we want that font to be pretty large.

99
00:07:22,000 --> 00:07:27,000
We'll set the font-weight: normal;

100
00:07:27,000 --> 00:07:33,000
we'll give it some margin: 12px 0px 30 px 

101
00:07:33,000 --> 00:07:37,000
just to separate it from other elements.

102
00:07:37,000 --> 00:07:39,000
We'll give it a white color: #FFF; 

103
00:07:39,000 --> 00:07:42,000
because it is on a dark background.

104
00:07:42,000 --> 00:07:45,000
We want to align this text center;

105
00:07:45,000 --> 00:07:49,000
and we'll also give it a very slight text-shadow.

106
00:07:49,000 --> 00:07:52,000
The X offset will be 0px, 

107
00:07:52,000 --> 00:07:55,000
the Y offset will be 2px,

108
00:07:55,000 --> 00:07:58,000
the blur radius will be 1px,

109
00:07:58,000 --> 00:08:01,000
and we'll set that shadow to black #000;.

110
00:08:01,000 --> 00:08:05,000
It will really make the text pop off of the lighter colored gradient.

111
00:08:05,000 --> 00:08:08,000
So let's go ahead and switch over to Google Chrome

112
00:08:08,000 --> 00:08:11,000
and we'll refresh the page,

113
00:08:11,000 --> 00:08:15,000
and there you can see we are now using our font and there's a very slight text shadow

114
00:08:15,000 --> 00:08:21,000
just underneath it--like I said--to separate it from the lighter colored gradient.

115
00:08:21,000 --> 00:08:27,000
So now, we need to go ahead and style this second-level headline down here,

116
00:08:27,000 --> 00:08:30,000
and this paragraph text here, which right now

117
00:08:30,000 --> 00:08:34,000
you can't even see because it's against a dark background. 

118
00:08:34,000 --> 00:08:38,000
So we'll go ahead and make some room to work here,

119
00:08:38,000 --> 00:08:42,000
and we'll select our second-level headline.

120
00:08:42,000 --> 00:08:49,000
Again, we'll give it a white color #FFF.

121
00:08:49,000 --> 00:08:55,000
We'll set the font-family: "Raleway", 

122
00:08:55,000 --> 00:09:01,000
and we'll use arial, serif as our fallbacks again.

123
00:09:01,000 --> 00:09:04,000
We'll set the font-weight: bold;

124
00:09:04,000 --> 00:09:09,000
and again, we're going to give this second-level headline

125
00:09:09,000 --> 00:09:14,000
a slight text-shadow: and the X offset will be 0px,

126
00:09:14,000 --> 00:09:22,000
the Y offset will be -1px, which will put the shadow just above our text by 1 pixel.

127
00:09:22,000 --> 00:09:28,000
We'll set the blur radius to 1px, and we'll set this shadow to black #000

128
00:09:28,000 --> 00:09:30,000
and this is a really neat trick.

129
00:09:30,000 --> 00:09:33,000
I'm going to go ahead and refresh the page here.

130
00:09:33,000 --> 00:09:40,000
As you can see, we have white text and our shadow is just above the text,

131
00:09:40,000 --> 00:09:44,000
which will make the text look like it's inset or pressed into the page.

132
00:09:44,000 --> 00:09:49,000
So let's go ahead and style our paragraph text now.

133
00:09:49,000 --> 00:09:52,000
So we'll go ahead and select our paragraph p {

134
00:09:52,000 --> 00:09:56,000
and we'll scroll down here a little bit.

135
00:09:56,000 --> 00:10:02,000
And again, we're going to set the font-family: "Raleway"

136
00:10:02,000 --> 00:10:07,000
and our fallbacks will once again be arial, serif.

137
00:10:07,000 --> 00:10:11,000
We're going to set the color to a very light gray color. #CCC

138
00:10:11,000 --> 00:10:16,000
We don't want to set this to be completely white because from a design point of view,

139
00:10:16,000 --> 00:10:20,000
it will create a little bit too much texture on the page

140
00:10:20,000 --> 00:10:22,000
if we have it as a pure white color,

141
00:10:22,000 --> 00:10:25,000
so we want to make it just a little bit lighter.

142
00:10:25,000 --> 00:10:29,000
We'll set the font-size: 1.3em; 

143
00:10:29,000 --> 00:10:33,000
we'll set the line-height: 1.2em

144
00:10:33,000 --> 00:10:36,000
and let's go ahead and switch over to the browser 

145
00:10:36,000 --> 00:10:39,000
and see what that looks like.

146
00:10:39,000 --> 00:10:43,000
Now, what I'm noticing here is that this text looks pretty good,

147
00:10:43,000 --> 00:10:47,000
but the problem right now is that we have very long lines

148
00:10:47,000 --> 00:10:49,000
that go all the way across the page.

149
00:10:49,000 --> 00:10:54,000
And so, when you get to the end of a line, it's very difficult to pick up the next line

150
00:10:54,000 --> 00:10:56,000
at the other side of the page.

151
00:10:56,000 --> 00:11:00,000
We can mitigate this issue by using the multi-column layout module

152
00:11:00,000 --> 00:11:02,000
which is new in CSS3.

153
00:11:02,000 --> 00:11:05,000
So let's go ahead and switch back to the browser,

154
00:11:05,000 --> 00:11:09,000
and let's go ahead and make this work in webkit first.

155
00:11:09,000 --> 00:11:16,000
-webkit-column-count: 2;

156
00:11:16,000 --> 00:11:22,000
We'll say webkit-column-gap: 80px;

157
00:11:22,000 --> 00:11:25,000
and we'll set the gap to 80 pixels.

158
00:11:25,000 --> 00:11:30,000
This is the amount of space that is between our two columns.

159
00:11:30,000 --> 00:11:34,000
And then we'll set webkit-column-rule

160
00:11:34,000 --> 00:11:38,000
to 1px wide solid

161
00:11:38,000 --> 00:11:42,000
and we'll set it to a dark gray color #333.

162
00:11:42,000 --> 00:11:46,000
Now, because this column-rule will be on a dark gray background

163
00:11:46,000 --> 00:11:52,000
and it's a dark gray color, it will just appear to be a very light border

164
00:11:52,000 --> 00:11:54,000
between our two columns.

165
00:11:54,000 --> 00:11:59,000
So let's go ahead and switch over to our browser and refresh the page.

166
00:11:59,000 --> 00:12:01,000
That's already looking a lot better.

167
00:12:01,000 --> 00:12:04,000
That's much more readable than it was before.

168
00:12:04,000 --> 00:12:08,000
So let's go ahead and make this work in Mozilla.

169
00:12:08,000 --> 00:12:13,000
We'll use the exact same properties here,

170
00:12:13,000 --> 00:12:15,000
only instead of webkit,

171
00:12:15,000 --> 00:12:20,000
we're just going to change all these to Mozilla.

172
00:12:20,000 --> 00:12:24,000
So we'll just change the vendor prefix there -moz

173
00:12:24,000 --> 00:12:28,000
and now, we'll go ahead and switch over to Firefox and we'll refresh the page.

174
00:12:28,000 --> 00:12:31,000
And of course you can see our font is up there at the top,

175
00:12:31,000 --> 00:12:35,000
we have our font for the second-level headline,

176
00:12:35,000 --> 00:12:39,000
and we have our multi-column layout, just like that. 

177
00:12:39,000 --> 00:12:42,000
Now, another design tip here: 

178
00:12:42,000 --> 00:12:45,000
you may be tempted to justify this text

179
00:12:45,000 --> 00:12:48,000
when you have this sort of ugly-looking rag here,

180
00:12:48,000 --> 00:12:51,000
but you want to keep that rag there

181
00:12:51,000 --> 00:12:54,000
because when you justify the text, 

182
00:12:54,000 --> 00:12:59,000
it makes the actual outline of the text on the page a bit too strong

183
00:12:59,000 --> 00:13:04,000
and the variable word spacing makes the text really difficult to read.

184
00:13:04,000 --> 00:13:07,000
So while this rag may or may not look good to you,

185
00:13:07,000 --> 00:13:12,000
it's a lot better than the alternative, which is really strange word spacing.

186
00:13:12,000 --> 00:13:15,000
So let's go ahead and switch back to our text editor,

187
00:13:15,000 --> 00:13:19,000
and now, we're going to move on to the stage area,

188
00:13:19,000 --> 00:13:22,000
which is where all of our photos are.

189
00:13:22,000 --> 00:13:27,000
So let's go ahead and select the #stage {

190
00:13:27,000 --> 00:13:31,000
we're going to give it a light-colored background: #000;

191
00:13:31,000 --> 00:13:37,000
we're going to give it an explicit height: 368px;

192
00:13:37,000 --> 00:13:40,000
we're going to give it 10px of padding,

193
00:13:40,000 --> 00:13:45,000
we'll give it margin on the top and bottom 

194
00:13:45,000 --> 00:13:47,000
but not on the left and right,

195
00:13:47,000 --> 00:13:52,000
and let's just make a little bit more space to work here.

196
00:13:52,000 --> 00:14:00,000
So next, we're going to give it a -webkit-box-shadow:

197
00:14:00,000 --> 00:14:03,000
and we're going to use the value inset here

198
00:14:03,000 --> 00:14:07,000
and this shadow will actually appear inside of our div

199
00:14:07,000 --> 00:14:11,000
rather than outside, so we'll go ahead and set the rest of our values here.

200
00:14:11,000 --> 00:14:15,000
We'll say 0px on the X, 0px on the Y.

201
00:14:15,000 --> 00:14:20,000
We'll give it 5px of blur radius and we'll set the color to black #000.

202
00:14:20,000 --> 00:14:24,000
Of course, we also need to make this work in Firefox,

203
00:14:24,000 --> 00:14:30,000
so we'll change -webkit to -moz and we can actually keep the exact same values there,

204
00:14:30,000 --> 00:14:31,000
just like that. 

205
00:14:31,000 --> 00:14:37,000
We're also going to use a border-radius of 20px;

206
00:14:37,000 --> 00:14:43,000
-moz-border-radius: 20px;

207
00:14:43,000 --> 00:14:47,000
and in webkit, we can actually just use the border-radius property now

208
00:14:47,000 --> 00:14:49,000
without the vendor prefix.

209
00:14:49,000 --> 00:14:53,000
In Firefox, we do need to still say moz.

210
00:14:53,000 --> 00:14:59,000
We're going to set the position: relative;

211
00:14:59,000 --> 00:15:04,000
and we're going to use this neat little property called -webkit-user-select

212
00:15:04,000 --> 00:15:08,000
and we're going to set that to none, and what that will do is in webkit,

213
00:15:08,000 --> 00:15:13,000
when somebody tries to select the photos, they won't be able to actually select them,

214
00:15:13,000 --> 00:15:18,000
so it'll make the gallery a little bit nicer when we're actually interacting with it.

215
00:15:18,000 --> 00:15:21,000
So let's go ahead and switch over to Google Chrome.

216
00:15:21,000 --> 00:15:24,000
So here you can see we already have our stage

217
00:15:24,000 --> 00:15:27,000
and it has a really nice inset shadow here

218
00:15:27,000 --> 00:15:33,000
and we have our curved borders, so let's go ahead and switch over to Firefox

219
00:15:33,000 --> 00:15:37,000
and we'll refresh, and let's look at our stage here.

220
00:15:37,000 --> 00:15:41,000
It looks like we're doing pretty well in both browsers

221
00:15:41,000 --> 00:15:44,000
so let's go ahead and switch back to our text editor.

222
00:15:44,000 --> 00:15:47,000
And now, we're actually going to use transitions 

223
00:15:47,000 --> 00:15:51,000
to make our photos animate when we click on them.

224
00:15:51,000 --> 00:15:53,000
So first, we'll select our staging area

225
00:15:53,000 --> 00:15:56,000
and then we want to select all of the images

226
00:15:56,000 --> 00:15:59,000
that are children of our stage area.

227
00:15:59,000 --> 00:16:03,000
So we'll go ahead and open that up

228
00:16:03,000 --> 00:16:08,000
and first, we'll do our -webkit-transition.

229
00:16:08,000 --> 00:16:11,000
We want to transition on all properties.

230
00:16:11,000 --> 00:16:15,000
We'll make the transition last for 0.2 seconds

231
00:16:15,000 --> 00:16:21,000
and we want to use the animation curve ease-in-out;

232
00:16:21,000 --> 00:16:25,000
and this looks exactly the same in Firefox;

233
00:16:25,000 --> 00:16:30,000
we just need to change the vendor prefix -moz, just like that. 

234
00:16:30,000 --> 00:16:36,000
Now, we're going to go ahead and style each of our photos,

235
00:16:36,000 --> 00:16:41,000
so we'll select all of our photos inside of the stage.

236
00:16:41,000 --> 00:16:45,000
#stage .photo {

237
00:16:45,000 --> 00:16:51,000
We're going to give them an explicit width: 190px;

238
00:16:51,000 --> 00:16:55,000
we're going to give them a height: 140px;

239
00:16:55,000 --> 00:17:01,000
a background of white #FFF;

240
00:17:01,000 --> 00:17:03,000
we're going to give them a border: 

241
00:17:03,000 --> 00:17:07,000
10px solid #FFF; and that will make

242
00:17:07,000 --> 00:17:11,000
a nice little Polaroid effect with a white border all the way around our images,

243
00:17:11,000 --> 00:17:19,000
and we're going to set their position: absolute;.

244
00:17:19,000 --> 00:17:24,000
So now we're going to create a hover state for our photos,

245
00:17:24,000 --> 00:17:26,000
so we'll go ahead and select the #stage.

246
00:17:26,000 --> 00:17:30,000
We'll select all the photos inside and create a hover state for them.

247
00:17:30,000 --> 00:17:33,000
#stage .photo:hover {

248
00:17:33,000 --> 00:17:36,000
We'll give them a -webkit-box-shadow

249
00:17:36,000 --> 00:17:40,000
when we hover over them, 

250
00:17:40,000 --> 00:17:45,000
and for the color of this particular shadow, we're going to use the rgba color model

251
00:17:45,000 --> 00:17:48,000
and we'll set that to black (0,0,0,

252
00:17:48,000 --> 00:17:51,000
and then we'll set the opacity to 0.9

253
00:17:51,000 --> 00:17:54,000
and this will look exactly the same in Firefox,

254
00:17:54,000 --> 00:17:56,000
so we'll just change the vendor prefix

255
00:17:56,000 --> 00:17:58,000
from -webkit to -moz.

256
00:17:58,000 --> 00:18:01,000
And another nice thing we should do

257
00:18:01,000 --> 00:18:03,000
is set the cursor: pointer

258
00:18:03,000 --> 00:18:06,000
so that when people hover over the photos,

259
00:18:06,000 --> 00:18:09,000
even though they're not anchor tags,

260
00:18:09,000 --> 00:18:15,000
they'll still get that nice pointer cursor so that they know that they can click on those photos.

261
00:18:15,000 --> 00:18:17,000
So now comes the tedious part.

262
00:18:17,000 --> 00:18:20,000
We need to absolutely position all of our photos.

263
00:18:20,000 --> 00:18:23,000
Now, I know what some of you experts are thinking--

264
00:18:23,000 --> 00:18:26,000
this is not exactly the best way to do this,

265
00:18:26,000 --> 00:18:29,000
but we'll address this later on in this Master Class.

266
00:18:29,000 --> 00:18:32,000
So first, we'll select our first photo,

267
00:18:32,000 --> 00:18:36,000
#photo01 { top: 

268
00:18:36,000 --> 00:18:40,000
we'll set the top offset to 22px;

269
00:18:40,000 --> 00:18:45,000
and we'll set the left offset to 22px;

270
00:18:45,000 --> 00:18:49,000
and then, we're just going to copy this and we'll paste it eight times,

271
00:18:49,000 --> 00:18:51,000
and then we'll adjust all the values,

272
00:18:51,000 --> 00:18:57,000
 so 1, 2, 3, 4, 5, 6, 7, plus the first one we did.

273
00:18:57,000 --> 00:19:01,000
And then we'll change all of these selectors

274
00:19:01,000 --> 00:19:07,000
so that we're selecting the proper photos here.

275
00:19:07,000 --> 00:19:10,000
Then we just need to adjust mostly the left values here,

276
00:19:10,000 --> 00:19:15,000
so we'll say this one is 256px offset,

277
00:19:15,000 --> 00:19:19,000
this one is 490px offset,

278
00:19:19,000 --> 00:19:23,000
this one is 724px offset.

279
00:19:23,000 --> 00:19:29,000
And then, we get to the second row of photos

280
00:19:29,000 --> 00:19:39,000
and these are obviously going to have a different top offset of 206px.

281
00:19:39,000 --> 00:19:44,000
We just need to adjust the offsets for left, just like we did before,

282
00:19:44,000 --> 00:19:53,000
so we'll set that to 256px, 490px, and 724px.

283
00:19:53,000 --> 00:19:57,000
Now, you can tell I already did all of the math for you here,

284
00:19:57,000 --> 00:20:00,000
but this will lay the photos out in a nice, neat grid.

285
00:20:00,000 --> 00:20:03,000
So let's just go ahead and clean up our text a little bit there;

286
00:20:03,000 --> 00:20:06,000
it's always good to have nice, readable CSS.

287
00:20:06,000 --> 00:20:10,000
And we'll save that out, and let's go ahead and switch over to Google Chrome

288
00:20:10,000 --> 00:20:12,000
and see how we're doing.

289
00:20:12,000 --> 00:20:15,000
So we'll go ahead and refresh the page, and there, you can see we now have 

290
00:20:15,000 --> 00:20:18,000
these nice, absolutely positioned photos,

291
00:20:18,000 --> 00:20:25,000
and when we hover over them, we get that really nice transition on the box shadow.

292
00:20:25,000 --> 00:20:29,000
So let's go ahead and switch over to Firefox and see how we're doing there.

293
00:20:29,000 --> 00:20:31,000
We'll refresh the page, 

294
00:20:31,000 --> 00:20:35,000
and here you can see we have the exact same thing.

295
00:20:35,000 --> 00:20:38,000
We have these really nice transitions on the hover state

296
00:20:38,000 --> 00:20:40,000
with these box shadows,

297
00:20:40,000 --> 00:20:45,000
so let's go ahead and switch over to TextMate and just finish this up.

298
00:20:45,000 --> 00:20:47,000
We'll select our stage again

299
00:20:47,000 --> 00:20:57,000
#stage .large_photo {

300
00:20:57,000 --> 00:21:00,000
and we'll go ahead and create this class large_photo,

301
00:21:00,000 --> 00:21:06,000
which we'll be using in just a second, but for now, let's go ahead and fill out these values.

302
00:21:06,000 --> 00:21:13,000
Large_photo class is going to be for when we actually click on the photos

303
00:21:13,000 --> 00:21:15,000
and they enlarge.

304
00:21:15,000 --> 00:21:18,000
We'll set this to position: absolute;

305
00:21:18,000 --> 00:21:22,000
and we've given it an explicit width and height.

306
00:21:22,000 --> 00:21:26,000
We'll set the top offset to 0px;

307
00:21:26,000 --> 00:21:29,000
and the left offset to 200px.

308
00:21:29,000 --> 00:21:34,000
We want this photo to appear on top of all of our other photos,

309
00:21:34,000 --> 00:21:41,000
so we'll set the z-index: 1000 just to ensure that it's always on top.

310
00:21:41,000 --> 00:21:46,000
We'll set a -webkit-transform on this

311
00:21:46,000 --> 00:21:51,000
and we'll say rotate(-5deg) degrees

312
00:21:51,000 --> 00:21:55,000
and what this will do is create a really nice rotation effect

313
00:21:55,000 --> 00:22:00,000
when we go ahead and enlarge our photo; it will just sort of offset our photo slightly

314
00:22:00,000 --> 00:22:02,000
and give it a little bit more life.

315
00:22:02,000 --> 00:22:04,000
So we'll go ahead and copy and paste that

316
00:22:04,000 --> 00:22:09,000
and change the vendor prefix to -moz 

317
00:22:09,000 --> 00:22:13,000
for Firefox, and again, we want to say cursor: pointer

318
00:22:13,000 --> 00:22:18,000
because this is going to be something that is clickable.

319
00:22:18,000 --> 00:22:21,000
We also want to set a slightly larger border on this.

320
00:22:21,000 --> 00:22:27,000
We'll set it to border: 15px solid white #FFF;

321
00:22:27,000 --> 00:22:31,000
and we're going to have this slightly thicker border on it 

322
00:22:31,000 --> 00:22:36,000
because the photo should appear as though it's actually coming at you in the browser 

323
00:22:36,000 --> 00:22:38,000
along the z-plane. 

324
00:22:38,000 --> 00:22:43,000
So we'll go ahead and set a -webkit-box-shadow on this, 

325
00:22:43,000 --> 00:22:48,000
and again, because the photo is supposed to appear as though it's further off the page

326
00:22:48,000 --> 00:22:51,000
or as though it's lifting off the page,

327
00:22:51,000 --> 00:22:54,000
we want to set a slightly larger shadow on this.

328
00:22:54,000 --> 00:22:57,000
So we'll set the offsets to 0px 0px,

329
00:22:57,000 --> 00:23:00,000
 we'll set the blur radius to 30px,

330
00:23:00,000 --> 00:23:07,000
and we'll go ahead and set this to be pure black #000;

331
00:23:07,000 --> 00:23:10,000
and we'll go ahead and copy and paste this,

332
00:23:10,000 --> 00:23:19,000
and we'll just, once again, change the vendor prefix from -webkit to -moz for Mozilla,

333
00:23:19,000 --> 00:23:22,000
and we won't be able to test this just yet.

334
00:23:22,000 --> 00:23:25,000
Before we can actually test this class, 

335
00:23:25,000 --> 00:23:28,000
we need to go ahead and write a little bit of jQuery 

336
00:23:28,000 --> 00:23:31,000
so that we can toggle between our photo class

337
00:23:31,000 --> 00:23:33,000
and our large_photo class.

338
00:23:33,000 --> 00:23:41,000
So let's go ahead and create a new file inside of our JavaScripts folder.

339
00:23:41,000 --> 00:23:45,000
We'll go ahead and call this application.js 

340
00:23:45,000 --> 00:23:51,000
because once again, this is our application-specific JavaScript.

341
00:23:51,000 --> 00:23:55,000
So first, before we can actually start writing any jQuery,

342
00:23:55,000 --> 00:24:00,000
we need to include jQuery into our project.

343
00:24:00,000 --> 00:24:04,000
A really great way to do that is to use the Google hosted version

344
00:24:04,000 --> 00:24:08,000
because if your site visitors have visited other websites

345
00:24:08,000 --> 00:24:11,000
 that already have the Google hosted version,

346
00:24:11,000 --> 00:24:14,000
it will be cached on their computer and it will make your webpage

347
00:24:14,000 --> 00:24:16,000
load a little bit faster. 

348
00:24:16,000 --> 00:24:19,000
So just past the CSS here,

349
00:24:19,000 --> 00:24:23,000
we'll go ahead and open a script tag

350
00:24:23,000 --> 00:24:26,000
and the source for this is going to be 

351
00:24:26,000 --> 00:24:47,000
"http://ajax.googleapis.com/ajax/libs/jquery/1.5"> which is the current latest version.

352
00:24:47,000 --> 00:24:55,000
And then, we want the minified version, so we'll say /jquery.min.js".

353
00:24:55,000 --> 00:24:59,000
And again, that will make our page load a little bit faster.

354
00:24:59,000 --> 00:25:02,000
So we'll go ahead and close our </script> tag there,

355
00:25:02,000 --> 00:25:05,000
and then once again, we need to open another script tag

356
00:25:05,000 --> 00:25:10,000
to include our own JavaScript, and the source for this will be

357
00:25:10,000 --> 00:25:17,000
src="javascripts/application.js"

358
00:25:17,000 --> 00:25:22,000
and we need to go ahead and close that  just like that.

359
00:25:22,000 --> 00:25:25,000
So now, we can go ahead and start writing our JavaScript,

360
00:25:25,000 --> 00:25:30,000
so we'll go ahead and switch over to application.js

361
00:25:30,000 --> 00:25:34,000
and we want to start this with a self-executing function 

362
00:25:34,000 --> 00:25:38,000
that will run once the page has loaded.

363
00:25:38,000 --> 00:25:47,000
$(function() {

364
00:25:47,000 --> 00:25:52,000
});

365
00:25:52,000 --> 00:25:55,000
And then, we're going to go ahead and use our $ function

366
00:25:55,000 --> 00:26:00,000
to select all of the images on the page $('img'),

367
00:26:00,000 --> 00:26:03,000
and when these images are clicked,

368
00:26:03,000 --> 00:26:07,000
we want to execute a function 

369
00:26:07,000 --> 00:26:13,000
.click(function)() {

370
00:26:13,000 --> 00:26:15,000
just like that.

371
00:26:15,000 --> 00:26:20,000
And inside of our function, we want to use $(this) as a reference 

372
00:26:20,000 --> 00:26:23,000
because it's the photo that we're clicking on

373
00:26:23,000 --> 00:26:27,000
and we want to go ahead and toggleClass

374
00:26:27,000 --> 00:26:32,000
between photo and large_photo.

375
00:26:32,000 --> 00:26:37,000
So basically, if the image has the class photo and it is clicked,

376
00:26:37,000 --> 00:26:40,000
it will switch over to the class large_photo.

377
00:26:40,000 --> 00:26:43,000
If the photo has the large_photo class and it is clicked,

378
00:26:43,000 --> 00:26:47,000
it will switch over to the photo class.

379
00:26:47,000 --> 00:26:51,000
So we'll go ahead and switch over to Google Chrome here,

380
00:26:51,000 --> 00:26:54,000
and when we refresh the page and click on these,

381
00:26:54,000 --> 00:26:57,000
you can see that these photos will now enlarge.

382
00:26:57,000 --> 00:27:02,000
And not only that--they will slightly turn and they will animate

383
00:27:02,000 --> 00:27:05,000
using the CSS3 transition that we applied.

384
00:27:05,000 --> 00:27:09,000
So let's go ahead and switch over to Firefox and we'll refresh the page here,

385
00:27:09,000 --> 00:27:12,000
and same thing--when we click on these photos,

386
00:27:12,000 --> 00:27:15,000
they will enlarge--just like that. 

387
00:27:15,000 --> 00:27:20,000
Now, one thing I would like to note here is that I am using the Firefox 4 beta

388
00:27:20,000 --> 00:27:23,000
in which transitions are now supported.

389
00:27:23,000 --> 00:27:28,000
In prior versions, CSS3 transitions were not supported.

390
00:27:28,000 --> 00:27:31,000
So now that we've gone ahead and created this project,

391
00:27:31,000 --> 00:27:32,000
let's look at ways that we can improve it.