CSS box shadow | CSS styling
How to create a box shadow with CSS
So how we will create CSS box shadow. To do this you must know little bit about HTML and CSS. So lets do this
The follow these step to create box shadow
1. Create new html file.
To create a html file open an editor and save that file with .html extension. Write basic tag of html like html head and body tag. And then save it with .html extension. I personally recommended to install nodepad++. Nodepad++ is color the sytax.
2. Creating box
To create box in html we will use div tag as a box. Div tag is work as a container. So div tag is the best tag for creating box.
<div></div>
3. Adding attribute to div tag
Attribute is the property of any tag. We will use class attribute for div tag. Class attribute will represent that tag. Do to this we will simply put class="Class Name".
<div class="box" ></div>
4. Now adding style to the box
Now we will add style the box. Add style tag between head tag. To access the box element, move to the style tag and inside the style tag put dot (.) and the class name that we have already defined it. Then put the width and height of the div tag. It will look like this
<styles>
.box{
width:100px;
height :100px;
}
</style>
5. Shade the box
Now, after width and height put the following code to shade the box
box-shadow :0 0 8px 8px rgba(0,0,0,0.2) ;
It will shade the sides of the tag.
Full code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box
{
width :100px;
height :100px;
box-shadow :0 0 8px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
Output
 |
| Add caption |
Comments
Post a Comment