CSS Tutorial for Beginners - 58 - Let's combine opacity and gradient Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in the last couple of videos we've
talked about opacity and gradients and
we're actually going to combine those
two in this lecture so we're going to
create a neat effect where we're using
both transparency and we're using
gradients so you can see here I've
created just a very simple div we just
have a box here and that's we're going
to create this nice effect that will
contain opacity and a gradient we can
close this out because we need a little
bit more room here a little bit more
space so yeah we'll save this and then
let's just go ahead and drag this over
here close this out and give us a little
more space to operate here now you'll
notice that we're using some of the same
code from the last lecture we're going
to go ahead and use the background
property and we're going to use this
linear gradient function that has not
changed and we're also going to keep the
default color blue which you can see
right here if nothing is in our linear
gradient background of course nothing is
right now so that's why it's defaulting
to blue now we don't actually have to
use the opacity property here we can
just use this RGB a color value and I'll
explain where we put the opacity
parameter in a minute but basically this
stands for red green blue and alpha and
it is actually this fourth spot right
here which contains the Alpha parameter
now that just means opacity that's
basically where we're going to specify
the opacity that we want and it's the
same that we talked about a few videos
ago it's zero point zero two one point
zero and remember zero point zero is
fully transparent and basically one
point zero has no transparency you'll
see the color 100% and you will also
remember when we talked about RGB way
back when I did that video on colors and
you'll remember there's a red value that
we put in a green value that we would
put right here and a blue value and
we're going to do that here and again
this fourth spot right here is basically
where we want to specify our opacity and
remember we want to colors working
against each other that's why we have
both of these functions right here this
RGB a because we want that gradient
effect but we are also going to add the
opacity again in this fourth spot so
let's go ahead and fill these in
and the first RGB value that we want to
create is blue so that is two
fifty-five to 55 and zero and here again
is where we specify our opacity and in
this case we're just going to make this
zero point zero so this will be
completely transparent and now we want
to go ahead and add yellow so it's
actually zero zero and 255 that will
give us pure yellow if you actually
looked at RGB value up that's what it
would be if you went out to Google or
something and let's go ahead and give
this a complete value of one so we'll
give this the highest setting and let's
go ahead and save this now let's refresh
our page and there you can see and you
know I'm sorry I this was actually blue
and this is yellow I actually messed
that up sorry when I wrote my notes down
here I got these two switched so again
this is yellow now you'll notice that
this color is first and of course
remember it goes in a top-down order
just like we talked about in the last
video with gradients so this will be on
the top and again because we made this
completely transparent nothing will show
here that's why we don't see any yellow
but as the gradient goes down farther it
becomes completely blue so let's go
ahead and let's actually add a little
bit of yellow to this now so let's
actually set this to zero point three so
let's go ahead and save this well
refresh it now you can see some of that
yellow is now coming through it's not
completely transparent so I think you
get a good idea that works and look now
we're using everything we're combining
opacity gradients all in one nice neat
little effect here now as we were doing
in the last video you can actually start
switching these directions up so
remember we did that too right so let's
go ahead and put in two right and we'll
go ahead and save this we'll hit refresh
and there you can see so that is how
this works I will see you guys in the
next video