CSS3 Box-shadow effect – how to use box shadow in css

CSS3 Box-shadow effect – how to use box shadow in css


[Music….] In the next case we will be now discussing
about the box Shadow property. In doing so the very first thing that we need
to understand here that a box Shadow property it practically accept some particular values
but before that I would like to mention here that in our previous tutorial where we had
defined about CSS filter property, there we had discussed about the filter property of
drop shadow; and I would like to say here that this drop Shadow property, it is same
as in case of this box Shadow property. In addition if instead of using this filter
property of drop shadow, if we now use here box shadow, then the advantage that it takes
over here is that it accepts the fourth parameter that we had missed in our filter property
of drop shadow. So let me explain. In the first case we need to provide this
particular syntax of box shadow. So if we provide here box shadow and we will
be providing here this horizontal dimension of this box shadow. In the next case we will be providing here
the vertical direction of this box shadow. The amount of blurriness; how much blur we
want to appear for this particular box-shadow property; so we will provide here 20px, or
we may provide here 10px; but this practically determines the amount of blurriness. In the next case we will be putting some particular
color code over here; so we may put here the hex color code, or instead of putting some
hex color code, we may put here the RGBA value; so we will be observing both of them but in
the first case all we are going to do we are putting some particular hex color code over
here. Now if we press Control + s, get back to our
project and reload we can see that this is practically the output and here comes the
box Shadow property. Now if we just put a negative value in case
of this horizontal direction and if we reload then we can see that it comes over here. In the next case if instead of putting a negative
value to the horizontal direction, if we put over here a negative value for this vertical
direction, if we get back to our project and reload we can see that this vertical shadow
direction is on the top of the box but in case of a positive value it was accepting
it downward. In the next case if instead of using this
hex color code we use here this RGBA value, for say we are using this black color here,
so all we are now going to do we are putting 0, 0, 0 and 0.3. So what will be the output? Let’s get back to our project and reload and
we can see that this color of this particular box-shadow property is now getting faded out. So this is what exactly the advantage of using
RGBA value over its particular hex color code value. If we use this particular RGBA value, we can
set the opacity of this particular box-shadow and we can set the value accordingly, as per
the need of our project. But right now we won’t be using this particular
value as we have to discuss a lot about some other properties; so we will be reverting
back to our hex color code and here it goes. In the next case for this fourth parameter
it practically determine the amount of spreading of this particular blurriness property. It is an optional value. So if we put here 30px, that means that up
to this 30px radial it will be spreading over. Now if we revert back to our project and reload
we can see that this is the exact output that we are observing right over here. That means, it is practically spreading the
blurriness of this particular box-shadow property to a value of 30px. Now, this is an optional value as we had seen
in our previous case in the case of this drop Shadow property. It wasn’t practically accepting this fourth
parameter but in this case we can see that it is accepting. So in this particular value, it practically
depends upon your need; whether you need it or you don’t so it is an optional value and
you may use it or not. Currently we won’t be using it here, we will
be restricting it ourselves with in this particular three parameters, right over here. So this is the horizontal value, this is the
vertical value and this practically is the amount of blurriness. And this is the hex color code. And of course in this case too we will be
needing some hack codes; so we are going to copy this thing and we are going to paste
it right over here. So we are copying this property and here again
we will be pasting it four more Times; we have provided this Mozilla Firefox so we will
be providing here this is webkit; then we will be providing here this particular Opera
and for this particular IE hack code. We are all set now to set for our next project;
it is the text shadow. But in that case all we will be needing we
will be needing some particular paragraph elements over here…..

Leave a Reply

Your email address will not be published. Required fields are marked *