In this tutorial we will show you the solution of how to give shadow in css, as we know css used to style html elements, here we used css internal method to style <p> tag and <div> tag defined in body block.
Using css we can create shadow on any box layer, text or image and here we can see both examples.
For make shadow effect we need to use style property of ‘text-shadow and box-shadow’ in css so we can create shadow easily.
Step By Step Guide On How To Give Shadow In CSS :-
Here we used internal style method and in our program we defined one <p> tag with some texts and a <div> tag for make green color square box then we need to define style properties to achieve shadow effects.
In <p> we defined with id attribute ‘one’ to use that for add shadow property on <p> texts by ‘text-shadow: 2px 2px 5px #000;’ respective syntax is text-shadow: rightSide-shadow-amount bottomSide-shadow-amount BlurAmount ColorOFshadow.
Same as for box-shadow also but it will only appears in square shape.
<!DOCTYPE html>
<html>
<head>
<title>SHADOW</title>
<style>
div{
background-color: green;
width: 20%;
height: 20%;
box-shadow: 10px 10px 50px #000;
position: absolute;
}
#one{
text-shadow: 2px 2px 5px #000;
}
</style>
</head>
<body>
<p id="one">Hi! everyone welcome to our website</p><br><br>
<div></div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Here we defined styles to sets shadow on text and Greenbox defined in body block by using respective ‘id attribute’ and ‘elementname’.
- When we defining style used id or class of particular element we have to use respective symbols ‘.(dot)-refers class attribute’ and ‘#(hash)-refers id attribute’ before name of id or class attribute.
- First we defined style for div element, we sets ‘background-color’ to ‘green’ with width and height of element size is ‘20%’ of square shape box and ‘position: absolute;’ property is must because without this property box not visible to us. Finally using ‘box-shadow’ property we sets shadow to our green box.
- The ‘#one’ refers <p> tag used to defined ‘text-shadow’ style on p tag text.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined one para <p> tag with some texts and a <div> tag it will display on webpage when we load on browser.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to give shadow on text and box type shape anything using css.
When user loads this on browser we defined <p> tag with some text and <div> tag with green color box shape will display with shadow effects.
When we creates shadow for text or box those will display uniquely on webpage and on shadow we can also give any color with light blur (1px) it will display like double line text or box.
So using shadow we can make different looks also try to explore more things.
I hope this tutorial on how to give shadow in css helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
