CSS3 supported to add shadow to text or elements.Shadow property has divided
as follows
Output :
Example,
- Text shadow
- Box Shadow
Text shadow
CSS3 supported to add shadow effects to text. Following is
the example to add shadow effects to text
Example,
<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>
<h1>CSS
{ Cascading Style Sheets }</h1>
<h2>CSS
{ Cascading Style Sheets }</h2>
<h3>CSS
{ Cascading Style Sheets }</h3>
<h4>CSS
{ Cascading Style Sheets }</h4>
<h5>CSS
{ Cascading Style Sheets }</h5>
<h6>CSS
{ Cascading Style Sheets }</h6>
<p>CSS
{ Cascading Style Sheets }</p>
box shadow
Used to add shadow effects to elements,Following is the example to add shadow effects to elementExample,
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: pink;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div> CSS { Cascading Style Sheets } </div>
</body>
</html>
Output :
No comments:
Post a Comment