CSS3 Background

CSS3 supported to add shadow to text or elements.Shadow property has divided as follows

Text shadow
Box Shadow

Text shadow

CSS3 supported to add shadow effects to text. Following is the example to add shadow effects to text

See this example:

<html>
<head>

<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>

</head>
<body>

<h1>IndexSolutions.in</h1>
<h2>IndexSolutions.in</h2>
<h3>IndexSolutions.in</h3>
<h4>IndexSolutions.in</h4>
<h5>IndexSolutions.in</h5>
<h6>IndexSolutions.in</h6>
<p>IndexSolutions.in</p>

</body>
</html>

Output:

IndexSolutions.in

box shadow

Used to add shadow effects to elements,Following is the example to add shadow effects to element

See this example:

<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: #4584EC;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>

Output:

This is a div element with a box-shadow

Previous Next