Hello guys. Welcome to our CSS series. In our last segment we saw CSS colours. How we can add colour with RGB, HSL and with the name. And the most important, how we can add colour with hexadecimal. Along with that we had also seen the way to add transparency. So, in total we have seen seven ways through which we can add colours. I hope you have tried the colour adding techniques through CSS, you have tried it on your own and practiced it. We will go ahead with our today's session which is about box shadow and text shadow. First of all, what is box shadow? So, in box shadow, whichever is our element, we give a shadow effect to the element. So, basically how we can generate the box shadow, means only horizontal, vertical offset. After that giving blur, then spread we have already covered this in our earlier segment. But today we will check in depth in box shadows, in which are the other properties that we can add and we can generate required results. So first of all, it is used to add shadow like effects around the frame of an element, whichever is our element, for example heading tag or table, to get a shadow effect behind that element we make use of box shadow CSS. Like it is shown in the syntax, horizontal offset, so first value which is there, which we normally pass in pixels. So, the first value shows horizontal offset, means horizontally, means in x axis how much shadow do we require. Second value is V offset. How much shadow do we require vertically? Then comes blur, meaning how much is the opacity of the shadow that we want to keep. How blurry do we want to make it? Then comes spread. How much do we have to spread it? How much area do we want it to cover with the help of the shadow? Then comes the colour, we have used the colour before. Today we will even check the colour. If you want to generate any colour shadow, we will do it today. After colour there is something called inset, inherit, initial and none like properties, which makes the shadow more eye-catching and use it for proper look and feel. So, this will we see through the practical. Along with that we will also see a text shadow, that in the text shadow also we will cover the same thing, like it is there in the box shadow. Same thing happens in text shadows. Like it is written here that it adds shadows to the text. It means that when we will use any text not an element, it means we will not give it to the p tag, but inside the p tag the text that is there. To that our text shadow effect will be added. If we want to give it to the p tag, we have to give a box shadow effect. So, if you want to give shadow to any of the elements, we have to use box shadow, if we want to give the shadow to the text inside. In that case, we use text shadows. It accepts the comma separated list of shadows that applies to the text. Means we can pass comma separated and we can give it without comma as well. Both are the possibilities. It’s default property is none. Till today we have not seen text shadow being added by default, in any segment, in which we have added any content or element. In that there is never a shadow, we have to always provide it externally. That means that it has it’s default property as none. It applies one or more than one text shadow. Effect on the elements text content. Again, the same thing. On the elemental text shadow will not be applicable, inside the element the text which is there to that only this text shadow will be applicable. Now the syntax for this, in that h shadow which was horizontal in box shadow, same thing is there in this. H Shadow means horizontally how much shadow we require, V shadow means vertically how much shadow we require. Blur Radius is how much blur we want but we are not giving blur, we are giving blur radius. Now here you can see that the spread is not there. How much area we want to cover that is not there but there is a blur radius. After that colour, none, initial, inherit like properties are there. Now in box shadow, text shadow, the values that have been given, we will see what it means. Like it is mentioned here h offset means horizontally how much shadow we require, that we will get with h offset. V offset means vertically how much shadow we require. That we give with the v off set. Then blur, means how much opacity we want to add in our shadow, that we give through blur. Blur is an optional attribute. Spread means how much we want to cover; how much is the size of the shadow. This we give with the spread value. Then colour means which colour shadow we want. Inset, inset in our new properties means that normally the shadow generates outside of the box, but by using inset the shadow can be generated within the box. Means if you consider a box, on any h tag or any table, we have always seen that the shadow is generated behind it outside. If we want to generate such a shadow, in which the shadow is generated internally, in that case we can make use of inset value. Then comes the initial. It is used to set the property of the box shadow to its default value. Means if you're not defining any value, then also it takes initial. When we take an initial it becomes a default value, which means initial is our default, which is system defined, the shadow generally the web page generates, that we can see with the initial. Inherit means inherited from its parents. Means if we have added a child component or element. Whichever is it’s parent class. If we have given shadow to the parent class as well. Whichever is given to the parent, the same inside which is our child class, even its shadow will be generated. Means in one division we have taken any other division. To that division the same shadow property will be applied. Same colour, same h, v offset, same blur, etc. Same box shadow property for the parent will be for the child as well. One div inside another or one element inside another. None, it is the default value that does not include any shadow property. Means we don't want any shadow property; in that case we will use none. Next, we will go ahead with our practicals. So, we'll first generate the box shadow example. In box shadow we have generated different attributes in different types. Like we have taken only three attributes, then four, then we have added the colour. Then we added an inset. We are going to go ahead in this way. So first of all, we will add our Sublime Text, in the Sublime Text example, box shadow property. We will generate style. We will save it. We will save it in the name box shadow.html. In our program box shadow is there. So, this is our program. So, box shadow and here our program will show up. Now, in the box shadow what all we will require. First of all, to generate box shadows, we will generate few divisions in the body. And we will keep giving id or class to each one of them. So, with the help of that id or class or shadow keeps on generating. So, for example, if I'm taking one division and, in that division, I add class. Let’s say in my first slide you can see my first attribute is horizontal, vertical and blur attribute. Means I've added horizontal, vertical and blur here. Let's say I give this class the name hvb, which means horizontal vertical and blur and in this class I will again add one heading tag. We can give h2 or h3, we will give h3. This div shows only h offset, v offset and blur. Now we will access hvb, .hvb, because this is class. Now in this hvb we have to add horizontal, vertical and blur. But our h3 is there. Like this is a division. We wish that even if our division should have one border, our shadow should be properly visible. So before giving it to hvb, we will provide a border to the division, 1 px, solid, this is the colour we have taken. Now in this we will add a little bit of padding as well. Let's say we take 10 pixel padding, save, reload. So here we're getting 10 px padding. And this is our content, which induces, this div shows only, h, v and blur. We will minimise it a little, okay. So, we are getting full width because we have not defined the width for the division. If we want we can do it. Width, 50%. We want all our divisions in the centre, we will text align the body in the centre. Okay. So, our width has come but, in the body, text aligned, the centre has not come. Means in the body, margin, 0, auto property, we will make this in the centre. You have seen that this property is not getting applicable. This is not getting applicable because it will not centre all the content in the body. In the body in the div, there is h3, so our div is not getting centred. If in the body we would have taken directly p. Then our element would have been centre aligned. Now save, reload. So, you can see that our content has moved. Like we have seen, we have removed text align from the body. Because of that our h3, the text content, it’s centre aligned has been removed. So, we will add it again. For better view, text align centre. Now we will provide a box shadow, so let's say our first is our horizontal, vertical and blur. So, box shadow. In h, we will give lets say 5 pixels, in y we will give 10 pixels and blur for example we are giving 10 pixels. Okay. So, you can see that we can see that the shadow is getting generated. Horizontally in 5 pixel space, vertically 10 pixels and blur we are getting around 10 pixels. We can make as much blur as we want. If I want to make it more blur, if I give 50 pixels my blur area increases. So I will keep this 10 itself. It seems to look proper in look. This was our horizontal, vertical and blur offset. If I do the same thing for others, so after my hvb was my spread attribute. If I want to make spread also h, I will make it s. Here question mark and spread attribute. To hvbs, now there is hvbs, now we will make s here. And we will add spread in our property. So, for example for the spread I will take 10 pixels. So, you can see that something is getting overridden with the above shadow. So let's say I will add some margin to this. We have taken margin as auto. So, at a distance of 30 px distance we're getting these two. So, we are getting spread here. Blur means how much is our opacity. Spread means how much pixel size our shadow is getting spread. This is our spread option. Then comes spread, we will add one more. After spread comes our colour. We will add the c attribute, colour. Here is hvbs, we will add c here. Okay. Now, the colour. For example I will take blue or green colours. Now we are getting shadows in colour. We are seeing that a blue colour shadow is getting generated. Now the inset property that was there in it. Now our shadow is from outside. We have to make it inside. Let's say I inset in this class, box inset, this div shows shadow with inset property. In box inset, with the colours we will add inset. Let's say we add yellow. So, you can see that our shadow is getting generated inside. So, all our other shadows were generated outside, instead of that it is getting generated inside. After the inset comes initial, like it was before, same like it. Initial, initial, initial. Okay. Save, reload. So, we are getting this here. Then after insert comes the initial like it was earlier similar to that or that initial, initial, initial save reload. We are getting here in this programme, initially, like we had seen there, the default value of the box shadow gets generated. So, we are not seeing any shadow being generated here. If we do the same thing with none for example, box shadow, none. So, as its name implies, none, none and we will remove all this and write none. Okay. So, below we are getting a new division without any shadow. Here where there is initial property. In the future with code generation, generating a shadow is possible. If we add inside a parent, etc. But initially if the shadow is not there, as per initial the shadow will not be generated here. In none forcefully we are avoiding any box shadow. Means no matter whoever adds the shadow. But because of none, in this division the shadow will not be added. So, all these were the properties of the shadow. We have even covered initial and none. Now we will go on text, how to generate text shadows. For that we will generate a new programme, HTML, example text shadow property, in this we have to generate div, but we will save it first, text shadow.html. So, our program is running, text shadow. So, now for text shadow we need text. So, we will remove the div from here and take p and in every p we will add CSS in it. For example, first of all is shadow for the text, like it is there in the slide, text shadow. So, first is a simple shadow. So, for simple shadow we will add p, simple shadow, means our shadow is getting generated which is simple shadow. So, we can do this by giving class or we can do inline also. Let’s say here, style, text shadow, in this as we know that there were 3 properties. 3, 3, red means hv and there is no blur in it. There is direct colour in it. So, let's say I will take 3 pixels, 3 pixels, red. We will take the red colour. So, you can see that we are getting shadow effects here. Let's add style, body, text align, centre. So, simple shadow means. Whichever shadow we want to give, it is generated here as it is. So, this is our simple shadow. Next is our fuzzy shadow. So, for a fuzzy shadow what we have to do is we will take the same p in p we will write, F U Z Z Y, fuzzy shadow. For fuzzy we have to generate a class. So, let's say I generate a class here. Shadow- fuzzy. Okay, in this shadow fuzzy, we have to give a fuzzy look. So, we will increase the font size first of all. For example, we will take 30 pixels. For the font the text is centre. So we don't have to add, now we will add text shadows in it. We are keeping a big size, so that we can get proper results. So, for fuzzy we will make 3 pixels, 3 pixels, again 3 pixels, which is the spread and our colour, let's say I'll take it as green. Okay, so this is our fuzzy shadow means we have taken a light colour because of the spread. It is getting a lot of opacity, our shadow is getting spread that is the reason why it is giving a proper look compared to simple shadows, fuzzy shadow is giving a good feel in terms of looks, then comes our multiple shadow, if we want more than one shadows to be generated, for that, like it is mentioned here we will do it. You can see that here, minus values have been used. And plus values also have been used. So for that in p, it’s name is Shadow, multiple font size so we'll take it the same as 30 pixels, we will take text shadow, -3 pixels, -3 pixels. Spread is never minus so 3 pixels. So for this we will take for example green inside and 3 pixel, 3 pixel, 3 pixel, blue. And here we will give multiple shadows. Okay, so you can see that we are getting multiple shadows here. In the green we had given minus values, so we are getting into the northwest direction, we are getting the colour. The normal is south east. In that direction we are getting this purple or the blue shadow which has been generated. This is when we have to generate more than one colour shadow for that is multiple shadow. Then comes the glow effect. Glow effect is very useful. With the glow effect we can generate a good result. So for glow, same firs, we will add p. Glow shadow or we will write glow effect, shadow glow okay. In this I have to give it a glowing effect, my text should glow. Normally when we make certain things glow. Normally we require darkness, in darkness things glow much more. In white ground our glow is not properly visible. So, for this global property we will use the black background. Then after that we will add a text shadow to it. So let's say background colour, in that I will add black and after that I will add text shadow to it, in this I have to select such a colour which will look glowing, for example light green is there or colour like cyan, those are glow light colours. For that I will take cyan colour here along with that for example. I only want to spread it in every direction. So I would give here 0 0, then we had seen font size and then we had seen that the size we can give in pixels, percent and em like values as well. So, today we will give this value in em, so that when our window is resized. The glowing effect text doesn't create any difference that doesn't get misplaced. So we will take 0.1 em value, like I said I will select such a colour which gives a glowing effect. In this also I will require a bigger font size. So let's take it 50 pixels, our text is already in the centre. Okay, so this is my black playground. This is my glow effect, you can see that when I'm highlighting it a slight glow is visible. And this is my colour because we have given only the spread we have given 0 0 x & y can, if I give this 3 pixel, 3 pixel, I will pass, we will see what happens. You can see that the glow of our text is going downwards, meaning it is becoming like a general glow in whichever text is not properly visible. So, in every direction to give a proper result we will keep it 00, so this is our glowing text. Okay. So, this was our text shadow effect, so we have covered both text shadow and box shadow. I request everyone, the practical that we have seen, you try it on your own, perform it and practice it. Different types of box shadow you can add from your own side and develop different results. So, whenever you move in web development. You can generate a shadow with proper look and feel. So, this was a segment and I request that you practice this and in today's session if there is any such point which you have not understood. During the practice you're facing any difficulty you can tell us on forum.learnvern.com. We will try to rectify all your issues at the earliest and try to revert to you. Our next segment is on CSS gradient property. Thank you.
Share a personalized message with your friends.