Introduction:
Shadow Effects are creating somekind of 3D effects in ours webpage.We can easily create shadow effect using CSS IE filter: attribute.
Main:
Just we are going to use builtin opacity CSS graphics,and its available in IE,mozilla,Firebox but different way.
In IE, style=”filter: alpha(opacity= 50)”
In Mozilla/Firebox, style=”mozopacity:0.5″
In Opera, style= “opacity:0.5″
These 3 CSS attributes can be combined together and every browser ignores all the attributes that are unknown,
style=”filter:alpha(opacity= 50);mozopacity:0.5;opacity: 0.5″
Please check this below examble,
<html>
<head>NetProgrammingHelp CSS Shadow Effect</head>
<body>
<p>here is how it looks like:</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mauris tellus, convallis eget,
vehicula a, vehicula id, risus. Vestibulum mattis porttitor ipsum. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Aliquam dignissim. Phasellus eget massa. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce dapibus
suscipit lorem. In at magna eget erat feugiat rutrum. Proin fermentum, arcu id sodales ullamcorper,
lorem massa pretium quam, ac semper enim nibh fermentum sapien. Vivamus lacus. Sed malesuada, dolor
et blandit cursus, massa velit ullamcorper turpis, non ultricies massa leo quis lectus. </p>
<div class="VEPart" style="left: 40px; width: 120px; position: relative; top: -90px;">
<div class="FirstLayer" style="position: relative; width: 120px; top:-90px; left: 40px;">
<div class="ShadowLayer" style="position: absolute; left: 10px; top: 10px;width: 120px; height: 84px; background-color: black;
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)';filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);
-moz-opacity:0.25; opacity: 0.25; "> </div>
<div class="Contentlayer" style="position: relative; height: 80px;
background-color: #FFFFDD;"> Hi,This is Shadow Effect.</div>
</div>
</body>
</html>
<html> <head>NetProgrammingHelp CSS Shadow Effect</head> <body> <p>here is how it looks like:</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mauris tellus, convallis eget, vehicula a, vehicula id, risus. Vestibulum mattis porttitor ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam dignissim. Phasellus eget massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce dapibus suscipit lorem. In at magna eget erat feugiat rutrum. Proin fermentum, arcu id sodales ullamcorper, lorem massa pretium quam, ac semper enim nibh fermentum sapien. Vivamus lacus. Sed malesuada, dolor et blandit cursus, massa velit ullamcorper turpis, non ultricies massa leo quis lectus. </p> <div class="VEPart" style="left: 40px; width: 120px; position: relative; top: -90px;"> <div class="FirstLayer" style="position: relative; width: 120px; top:-90px; left: 40px;"> <div class="ShadowLayer" style="position: absolute; left: 10px; top: 10px;width: 120px; height: 84px; background-color: black; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)';filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25); -moz-opacity:0.25; opacity: 0.25; "> </div> <div class="Contentlayer" style="position: relative; height: 80px; background-color: #FFFFDD;"> Hi,This is Shadow Effect.</div> </div> </body> </html> |
Conclusion:
Hope this helps,
Happy Coding.