 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study lesson-33.
In lesson-32 we studied CSS box model. We have seen how to calculate total space that is required to display an element in a web page.
Today we will study CSS box shadow property.
CSS box shadow property
We have seen how to display text shadow in our lesson-24. Similarly we can display box shadow. We will learn this today.
Let us write a script for doing this. Open a new Notepad file. Copy all code from lesson-32 in this file.
We have changed styles for para1 and para2. There are many changes, therefore we have given the code below. Copy this style for para1 and para2 in your Notepad file.
#para1 {
color:blue;
text-indent: 8vw;
font-family: "Arial", Sans-serif;
font-weight: bold;
border: 0.5vw solid red;
}
#para2 {
color:blue;
text-indent: 8vw;
font-family: "Arial", Sans-serif;
font-weight: bold;
}
Now we will write code for applying box shadow for para1. Insert the following code for in the style of para1.
box-shadow: 0.5vw 0.5vw green;
Save this file as "Lesson-33" and "Lesson-33.html". Double click on HTML document and see the output. We can see the shadow that we have mentioned in our code.
Note: For heading outline is displayed and for para1 shadow is displayed. Observe carefully the difference between outline or shadow.
Note that syntax for writing box-shadow is as follows:
box-shadow: horizontal-offset, vertical-offset, blur, spread, color;
We have written
box-shadow: 0.5vw 0.5vw green;
In this statement horizontal-offset is 0.5vw, vertical-offset is 0.5vw, and it is displayed in green color.
We can specify more than one shadows. Now we will specify one more shadow of black color.
box-shadow: 0.5vw 0.5vw green, 1vw 1vw black;
Note that two shadows are separated by a comma.
Now replace the box-shadow in our script with above code. Click on the following figure for PDF file of source code.
 |
| Figure 33-1. CSS box shadow |
Save this file as "Lesson-33" and "Lesson-33.html". Double click on HTML document and see the output. Click on the following figure to see actual output in web page.
 |
| Figure 33-2. CSS box shadow |
Two shadows are displayed for first paragraph.
If we give third value in the property then it is the value of blur. For example,
box-shadow: 0.5vw 0.5vw 0.25 vw #0000FF;
Important Points
01. CSS box-shadow property is used to display shadow to border.
02. We specify horizontal-offset, vertical-offset and shadow color in this property.
03. We can specify more than one shadows in the box-shadow property.
Lesson-32 Lesson-34
