CSS3 – Shadow
CSS3 – Shadow
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
Example:
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
h2 {
color: white;
text-shadow: 2px 2px 4px #FF0000;
}
p {
color: white;
text-shadow: 1px 1px 2px green, 0 0 25px blue, 0 0 5px darkblue;
}
div {
width: 250px;
height: 150px;
padding: 25px;
background-color: blue;
box-shadow: 18px 10px;
}
</style>
</head>
<body>
<h1>CSS3-Shadow demo</h1>
<h2>CSS3-Shadow demo</h2>
<p>CSS3-Shadow demo</p>
<div> Demo of box shadow </div>
</body> </html>
Output :
