Hello, in this CSS Crash Course video, we're going to be looking at shadows. pretty self explanatory by the name. It allows you to add a shadow to something in this case it is going to be an element, that's what you would add it to also want to show you how to add a shadow to test flow which is called a text shadow. So first of all, what we're going to do is create a div with an ID of box shadow. So idea we didn't Menaka gonna play anything, we're gonna style this on CSS file, I'm gonna put hash box shadow. And the code for this is going to be quite far from 12 pixels, the actual height and the width and Pretty much all the properties ball box shadow, you can change as you want, it could be an image inside.
This is just to actually help demonstrate the box shadow, which is the first one we'll show you. So put a width of 512 pixels per margin of 50 pixels, so it's just a bit away from the edges for a background color of red. And let's save that and see our result before we add a shadow. To refresh. We've got this square, no shadow at the moment. And now to add the shadow you do box, dash shadow and you put colon and then you put the actual areas that you want to add a shadow to fly much 10 pixel 20 pixels, three pixels, one pixel and now you put the color value Gonna put a gray in hexadecimal for save that refresh.
And you can see we now have our shadow. So beyond that there's not much more to it really, you can modify these values accordingly. Use negative numbers to achieve different results or recommend doing that. Seeing what you can achieve is a great way of learning. But we're also going to show you an inner shadow. So what we'll do is copy and paste this.
Rename this to Inner Shadow. Again, we're not gonna have any text or anything inside here, the index dot CSS, we'll just duplicate this, rename this to enter. The other thing we want to change the box shadow, and what we'll actually do is changes to insect our position Row 07 pixels, five pixels per value, hash DDD refresh, if we go in, we now have an inset shadow where the shadow is going in instead of going act. So that's the way you will do lucky in a shadow. And finally, let's add some text or create another div, div. Id of text, Shadow, text any output Hello, world, keep it simple.
And the index CSS just put text shadow for the identifier and no one's gonna put a margin of 100 pixels again just so away from anything Figure out the edges and your div, one upper font size of four m, four, we actually add the shadow. I'm just going to refresh this so you can see what we've got before a shadow is added. And now we have a shadow. So you feel protected text shadow box shadow is a text shadow. Now you just put your value on 10 pixels 10 pixels, two pixels, and then value of red. So hash FF, there was 000.
As you can see, we now have a duck shadow, we could reduce the knees slightly. So for one, it's a little closer, in all fairness looks a lot better. even reduce it further. We could put something like a three three. Yeah, that's looking pretty good. Now before was the separation was a little too much.
But that text shadows, we showed no shadows and just regular box shadows. Very simple stuff very very effective. If you have any questions, feel free to ask feel free to post them on our education platforms on our learning Dakota UK. There will be a resource link with this video, which will be for our GitHub page which will show you all the source code from every video in this series. And as usual, thank you for watching and I hope you have a great day.