Welcome back once again in this lesson I’m going to cover another cool property and CSS called CSS Box shadow.
This box had a property might remind you of another property in CSS that we have covered within the
tax properties called Tech shadow and this tech shadow property lets us add nice shadow effect as we
can see that this yellow shadow for this by text is obtained through the tech shadow property and us
can simply add that property using the tech shadow.
And we have a couple of different options that we can add the shadow and we shadow are important and
they are not optional.
The HMO is for horizontal positioning of the shadow.
We shadow is for vertical positioning and then we have the blow radius to specify how sharp or how blurred
the image should be.
So a value of zero is the default value which is a very sharp shadow and of value greater than 0 pixels
is what makes it more and more blurred.
And then we can also specify the color of the shadow.
And that’s also optional.
So we have these two optional attributes.
So we have a similar kind of property for the bulk shadow.
And there we have that.
So the only difference between the tech shadow property and the bulk shadow property is that detect
shadow applies only to the text and the bulk shadow property applies to the elements.
And here we can see that this box-shadow property adds some shadow to the boxes over here.
And in this case, we have a paragraph and a diff container and clearly we can see that this box-shadow
properties do kind of add some nice shadow effect nice 3D effect because they kind of look a little
bit elevated a little bit closer to us and there’s a kind of a depth that is felt when there’s a shadow
around especially behind the element and we can compare that with this two-dimensional paragraph element
this one looks more alive more lively we can add this box-shadow again using the box-shadow property
here we have each offset and we offset again for horizontal and vertical positioning and then we have
the block radius again to specify how sharp or blurred the image should be.
And then we have another additional property which is again optional which is the spread radius and
this one helps us control the size of the shadow a larger value of spread radius will definitely increase
the size of the shadow a lower value will reduce the size of the shadow.
This is an added value option that we do not get in the tech shadow property.
So that’s one difference.
And then we also have the color option which can be optional.
So this was a brief introduction.
Let’s now see life on the website.
And today I would like to introduce one very nice online text editor.
That’s quite convenient when we want to just test out our code and that website is called pen dot IO
and it’s free to use and all we have to do is first visit this website called Pandora IO and then click
on this option that says create a pen.
And when we click on it kind of creates a pen for us.
Now there’s a little too if you want to go through that anyways I’m going to be taking you through this
so I can just simply click here.
I would rather not take the two right now and we get three windows HDMI LCROSS and Jesus Jesus stands
so it’s for that.
I show you an interesting option that we get which is this change for option.
So when I click on this change you.
And we have three options the default one is this pane where the windows are on the top and at the bottom
we are going to be seeing the output if I click on this one then we’ll have the windows on the left
and the showcase area on the right or we can switch to this view whichever is your preference you can
choose that and here we don’t really have to start with all dog type and all and we don’t even have
to save a file whatever we are going to be typing here is gonna be previewed life on the showcase area.
So that’s why it’s very quick and very very suitable for just practicing some code so I just wanted
to introduce it to you so that when you want to practice especially while watching these videos that
I’m showing you can simply open this Web site on in one of the taps and then you can practice at the
So just to give you a quick demo let’s say I add a dev container over here and I don’t have anything
inside so we don’t get to see anything in the showcase area right now but let’s say I add something
inside let’s say hello and we can see that Hello written overshare without even us having to save the
document or refresh any web page.
So that’s quite good.
So let’s remove that for now.
I just want to show you how it looks.
Now if you’re I’m going to target that div element and in fact, let’s create two div containers so that
we can also see the difference.
And here I am going to target the second Div I can target using the studio class and it child and then
I can target the second element I first want to set a vote for this def container to let’s say 250 pixels
and then let’s also set the height as 250 pixels and then I am also going to set some background-color
and let’s choose Dodger blue for this example and see as I’m typing I can see the results over here.
This is again another advantage because sometimes when we are writing the code each and every step will
be highlighted on the right.
So we can actually see what step leads to what result and when we are writing the code all at once sometimes
we have the habit of typing four or five properties at the same time.
You can see each and every step right here on the right.
So here we have the def container and let us also target the body element to give some background-color
to the body as well.
This way the depth of the shadow will be much clearer.
And here I am going to set up a background color of let’s say a gray color or maybe light gray so now
it’s OK and then I’m going to add the bulk shadow property and the first thing that we have to use is
So let’s use maybe let’s set it to five pixels and we don’t see anything because we have at least two
One is the age of said second is the GOP act so let’s set we offset as for pixels nowhere immediately
we can see that so it also shows us that the other options are optional.
Because as soon as we type the two values we can see the result overshare.
So the default color is black and the default border-radius is zero.
We know that and default borders spread is also zero.
So that’s why we see that.
Now if you want to add the total value which is the border-radius.
So let’s make it for instance 10 pixels.
And now it’s gonna get blurred as we can see here.
And if I increase the size of this background let’s say so I’m not talking about the spread radius so
let’s set the spread radius as two pixels and we see that the size has increased.
And if I make it let’s say four pixels then you can see the sizes even more.
That makes it 10 pixels then it’s even more.
We can also provide negative values minus two pixels and this kind of reduces the size of the shadow
if I just don’t add anything.
Then we can see the sizes slightly bigger than what we have over overshared and then we can also choose
the color for sure so let’s say we want to set the color as may be light grey.
Again what likely is going to be the same as the body.
So let’s rather add maybe a yellow color but yellow wouldn’t really look like a shadow to us.
So let’s rather use dark slate gray and that’s kind of lighter than the black color but it looks nice.
Now we can change the values in order to increase or reduce the depth of this shadow so let’s say I
increase though the actual value as maybe eight pixels and then the value as let’s say 10 pixels.
This kind of looks better.
Or if I make it let’s say 15 pixels it’s even better it looks even more elevated and we can also provide
So if I make it negative 15 pixels then it goes all the way up.
And then if I also make this one in negative eight pixels then the shadow has shifted to the left side.
And if I make it let’s say a positive 15 pixels then we have the combination of negative and positive
values as well.
And we can see order to make the changes even more visible.
That set the margin-left to maybe 10 pixels
and we have this margin-left or maybe 20 pixels Now it’s shifted a little towards the right and we can
see that now in order to make this effect look even better.
Or let us now target our div element as well.
And I’m gonna get some give some default values to it including the background color.
So just add this control C and control we once again.
Let me just close it with a closing angle bracket and let’s make this value 1.
Now we have the other div as well so we can provide some margin for this let’s say margin-bottom for
this div I’m gonna set to maybe 20 pixels and now we have some margin overs here.
So clearly we can see that this div is looking much better than this one.
This is a flat 1 and now in order to make this effect coming out even better let’s copy this and then
I am going to target the div once again.
So I write div and it child and again the second Div I am targeting and I set a whole effect for that
and paste this box-shadow.
So now we still have the box-shadow ratio.
Let’s comment it out.
And now we don’t have any black shadow but as soon as we hover over it we see the box-shadow again.
We haven’t really provided any transition property to it but this is something that we are going to
be covering later which kind of adds more to this effect and we can actually see this in action in motion
to move the negative value from here.
So this is about adding the box-shadow and you can play around with different values.
We will be adding this box-shadow later as well in our website projects and then you will get to see
in action how they look and what difference do they make on the website.
But meanwhile, you can practice on this Ed or maybe on your text editor and see what are the different
values and what are the different styles you can create so that was about the box-shadow.
See you in the next lesson.
Also, Read –