CSS Tutorial for Beginners - 59 - text shadow Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we are going to continue
on with effects in CS s now css3
allows you to add shadow to text and two
elements in this video we are going to
learn how to add shadow to the text in
our webpage and in the next video we
will learn how to add shadow to our
elements using the Box shadow property
but again in this video we're going to
deal with the text shadow property so
you can see here I just have two simple
paragraphs with text and you can see
them over here in the browser and so
we're going to add some shadow to these
and actually we don't really need to see
the HTML anymore so let's just go ahead
and close this out and let's just move
our stylesheet over here and then let's
go ahead and make our browser very very
large there we go okay and actually you
know what let's make it a little bit
larger so we can see everything nice and
easy okay there we go
okay so let's work against this first
paragraph and of course we're using an
ID selector of text 1 so we've got the
text pretty large here we've made it 60
pixels and let's go ahead and we're
going to now add the text shadow
property so we just use text - shadow
that's all we need to do and then we're
going to put in three values and I'll
explain these in a minute so we're going
to say three pixels here we're going to
say three pixels here and then we're
going to specify the color of the shadow
that we want which is orange that's what
we'll use for now now these first two
represent the horizontal and vertical
aspects of the shadow so the first one
actually is the horizontal part of the
shadow and this second one is the
vertical part of the shadow usually you
keep these the same but you can actually
alter them if you want but usually they
are the same so that's we're going to do
here we're going to make the size 3
pixels for both and then of course the
color of the shadow we specify here and
again that is orange so let's go ahead
and save this let's refresh our page and
there you can see we've got some shadow
now behind our black text looks pretty
cool doesn't it but it doesn't stop
there we can actually add a nice blur
effect to our shadow and we do that in
this third spot here so we can specify
again a pixel size for that and let's
make it 5 pixels so again this third
spot right here is
if you want to add this blur effect to
the text shadow so let's go ahead and
save this will refresh our page in there
you can see we've got some blur now if
you really want to increase the size of
it let's actually make this 20 pixels
and we'll save this let's go ahead and
refresh our page and there you can see
the blur effect now is much larger now
what if you want to add multiple shadows
well you can do that you can add as many
as you want so actually before we do
that let's set this back to 5 pixels and
in order to add another shadow effect we
need to put a comma here and then let's
just go ahead and copy and paste this
right below and we'll just align this up
and now here is where we put the
semicolon so we'll put that right there
so again we just add a comma if you want
to add multiple shadows now let's go
ahead and change the color we'll make
this blue and let's make this one a
little bit larger sometimes you want to
do that if you're adding a second shadow
so we'll set this at 6 pixels 6 pixels
and for the blur we'll give it 10 pixels
so let's go ahead and save this and
we'll refresh our page and there you can
see we've actually got two shadows
pretty cool now what if we wanted to add
some transparency to our shadow well we
can actually do that so we'll actually
do that in this bottom paragraph here so
let me go ahead and copy and paste what
I have here so far and actually let's
realign this a little bit so all of our
CSS fits here there we go
so again we're going to use a text
shadow property but instead this time
we're going to use this RGB a function
remember we use that in the last video
yes you will remember it's red green
blue and of course this fourth parameter
of course is the opacity that's where we
can specify our opacity value so we're
going to use blue but then we're going
to add the opacity so let's go ahead and
use blue and it is zero zero and 255 so
we need to put 255 right here and then
let's go ahead and specify what value we
want for the opacity and let's just set
that at the halfway mark and then let's
go ahead and save this will refresh our
page and there you can see
let's go ahead and we'll bump it down a
little bit let's give this let's set
this to zero point three and there you
can see it even has more transparency so
that's how you use opacity with the text
shadow property okay that's going to do
it for this video I will see you guys in
the next video