Box Shadow Property In CSS

Box Shadow

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.

Box Shadow
Box 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

for JavaScript.

So usually when we are designing the user interface of the Web site we add some javascript code as well

so it’s for that.

We are not gonna be adding the javascript, for now, we can minimize this window but before that let

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

same time.

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

each offset.

So let’s use maybe let’s set it to five pixels and we don’t see anything because we have at least two

compulsory values.

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

negative values.

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 –

Leave a Reply

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