It creates shadow using properties
It creates text with shadow
<p><i>Creates the text with shadow</i></p>
<h1 style="text-shadow:2px 2px;color:blue">TechFunda</h1>
In the above code snippet we have defined textshadow to create shadow by using value (2px 2px)
output
It creates the shadow color
<p><i>Creates the text with shadow</i></p>
<h1 style="text-shadow:2px 2px yellow;">TechFunda</h1>
In the above code snippet we have defined textshadow by giving the value (2px 2px yellow), which creates shadow with yellow color
output
We can create multiple text shadow by using shadow properties
<p>Multiple textshadow</p>
<h1 style="text-shadow: 2px 10px 2px red, 10px 0 15px green, 10px 0 5px yellow;color:blue;">TechFunda</h1>
In the above code snippet we have defined the multiple shadow properties with three different shadow color properties as
text-shadow: 2px 10px 2px red, 10px 0 15px green, 10px 0 5px yellow
, creates three shadows
output
It creates the box as shadow
<p>Multiple textshadow</p>
<h1 style="box-shadow:12px 12px; height:100px; width:300px;background-color:green;text-align:center;color:orange">TechFunda</h1>
In the above code snippet we have given the box with height, width, color, background and we are giving box shadow as 12px 12px
output
It creates shadow with color
<style>
h1{
height:100px;
width:300px;
background-color:red;
color:white;
box-shadow:12px 12px blue;
}
</style>
</head>
<body>
<p>Box shadow effect with color</p>
<h1>TechFunda</h1>
</body>
In the above code snippet we created box shadow effects with adding color to the shadow as (12px 12px blue), creates background color to the shadow with blue color
output
Views: 3742 | Post Order: 133