Preview
Video Player
00:00
00:00
CSS Gradients: Color Stops and Transparency
5:34With linear and radial gradients, we're able to add what are called color stops to control the progression of colors in a gradient. Color stops are stopping points in a gradient that show a specific color at the exact location we define. So they let us create more complex gradient effects.
With linear and radial gradients
we're able to add what are called
0:00
the color stops to control
the progression of colors in a gradient.
0:05
Color stops are stopping
points in a gradient that show
0:10
a specific color at the exact
location we define.
0:15
So, they let us create more
complex gradient effects.
0:19
Currently, the linear gradient in our
.callout class has two color stops.
0:24
The orange color stop at the beginning,
and the papayawhip color stop at the end.
0:29
To add a third color stop, we can start
by simply adding another color name or
0:35
hex value to our gradient colors.
0:40
For example, what if we wanted our
orange hex value to transition
0:43
to firebrick red before
transitioning to papayawhip.
0:48
We haven't specified any color
stop position values just yet.
0:55
So, the browser places
the firebrick color exactly
1:01
halfway between the orange and
the papayawhip.
1:05
CSS gives us the ability to control
exactly where our color stops land.
1:09
We just need to type percentage
values after each color stop.
1:15
So far what we typed matches the default,
but let's try some different numbers.
1:26
If we change the number
next to firebrick to 25%.
1:32
We'll see pure firebrick red 25%
of the way through the gradient.
1:36
Then the colors will
transition from firebrick to
1:42
papayawhip the rest of the way.
1:46
There's no rule stating that our gradient
needs to start at 0% or finish at 100%.
1:49
If we change the papayawhip
color stop to 60%.
1:56
Now the gradient
transitions to papayawhip,
2:01
60% of the way through the shape.
2:05
And remains papayawhip
colored the rest of the way.
2:07
And our color stops to work no matter
what direction the gradient is rotated.
2:12
If we delete the degree value,
for example.
2:19
The gradient returns to its
top to bottom direction but
2:23
the color stops function
the same as before.
2:28
We can create a dramatic glass like
effect by positioning one color
2:33
stop immediately after another.
2:38
I'm going to replace my gradient
values with four colors.
2:40
Notice that I've included color
stops at both 50 and 51%.
2:58
The colors transition
gently from 0% to 50%.
3:04
Then jump immediately to
a different color at 51% before
3:09
starting another gradual
transition to 100%.
3:14
We can add even more shine to this
gradient by comma separating two or
3:23
more gradients.
3:28
The gradient listed first will by default
cover the original gradient listed second.
3:44
So, for
now I'm only seeing my new gradient.
3:50
However, what happens if we use RGBA
values rather than color names?
3:54
Our gradient will include transparency
4:00
And now we see a subtle lighting effect
caused by combining two gradients.
4:23
One that uses transparency
layered over one that
4:29
doesn't plus our box shadow
from an earlier video.
4:33
Fun stuff, right.
4:38
That last gradient declaration
probably looked a little complicated.
4:40
But it's worth a reminder that
the most critical part of gradients
4:46
isn't memorizing hex values or
all the parts of the syntax.
4:51
To succeed in working with CSS gradients,
it's enough to understand
4:55
which values control gradient
direction and color stops.
5:00
And to apply your knowledge of CSS
colors from earlier courses and videos.
5:04
And of course,
keep on referring to documentation
5:11
from sources like MDN and CSS Tricks.
5:16
In our last video, we'll improve
the spacing of our Lake Tahoe page for
5:19
better legibility, and
add CSS media queries to make it look
5:25
just as effective on a large
screen as it does on mobile.
5:30