Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We’ve reached the final stage of Enhancing Design with CSS, and our Lake Tahoe website looks pretty appealing, at least on mobile screens. For the remaining stage, our focus will be attention to detail, since small details are what separate a good online experience from a great one. Let’s start by making our buttons stand out a bit more and invite a few more clicks. We’ll do so by applying CSS gradients, a feature I hinted at in the last stage but didn’t dive into.
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
We've reached the final stage
of Enhancing Design with CSS.
0:04
And our Lake Tahoe website looks pretty
appealing, at least on mobile screens.
0:09
For the remaining stage,
our focus will be attention to detail.
0:15
Since small details are what separate
a good online experience from a great one.
0:19
Let's start by making our buttons
stand out a bit more, and
0:26
invite a few more clicks.
0:30
We'll do so by applying CSS gradients,
0:32
a feature I hinted at in the last stage,
but didn't dive into.
0:35
With CSS gradients, we can add depth
to our designs by creating smooth and
0:41
gradual transitions between two or
more colors.
0:48
A gradient is not exactly
a real CSS color.
0:52
It's actually an image, except instead of
loading an image file from a web server.
0:57
The browser uses color to create
a gradient image to fill an HTML element.
1:03
This is why CSS gradients are created
using the background-image property.
1:09
The size of a gradient by default matches
the size of the element it's applied to.
1:16
So, if we apply a vertical gradient,
1:22
transitioning from green to yellow,
to our website header.
1:25
The height of our gradient will by default
match the height of our header element.
1:29
The most common gradients in CSS
are linear gradients in which
1:36
colors flow in a straight line,
in a single direction.
1:41
And radial gradients, in which
the gradient starts at a single point.
1:45
And emanates outward in a circular or
elliptical shape.
1:50
The most prominent links on our Lake Tahoe
website have the 'callout' class
1:56
applied to them.
2:01
These buttons currently use
a simple orange background color.
2:02
But let's see if we can
change that to a gradient.
2:07
We'll start with a simple radial
gradient that transitions
2:11
from that same orange
to a papayawhip color.
2:16
The gradient starts in the center
using our darker orange color.
2:35
And transitions gradually to the
papayawhip color by the time it reaches
2:39
the edges of our button shape.
2:44
If we try making our buttons taller
by increasing the amount of padding.
2:46
The gradient adjusts automatically
to fill the new shape of the button.
2:55
These buttons are probably too tall now,
so I'll undo that before moving on.
2:59
By default the radial gradient is
in the shape of an ellipse, but
3:06
we can add a keyword called circle to
give the gradient a more circular shape.
3:11
Radial gradients don't have to
start at the default center.
3:25
We can use the 'at' keyword to start
the gradient from the top right corner for
3:29
example.
3:34
How about a linear gradient?
3:45
Let's try changing the value of
our background-image property to
3:47
linear-gradient.
3:51
We'll delete the keywords here,
since circle doesn't make much sense for
3:56
a linear gradient.
4:01
By default, the linear gradient
matches the height of our button and
4:08
transitions in a straight line
from the top to the bottom.
4:12
To change the direction of
the gradient's transition.
4:16
We can apply keywords such
as to top which will make
4:20
the gradient transition
from bottom to top.
4:24
Or if you prefer a horizontal gradient,
4:36
to right will make the gradient
transition from left to right.
4:39
For more control of
the gradient direction,
4:50
we can define angle values
using degree units.
4:54
The angle parameters rotate clockwise,
so the value 0deg,
4:57
creates a gradient starting
from the bottom to the top.
5:03
It's the same as using the to top value.
5:07
Watch that you don't type a space
between the number and the measurement.
5:16
The angle directions then
continue rotating clockwise,
5:23
unless we define a negative angle value.
5:27
So, 30deg would start closer
to the bottom left corner and
5:30
transition to the upper right.
5:34
-30deg on the other hand,
would start closer
5:40
to the bottom right corner and
transition to the top left.
5:45
So, those are the basics of working
with CSS gradients except that
5:55
we've only transitioned
between two solid colors.
6:00
What if you wanted to
involve a third color?
6:04
Or add a degree of transparency
to our gradient colors?
6:07
We'll learn these advanced CSS
gradient techniques in our next video.
6:12
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