Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this live Workshop, Nick tinkers around with CodePen and creates a movie theater marquee in HTML and CSS. He also takes questions from our YouTube audience!
Resources
- Balsamiq Mockups - The wireframing app used in this video.
- View the completed project on CodePen!
-
0:00
[Creating a CSS Marquee with Nick Pettit] [CSS3 Workshop]
-
0:04
[Nick Pettit - @nickrp] Hey, everybody, I'm Nick Pettit.
-
0:06
I am @nickrp on Twitter and I am a web design teacher here at Treehouse,
-
0:11
which of course is the best way to learn web design, web development, business, mobile, and so much more.
-
0:18
Today we are doing a little Livestream test.
-
0:23
This could go horribly wrong. We're going to wait and see and find out what happens.
-
0:28
That's going to be part of the fun.
-
0:29
I'm going to make a lot of mistakes as I'm coding.
-
0:32
We're going to get into some CSS here.
-
0:35
But yeah, like I said, that's part of the fun.
-
0:37
So we're going to learn together, basically.
-
0:41
I'm going to code a marquee like you might see around a movie theater sign
-
0:49
or a sign at an actual theater, like a live performance theater.
-
0:53
We're going to do it with just CSS and HTML.
-
0:57
I don't want to use any kind of images.
-
0:59
We're going to be doing everything in CodePen today.
-
1:02
Before I actually get into the HTML and CSS,
-
1:06
I want to jump into Balsamiq Mockups and just give you a game plan for what we're going to be doing.
-
1:14
I'm going to drag out a rectangle here.
-
1:18
There we go.
-
1:19
If you're not familiar, Balsamiq Mockups is this really cool wireframing tool.
-
1:24
I'm not sure how much it costs, but it's pretty cheap. They've got a free trial, super awesome.
-
1:29
I'm going to drag out this rectangle, and I think I'm going to make it kind of squarish here. That's good.
-
1:38
I want these chaser lights to go all the way around the outside.
-
1:45
So just like you'll see at a cinema or a live performance venue,
-
1:50
we're going to have these lights going all the way around.
-
1:54
I'm going to go ahead and do this with 4 elements.
-
2:00
I'm going to have one right here, I'm going to have another box right here,
-
2:08
then I'm going to have one down at the bottom. There we go. Let's line all these up.
-
2:15
And then I'm going to have one more box over here on the left side.
-
2:23
We're going to position these using absolute positioning.
-
2:27
I don't think there's anything that could really go wrong here.
-
2:30
Each one of these elements is going to be an unordered list
-
2:36
and then we're going to have list items for each light on the inside.
-
2:40
We're actually going to do some fairly advanced CSS stuff here.
-
2:44
We're going to do some pretty advanced selectors using nth-child pseudo elements,
-
2:50
and then we're also going to use—
-
2:52
I think box-shadow would be a good way to make these lights actually light up.
-
2:57
This isn't going to be terribly semantic.
-
3:00
It's probably not something you would necessarily want to do in a real setting,
-
3:07
but it will still be kind of fun and we're still going to learn a lot about CSS.
-
3:12
So let's go ahead and jump into the code with our plan in mind here.
-
3:18
Here I'm using CodePen.
-
3:21
CodePen is this really amazing website put together by Chris Coyier and I think a few other people.
-
3:27
Chris Coyier I know is the designer on it.
-
3:30
Chris Coyier of course is well known for CSS-Tricks.
-
3:34
Go ahead and bring that up. CSS-Tricks is a pretty cool blog, a friend of the show here.
-
3:41
They have all sorts of stuff on here about CSS, as the name might imply.
-
3:47
I'm going to go ahead and close that.
-
3:50
To start out here, I think I want to create just a div that we're going to center on the page.
-
4:02
I'm going to call this my wrapper div.
-
4:07
There we go.
-
4:09
We're going to have a couple of unordered lists inside of here.
-
4:15
I'm going to go ahead and create one to get started.
-
4:20
Oops. Close that.
-
4:25
There we go. Now we have 3 list items.
-
4:27
I think each one of these should actually have 9 items.
-
4:33
So if we jump back to our mockup here, there will be 9 lights inside each one of these,
-
4:38
and that should give us what we need to chase around here.
-
4:43
I might have done my math wrong on that, but we'll go ahead and figure it out as we go along.
-
4:49
I want to actually make these kind of an ugly color just so we can see what's going on and how everything is positioned.
-
4:59
I'm going to close my JavaScript and I'm going to select my unordered list,
-
5:06
and we're going to say list-style: none; to remove all the bullet points.
-
5:12
We're going to say padding: 0; to remove any kind of padding.
-
5:16
And then on our list items we're also going to say padding: 0; to remove the padding,
-
5:21
and then we're going to set these to an explicit width and height.
-
5:25
I'm going to say 50 pixels for the width and the height so it will be square,
-
5:31
and then I'm going to say background: orange;
-
5:35
This is something that I actually do a lot.
-
5:37
I set the color of an element to just a straight-up CSS keyword
-
5:42
so that we can actually see the element on the page and see how much space it's taking up.
-
5:48
I'm going to float all of these to left, set the margin-right to 5 pixels there, and there we go.
-
5:59
We have 9 list items all in a row there.
-
6:03
Now we need to actually center our wrapper on the page,
-
6:09
so let's go ahead and do that.
-
6:12
I'm going to use a technique here that's called absolute centering.
-
6:15
It's actually something that I saw on CodePen not too long ago,
-
6:19
and it's pretty cool.
-
6:21
It basically will center everything on the page not only horizontally but also vertically
-
6:28
so we'll have this nice square box in the middle.
-
6:31
We called that wrapper. We're going to select that using an ID selector wrapper. There we go.
-
6:38
We're going to say margin: auto; and actually I'm going to set this to another ugly background color there.
-
6:47
We're going to set it to purple just so we can see it.
-
6:50
As you can see, nothing is showing up just yet,
-
6:52
so that means that it's not actually present on the page really. It's not taking up space.
-
6:58
We're going to set that to margin: auto; and we're going to say position: absolute;
-
7:04
and then for the top, right, bottom, and left we're going to set those values to 0.
-
7:16
There's one more thing we need to do here, and that is set an explicit width and height.
-
7:22
So I'm just going to set a value. We'll change these later on.
-
7:26
If we set it to 500 pixels there—
-
7:29
Actually, I'm going to make it slightly smaller just so you can see it. There we go.
-
7:33
You can see that it's actually centered on the page.
-
7:35
Of course we want to leave enough room for all of these list items,
-
7:39
so let's change that back, let's say 600. There we go.
-
7:46
That's pretty cool there.
-
7:50
We want to do the math here properly, though, so let's do that.
-
7:57
It looks like there's some weird padding going on here. I'm not sure what that's about.
-
8:02
I'm going to open up my inspector here in Chrome and see if we can get rid of that.
-
8:08
I'm going to go to the Metrics here.
-
8:12
It looks like—oh, okay. I guess maybe there is some margin in there.
-
8:17
Maybe it's on the unordered list. Aha! Yes, it is.
-
8:24
So we need to actually say margin: 0; on that as well. There we go.
-
8:29
Now it's flush right up against the edge of that element.
-
8:33
Let's set this to the proper width or a width that's good enough at least to get us started.
-
8:39
We know that we have 9 elements here.
-
8:42
Each one is 50 pixels wide, and we're going to have a 10th element over here on the right.
-
8:50
We actually have 10 elements that are all 50 pixels wide,
-
8:54
and each one of them has a margin-right of 5 pixels.
-
8:59
This last list item over here that's actually going to be a list going down
-
9:04
will not have that extra margin.
-
9:07
So we need to calculate this.
-
9:09
Let's go ahead and just open up our Spotlight here.
-
9:14
This is where I like to do all of my calculations, believe it or not.
-
9:18
We're going to say 9 * 55. That will give us 495.
-
9:25
And then we need to add 50 to that, so that's going to be 545 across.
-
9:32
We're going to say width: 545px;
-
9:36
I think I did my math correctly there. It looks okay so far.
-
9:40
Then of course this is going to be square, so we'll go ahead and do the same thing.
-
9:47
Cool.
-
9:49
It looks like we're running out of space. I'm just going to make this full screen so that we can see what's going on here.
-
9:55
Let's start adding in the rest of these lists and then positioning them,
-
10:02
again, just like we have in our mockup here.
-
10:05
We have our first one here, then we need 3 more.
-
10:09
I'm going to close my CSS and jump into the HTML here.
-
10:20
So now we have a whole bunch of lists here. It actually looks kind of cool.
-
10:25
We're going to label this one top, so we'll use an ID of "top".
-
10:31
And then we need IDs on the rest of these so that we can identify them.
-
10:36
This one is going to be on the right, this one is going to be on the bottom,
-
10:42
and then finally, we'll have the one over here on the left.
-
10:47
Cool.
-
10:50
Now let's jump back into the CSS.
-
10:54
For the first list, top, we want to position it absolutely.
-
11:06
And then we want to say top: 0; and left: 0;
-
11:12
Cool.
-
11:14
For the one on the right we want to do something similar,
-
11:19
so we'll copy and paste that code.
-
11:23
But instead, we actually want that to be over on the right side.
-
11:29
We also need to make sure that those list items are not floated to the left.
-
11:35
We actually just want them running down the page.
-
11:37
So we're going to need to move this float out of this list item and get a little bit more specific.
-
11:46
We'll say top li. That's going to be floated to the left with a margin-right of 5 pixels.
-
11:54
And then for the ones on the right we're going to do something similar here, except we're not going to float these.
-
12:02
We're just going to say margin-bottom; 5px;
-
12:08
There we go. Margin-right. Okay. Cool.
-
12:13
Now we have our UL positioned over here on the right and we just need to do it for the bottom and the left.
-
12:23
Let's go ahead and copy all this stuff here because it's going to be pretty similar code.
-
12:30
Here's our new code. Just make some space here.
-
12:37
For the stuff that's on the bottom, we're going to say bottom and align it to the right.
-
12:46
We want to float everything to the left, and we actually want margin on the left side this time.
-
12:53
There we go.
-
12:54
And then finally, for our left UL we're going to say margin-bottom.
-
13:00
It's going to be positioned on the left side at the bottom.
-
13:06
And let's see. What's going on here? Oh. We want that margin to be on the top.
-
13:13
There we go. Look at that. We have list items going all the way around our element now.
-
13:19
We have exactly what we want here.
-
13:24
Now we need to make these light bulbs.
-
13:28
First we're going to style the light bulbs and then we're going to make them light up.
-
13:34
Let's jump down here. That's all of our positioning stuff.
-
13:39
I'm just going to make some space here to work.
-
13:44
For each one of our list items, we do not want the background to be this ugly orange color,
-
13:53
so let's get rid of that.
-
13:55
Actually, I'm going to do all the work up here in this list item rather than creating a new selector. There we go.
-
14:06
I want the background to be some kind of gradient, so that will go there. I'm not sure what's going there yet.
-
14:13
But then we also want it to be round.
-
14:17
To do that, we'll just use border-radius and we'll set it to 100%.
-
14:23
I'm actually going to cheat a little bit here.
-
14:26
In CodePen there's this really cool feature called Prefix Free.
-
14:30
I'm going to turn that on, and that's going to allow me to type CSS3 according to the W3C spec
-
14:38
without actually having to use all of those browser prefixes and worry about compatibility.
-
14:45
So border-radius should be set to 100% there.
-
14:50
And if we set the background to orange, cool, we have all these little circles.
-
14:55
Now we want to drop in a gradient.
-
14:59
I'm going to jump into a gradient generator.
-
15:05
I'm not actually going to write it out myself. Too lazy for that.
-
15:08
There we go. We have a nice gradient here.
-
15:12
We want it to be a radial gradient, and we want it to be a little bit darker on the outside than it is on the inside.
-
15:20
There you can see we have this yellow color happening,
-
15:24
and towards the middle it's kind of white.
-
15:26
We want that to be a little bit lower in opacity, so let's drop that down to 60.
-
15:34
And then same thing on the edges.
-
15:36
We want it to be a little bit transparent.
-
15:39
Let's go ahead and do that.
-
15:41
It looks good enough for now.
-
15:43
We can make additional tweaks in our code.
-
15:46
All I need here is the W3C compatible version.
-
15:50
They actually give you everything in this particular gradient generator. That's pretty cool.
-
15:55
But we just need this code right here.
-
15:59
So I will copy that, we'll leave that open in case we need it, and I'll paste it right here,
-
16:06
and that should give us some gradients.
-
16:08
Let's get rid of this purple background color
-
16:13
and let's set the background of the body to black just to add some drama here.
-
16:19
I'm going to say background and I'll use the hexadecimal value black. There we go.
-
16:26
Now we have these lights here.
-
16:28
They look okay. I think we could do a little bit better, though.
-
16:31
I'm actually going to set the center to kind of a yellowish color.
-
16:37
I'm going to say 200, something like that. That's pretty good.
-
16:42
I'm going to lower the opacity here.
-
16:44
And then on the outer side of this light bulb I'm going to make some further adjustments.
-
16:51
I would actually like this to be a pretty bright yellow color as well,
-
16:56
so I'm just adjusting rgb. I'm adjusting the blue here, so taking out some blue. That looks good.
-
17:05
And then I also want to adjust the radius of this gradient,
-
17:08
so I'm going to actually move that out by just a little bit.
-
17:12
That looks pretty good, but I think we could make this look even more realistic
-
17:17
if we had some kind of shine here on the light bulb.
-
17:20
I'm going to use a pseudo element here.
-
17:24
I'm going to say before on each list item, the content node will be blank,
-
17:32
so we'll just have absolutely nothing in there.
-
17:35
We'll set the display to block.
-
17:38
And then same kind of thing, we're going to set this to an ugly background color
-
17:43
just so that we can actually see it.
-
17:46
Width and height will be something like 20 pixels.
-
17:51
We'll set that.
-
17:54
And there we go. We have this element here right on top of each one of our light bulbs.
-
18:02
We need to shape this and kind of style it so it looks like this white reflection or refraction or whatever you call it.
-
18:10
Let's go ahead and set the background to rgba. We'll set it to pure white.
-
18:18
And then we're going to adjust the opacity a little bit there. There we go.
-
18:25
We're going to set the border-radius once again to 100%.
-
18:31
Actually, I don't want this to be completely circular, so let's make it kind of oblong there.
-
18:38
That's looking pretty good. Let's see if we can get that effect to be exaggerated even more.
-
18:46
There we go. I like that a little bit better.
-
18:49
That is a bit big for my taste, so let's drop down the size there down to 15 pixels.
-
18:57
Now we need to position it over each light bulb, so let's do that.
-
19:02
We'll say position: absolute; right: 0; top: 0; and let's see where that gets us.
-
19:09
Oh, okay. So we need to actually say position: relative; on each one of our light bulbs there. There we go.
-
19:16
Now we can position these relative to the light bulb.
-
19:20
We'll move this down a little bit,
-
19:23
over from the right 10 pixels, over from the top 10 pixels. That's a little bit much.
-
19:29
I'm going to drop that down to 6. Will that do it?
-
19:33
Yeah, that's pretty good.
-
19:37
I'm actually going to drop the opacity a bit more. There we go.
-
19:40
Those light bulbs don't look too bad.
-
19:43
They'll actually look a lot more realistic when they're lit up.
-
19:47
Maybe we can even put something inside here, perhaps Jason Seifer or Andrew Chalkley. That would be nice.
-
19:56
Let's make these light bulbs light up. How are we going to do that?
-
20:03
I think we should probably use box-shadow because with box-shadow we can apply multiple shadows,
-
20:10
which will really actually be lights, and we can do one on the inside and we can do one on the outside.
-
20:17
I'm going to use an nth-child selector here so I can select just a few of these light bulbs.
-
20:24
Let's say li:nth-child and I'm just going to select every third light bulb.
-
20:32
I'm going to say box-shadow.
-
20:36
We want the x and y offsets to be at 0 and we want the blur radius to be at 40 pixels,
-
20:44
and then we're going to say rgba, again pure white, and we'll set it to just slightly transparent.
-
20:52
There you can see that we have some of these light bulbs lighting up.
-
20:55
That's pretty cool. I think I'd actually like to apply a bit of a choke there just so we can get these a little brighter.
-
21:03
That's too much.
-
21:05
There we go. That's not too bad.
-
21:09
I think I like the look of that. I'd actually like to make these lights kind of yellowish.
-
21:13
So again, I'll drop the blue, and mixing red and green, unlike in elementary school,
-
21:20
will actually give you yellow.
-
21:23
It's kind of the difference between additive and subtractive color processes there. It's rather complicated.
-
21:29
I'm going to change that to add a little bit more blue there. There we go.
-
21:35
I think I like that yellow color. That's not too bad.
-
21:40
I want the interior of these to be a little bit more white.
-
21:43
So now we need to add our second box-shadow.
-
21:48
Let's go ahead and put that there.
-
21:52
We'll tab this out and we're going to type inset here.
-
21:57
The inset keyword will actually put a box-shadow on the inside of our light bulbs. That's pretty cool.
-
22:06
Like I said, I want this to be fairly bright.
-
22:10
I think I want to introduce a little bit more yellow there.
-
22:16
It's still a little bit too white. There we go.
-
22:19
Okay. I think that looks pretty nice when it's lit up.
-
22:23
I think I could adjust a couple things here, like the blur radius and the choke, just to give it a little bit of a different look.
-
22:35
I think I liked it the way it was, just exactly the same as the outside.
-
22:39
There we go. A little bit more, a little bit less. All right. We're perfecting pixels now. It's too much.
-
22:46
Okay, cool. I think those look like light bulbs that are lit up.
-
22:52
Now we need to animate these things, and the way we're going to do that
-
22:57
is we're going to grab these light bulbs in sets of 3 and then we're going to set an animation delay
-
23:05
so that they light up one at a time.
-
23:09
Every first light bulb will light up, then every second one, then every third one,
-
23:15
and it will look like these lights are actually chasing around.
-
23:19
We might need to make a few other adjustments.
-
23:21
For example, I think when we get down here and over on the left
-
23:23
we'll actually need to rotate these 180 degrees
-
23:26
because I think it's going to be going backwards.
-
23:29
But we'll deal with that as we need to.
-
23:33
Let's pop down here and let's add some animation keyframes.
-
23:46
I'm going to say @keyframes, and at 0% here it's not going to be lit up at all.
-
23:57
We actually need to move these box-shadows down.
-
24:01
Let me grab those box-shadows. There we go.
-
24:06
We'll use these selectors later on.
-
24:12
We don't want any box-shadow at 0%. I think I may need to zero those out for it to actually work.
-
24:18
But at 100% we want it to be completely lit up.
-
24:22
Or wait, no. Actually, I'm sorry, that needs to be reversed.
-
24:25
At 0% we want it to be lit up completely so it will kind of pop on,
-
24:30
and then once we get to 100% we want it to gently fade.
-
24:36
So I'll say box-shadow. Actually, let me just copy this entire thing here. There we go.
-
24:47
We want it to fade out gracefully, so we'll set the blur radius or blur radii to 0
-
24:57
and we'll set the opacity on each one of these box-shadows to 0 as well.
-
25:03
CodePen isn't really—
-
25:05
Yeah, there we go. Now we have enough room so we can actually see this code.
-
25:09
There we go. Now it's nicely formatted so it's not wrapping all over the place.
-
25:14
There we go. Okay.
-
25:17
Let's apply this animation to all of our list items just to see where we're at and see how this actually blinks.
-
25:26
I'm going to jump up here to my list item and I'm going to say animation,
-
25:32
which again, normally, you would need a bunch of browser prefixes for this to actually work.
-
25:38
But we're using no prefix, so we can just type in animation. Pretty awesome.
-
25:43
We need to give that an animation name, so we're going to say chase. There we go.
-
25:51
We've called that animation chase.
-
25:54
We want these to blink for 1 second, and we want this to be infinite.
-
26:05
Now these lights will blink at an interval of 1 second.
-
26:11
Like I said, we need to actually select each one of these and apply an animation delay so that they chase around.
-
26:18
Let's comment that out.
-
26:21
We'll do that next.
-
26:24
I'm going to copy that and I'm going to paste it into this nth-child selector.
-
26:32
Here we're just selecting the first element in each one of these lists.
-
26:37
Like I said, we have a bit of an issue down here, as you can see,
-
26:43
because these 2 are right next to each other, but they should never blink at the same time.
-
26:48
So we're actually need to rotate these 180 degrees.
-
26:51
Here's another instance of that as well.
-
26:54
But we'll do that last. Let's just get this chase working first.
-
26:59
We need to use some fairly advanced nth-child selectors in order to do this
-
27:03
because we want to select every first, every second, and every third element in these lists.
-
27:10
There's this really cool post over on CSS-Tricks that I refer to quite a lot.
-
27:15
It's called nth-child Recipes.
-
27:20
Let me see if I can find that. Yeah, Useful nth-child Recipes.
-
27:26
If we scroll down here, you'll see that there's all sorts of cool recipes here.
-
27:31
You can select only the fifth element, you can select all but the first five,
-
27:35
select only the first five, select every fourth, starting at the first, and so on.
-
27:41
This is pretty similar to what we need to do, so we're going to do something kind of like this.
-
27:48
I'm just going to copy and paste this selector knowing that it will be every fourth, starting at the first.
-
27:56
I want to do it this way. I think that will be a little bit better stylistically.
-
28:05
Let's paste that in there.
-
28:07
I think I need to say every third one—yeah, like that—plus the first one.
-
28:16
Now I need to do the same thing but for every second one.
-
28:23
Let me comment that out.
-
28:27
We'll say that. Will that do what I want? No, not quite.
-
28:32
You know what I need to do?
-
28:34
I need to say every third on every one of these nth-child selectors, plus the amount that I want it to be an interval.
-
28:47
I don't know. That sentence was an absolute train wreck.
-
28:49
Okay, moving on.
-
28:51
There we have our third one.
-
28:55
With this nth-child selector we're actually selecting every third element.
-
28:59
I think that's it. I think we have all of the selectors that we need here.
-
29:07
Now what we can do is apply this animation to the list items,
-
29:14
and then down here we'll set these to have an animation delay.
-
29:21
What that's going to do is it's going to start each light bulb at different times.
-
29:27
Or in this case it will start every first light bulb and then it will start every second one and every third one.
-
29:34
So instead of these animations here, we actually want to use the animation-delay property.
-
29:41
I'm going to say animation-delay.
-
29:45
And you can just put in any time value here in CSS.
-
29:48
We can say something like 1 second.
-
29:51
And then down here we can say 2 seconds and then we'll say 3 seconds.
-
29:56
Actually, we don't want any delay on the first one at all. We want it to start right away.
-
30:00
So we'll say 1, 2, and then up here in our actual animation property
-
30:08
we'll say that this lasts for 3 seconds.
-
30:11
That way we can kind of see it slowly coming together here.
-
30:15
We can see we've got 1, 2, 3, 1, 2, 3, 1, 2, 3 and so on.
-
30:25
This one is just fine, but again, we need to rotate these, it looks like, because they're actually going backwards,
-
30:33
1, 2, 3, just like the top here.
-
30:36
Let's go ahead and do that.
-
30:38
We'll go to—I believe it's bottom here that we want to rotate.
-
30:44
We'll say transform: rotate and we just need to rotate it 180 degrees.
-
30:51
Same thing on the left side.
-
30:55
And I think that should do it. Uh-oh. There's something wrong with the math here.
-
31:00
Oh, you know what? Because we rotated it, we actually need to change the margins.
-
31:04
So this gets a little bit tricky, but I think we can do it.
-
31:10
On the bottom here we actually need to say margin-right, I believe. Yeah.
-
31:15
And then instead of margin-top we just need to say margin-bottom on the left side.
-
31:20
So yeah, I think that's working. It looks like it's working just fine.
-
31:28
Let's change the pace of this so we can actually make sure it's working.
-
31:37
If we do our math right, we have 0, 1, and 2 seconds and then 3 seconds.
-
31:43
So theoretically, if we just said something like 200 milliseconds, 400 milliseconds,
-
31:51
and we're just adding 200 every time, this should be 600 milliseconds.
-
32:00
And there we go. It looks like these are chasing around here.
-
32:04
This wouldn't be complete without some kind of Web celebrity inside,
-
32:08
so we're going to head over to Facebook and open up Andrew's page here. There we go.
-
32:15
Oh man, look at that beautiful man.
-
32:17
We're just going to steal this image, open this image in a new tab.
-
32:23
This is probably against the Facebook terms of service,
-
32:26
but I'm just going to hotlink this image directly and we're going to set it as the background image for our wrapper here.
-
32:36
I think that's what we want to do, right? Yeah, because the wrapper is containing everything.
-
32:42
That should do it.
-
32:44
If we say background: green; that's exactly what I thought would happen. Wonderful.
-
32:52
We're going to say url and we'll put in this link to Andrew that is entirely too large.
-
33:01
Say background-size: 90%; on both.
-
33:07
We don't want it to repeat, so we'll say no-repeat.
-
33:10
And then we need to change the background-position and we just need to move it over
-
33:18
I think by 10% on each axis.
-
33:24
Okay. That looks like it's still a little bit too large, so let's decrease the size there, 20% and 20%.
-
33:33
Is that what we need to do?
-
33:35
Oh my goodness, this is terrible. Oh, there we go. Okay. 50%.
-
33:39
That's what actually centers it. Silly me.
-
33:42
And there we have it. There's Andrew right in the middle there.
-
33:45
I'm going to go ahead and save this Pen. That was extremely risky.
-
33:49
I actually didn't save that the entire time. That's okay.
-
33:53
I'm going to go ahead and call this Marquee Lights.
-
33:58
Oh my gosh. How do you spell marquee? I have no idea.
-
34:02
Marquee. Is that really the spelling? I don't think it is. Yeah. Yeah, I think that's it. Okay.
-
34:11
Sure. We're going to go with that. So I'm going to call it Marquee Chaser Lights.
-
34:22
I'll just put in a silly description here, say, Just for fun!
-
34:28
We'll tag it with a couple things.
-
34:31
We'll say something like css3, animation, box-shadow. Sure. That looks great.
-
34:44
Now it should be on my CodePen profile. There it is, there's Marquee Chaser Lights.
-
34:50
There's Tom Hanks and Meg Ryan spinning around the Space Jam logo. Don't ask.
-
34:54
I've been writing a jQuery plugin recently, doing a whole bunch of other cool stuff on CodePen.
-
35:01
It's a wonderful place.
-
35:04
So that is pretty much it.
-
35:07
I'm going to hop into our Livestream chat moderation here.
-
35:13
One of our crew members, Chris Zabriskie, is actually moderating the chat over on YouTube,
-
35:19
and he's putting questions in here for me to look at so I don't actually have to try to keep up with the stream.
-
35:25
We'll do a little bit of Q&A here.
-
35:30
There's a couple of questions.
-
35:33
One says, "Can you show how you got to Chrome's inspector when you get a chance?"
-
35:38
Well, guess what? We've got the chance right now.
-
35:41
I'm going to open up Google Chrome here.
-
35:46
Let's open this up in a new window.
-
35:53
There we go. That's wonderful. This is just the greatest web page on the entire Internet really, if you think about it.
-
36:00
The way I got the Chrome inspector to come up,
-
36:05
on a Mac you hit Command Alt I and that will pop up the inspector.
-
36:13
Another way you can do it is by right clicking on the element that you want to inspect,
-
36:18
and then you can say Inspect Element.
-
36:22
I'm not sure what the hotkeys are on Windows.
-
36:26
I think it's something similar, like Control Alt I.
-
36:31
But you can definitely look it up just by Googling for it.
-
36:36
Just Google for Chrome hotkeys or something.
-
36:39
The cool thing about the inspector is that you can actually click on this little magnifying glass here
-
36:44
and you can highlight each individual element that you want to inspect.
-
36:48
So I can say, "Whoa, there's a list item," or something like that.
-
36:54
If we wanted to take this wrapper here and hack our own styles on top, we can do that.
-
36:59
This will just do this within my browser.
-
37:02
This actually isn't going to affect the Pen in any way or affect any website that you do this to,
-
37:08
so nobody else will actually see your hacking.
-
37:10
But let's go ahead and just change the background here.
-
37:16
I'm going to say background-image. Oh. What's going on here in HipChat?
-
37:25
Is that just another question? Oh, okay. Yeah. We'll get to that.
-
37:30
So we'll say background: orange; and as you can see, you can actually change the background color here.
-
37:38
I could go crazy. I could add in an animation and do all sorts of fun stuff there.
-
37:46
Actually, let's see if that works.
-
37:48
We'll say animation, and I think we do need to use prefixes here since we're not using—
-
37:54
Well, I don't know. Hmm. I don't know how Prefix Free actually works. Maybe we could get away with it.
-
38:03
But we're going to add the prefix.
-
38:05
We'll say webkit-animation: chase for 1 second infinite, and that should do it.
-
38:15
Oh yeah, okay. It's kind of hard to tell, but it is actually adding a box-shadow to the image.
-
38:24
But that's pretty much how the inspector works. It's pretty cool.
-
38:27
If you've never used it before, there's a bunch of other different tabs here that do all sorts of cool stuff.
-
38:33
Let's jump back into the chat here.
-
38:38
We have another question that says, "Someone mentioned that the bulb highlight is in different spots on different sides."
-
38:45
You are correct. Very observant.
-
38:48
We flipped these around, but we never actually flipped the highlight.
-
38:53
So let's go ahead and fix that right now.
-
38:56
We can jump into our Pen here.
-
39:01
All that means is that we need to adjust the selector that we're using.
-
39:08
We have li:before but we need to just change the top and right values—
-
39:17
well, actually the positioning values.
-
39:20
Let me grab that.
-
39:22
We only need to do this on bottom and left.
-
39:27
For bottom we'll say before, and let's just see if that selector is actually working.
-
39:40
Yes, it is. Look at that. We're selecting those appropriately.
-
39:46
Then we need to change this to be, I think, left and bottom. Oh gosh.
-
39:58
Okay. You know what? I think we need to zero out top and right.
-
40:06
Will that work, or do we actually need to make another whole selector there?
-
40:09
Huh. No. That's doing something.
-
40:12
Bottom? Top? I'm not really sure.
-
40:21
I do know that we could do this rather explicitly by just grabbing the selector.
-
40:27
You know what? Nah, actually, I'm not going to mess with that.
-
40:30
But you get the idea. You could select those separately and position them appropriately.
-
40:37
I'm not going to do that. We're just going to leave it as is.
-
40:40
We don't want to change Andrew at all here.
-
40:44
Let's hop back into the chat here and answer some more questions.
-
40:49
Let's see. "Someone asked what specs you're running."
-
40:54
I'm going to say About This Mac.
-
40:57
You can see I have a 2.6 GHz Intel Core I7.
-
41:03
I have 16 GB of RAM. It's on a solid state hard drive, not that that really matters a whole lot for what we were doing today.
-
41:12
I think there's a pretty nice graphics card in here as well.
-
41:16
Pretty fancy MacBook Pro Retina display.
-
41:22
"Do you have any formal web dev qualifications, or do you think self-taught is the way to go?"
-
41:28
Whoa, we're getting into some deep philosophy here.
-
41:32
I have a little bit of formal training through my university.
-
41:37
I went to the University of Central Florida and got a degree in digital media.
-
41:42
I don't think it was tremendously valuable.
-
41:45
It didn't really do a whole lot for my web design or web development training.
-
41:52
Most of what I know is self-taught just through experimentation
-
41:57
and just doing stuff exactly like you saw today, just basically trying things out,
-
42:01
seeing what works and just kind of going through the thought process.
-
42:05
You can even talk out loud to yourself if you want.
-
42:09
Next question is, "Can you please give us a nice course going deeper into HTML5 structure and semantics?"
-
42:18
Sure. If you head over to TeamTreehouse.com, there's a whole bunch of stuff there.
-
42:24
We are doing a lot more with HTML5, teaching structure and semantics.
-
42:27
In fact, I am going to be making a new course pretty soon that will get a little bit more into that.
-
42:34
Yeah, we'll definitely do more stuff in depth on that in the future.
-
42:39
Next question is, "What if you wanted to see it in Internet Explorer?"
-
42:42
"Do you have a preferred tool for that?"
-
42:46
First of all, this demo will not work in Internet Explorer, at least I don't think.
-
42:51
I'm trying to think. Is there anything that wouldn't work in there?
-
42:54
I know box-shadow works in the latest versions of Internet Explorer.
-
42:57
You should be able to do the transforms.
-
42:59
And I think animations work just fine.
-
43:03
So actually, it might look just fine in the latest versions. I'm not totally 100% sure.
-
43:09
If we wanted to test that out, there's a number of different ways we could do it.
-
43:12
We could use a service like Browsershots.
-
43:16
I think it's at Browsershots.com. Maybe not.
-
43:22
Browsershots. Oh. No, no, no, no. Excuse me. That is one service, Browsershots.
-
43:28
I meant to say BrowserStack. This one is super-duper cool.
-
43:33
You can actually get screenshots from a ton of different browsers.
-
43:40
Yeah, so if you bring up screenshots here, you can actually get screenshots off of any of these browsers on any operating system,
-
43:47
any different version you want. It's pretty incredible.
-
43:51
Another way to do this would be to actually use something like Parallels or Boot Camp.
-
43:59
You could just load Windows straight onto your Mac.
-
44:05
I'm going to jump back to the chat here and see if there's any other good questions.
-
44:14
Sarah says, "Learning CSS3 first feels awkward to me. Would love more HTML5."
-
44:24
Yeah. I mean, you should really learn HTML before you jump into CSS.
-
44:30
Having good structure and semantics is a great way to build an awesome website.
-
44:37
There's a lot of things it's going to do for you.
-
44:41
I'm not going to go into the specifics here, but basically, you want to create the structure of your web page using HTML
-
44:47
and then you want to style it using CSS.
-
44:50
You want to keep pretty clean separation between those things as much as possible.
-
44:54
And then once you get into JavaScript, you would also want that to be separate as well.
-
44:58
So you have your structural, presentational, and behavioral layers separate from one another,
-
45:03
your HTML, CSS, and JavaScript, respectively.
-
45:06
So the next question says, "I am currently in an HTML5 and CSS3 boot camp for the next 6 weeks."
-
45:14
"What advice would you give someone just stating out?"
-
45:17
Just experiment as much as possible.
-
45:18
Make as many things as you can. That's going to help you so, so much.
-
45:22
You can of course supplement that with actual learning materials.
-
45:27
You could use a service like Treehouse to do that.
-
45:31
But one of the best ways to learn is to just try things out and just make as many mistakes as you can
-
45:37
and don't be afraid to break stuff.
-
45:39
You can also fork things on CodePen, which is pretty cool.
-
45:43
You can fork stuff and then you can safely play around with it and try things out for yourself.
-
45:51
So that's a cool way to learn how to code too.
-
45:54
"How long have you been writing CSS?" Oh my gosh.
-
45:57
We'll try to condense this history lesson.
-
46:00
I actually started making websites when I was about 11 years old. I'm 26 now.
-
46:08
So I've been making websites for a little while.
-
46:12
I actually started writing CSS—gosh, I mean, it's been more than 10 years now.
-
46:19
I don't even really know when the first time I wrote CSS was.
-
46:23
But it was amazing. I'm sure I had my mind completely blown.
-
46:27
Eduardo said, "Treehouse is the only thing I needed to land me a web designer position."
-
46:33
That is super awesome! We actually have a job placement program at Treehouse.
-
46:37
So if you sign up at TeamTreehouse.com, you can train up, unlock badges,
-
46:42
and we'll actually help you get a job. Pretty cool.
-
46:45
We're just going to wrap up here, do a couple more questions.
-
46:50
"Do you prefer to use Chrome browser over all others?" Yes, absolutely.
-
46:55
"The class I'm in prefers Firefox, but I have many friends that say that Chrome is the way to go."
-
47:02
"What is your preference?" You should definitely be using Google Chrome if you're at all interested in web design and development.
-
47:08
You do need to make sure that your website works in other browsers.
-
47:13
For example, the thing I just made today, like I said, probably doesn't work perfectly right away in Internet Explorer.
-
47:20
Maybe it does. I'm not sure. We'd have to test that out.
-
47:23
You do need to make sure that you test in every browser.
-
47:26
But for day-to-day development, lots of people use Chrome.
-
47:30
In fact, lots of people that are not web designers and developers use Chrome.
-
47:34
I think it's the most popular browser in the world at this point.
-
47:37
Definitely worth using. It's super-duper fast. It's just a fantastic browser. I highly recommend it.
-
47:46
The last question we're going to do here is, "I don't know HTML, just not the semantic 5 updates." Okay.
-
47:55
"Curious as to if you use any of the new Adobe programs for web development, like Edge Code, Inspect, or Reflow, and why."
-
48:08
No, I actually don't use any of those programs at all.
-
48:12
I actually prefer to just use—
-
48:16
Well, the text editor that I use day to day is Sublime Text 2.
-
48:21
We use that at Treehouse quite a lot. It's a really great text editor.
-
48:26
It's pretty inexpensive and so it's not too difficult to get started with.
-
48:31
I like a pretty vanilla text editor. I don't like to have something with too many bells and whistles.
-
48:39
So Sublime Text works great for me.
-
48:43
Edge Code, Inspect, and Reflow I haven't played with as much,
-
48:48
but I'm sure they're all great tools to use too.
-
48:53
As long as you're coding all the stuff by hand, so to speak,
-
48:58
or I guess that's kind of the phrase that people use to describe it,
-
49:01
as long as you're writing all of the code yourself, then it's totally okay.
-
49:06
And even if you're using generators like the one that I used earlier on to generate the gradient,
-
49:13
as long as you understand what's going on there, it's totally okay to use stuff like that
-
49:17
because it actually just speeds up your workflow.
-
49:19
You're able to create a gradient really quickly, and then you can just go ahead and make adjustments as needed.
-
49:27
I prefer to work that way.
-
49:29
I'm sure there's going to be a lot of up-and-coming web designers and developers
-
49:32
that will prefer to use those other tools,
-
49:36
but you should try to code by hand as much as you can.
-
49:40
So that's pretty much it.
-
49:43
This was just a Livestream test. Hopefully you all enjoyed it.
-
49:48
We may do more stuff like this in the future.
-
49:50
But if you'd like to learn more about web design, web development, mobile, business, and so much more,
-
49:56
be sure to check us out at TeamTreehouse.com.
-
49:59
I'm Nick Pettit. I'm @nickrp on Twitter.
-
50:02
Thanks so much for watching, and we'll see you real soon.
You need to sign up for Treehouse in order to download course files.
Sign up