<body id="www-cssplay-co-uk" class ="demos"><svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
<feOffset dx="5" dy="5" result="offsetblur"></feOffset>
<feFlood flood-color="#000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</svg>
<style type="text/css">
.shadowed {
-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#888888');
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#888888', Positive='true');
}
</style>
<br><br>
<h2>1. The basic gif animation with no shadow:</h2>
<img src="spongebob.gif" alt="">
<br>
<h2>2. Using box-shadow</h2>
<p class ="info">The 'box' containing the animation has a shadow applied, not much use.</p>
<img src="spongebob.gif" alt="" style="box-shadow:5px 5px 5px rgba(0,0,0,0.5);">
<br>
<h2>3. CSS filter drop-shadow for Chrome, Safari, Opera and IE7/8/9</h2>
<p class ="info">This uses the CSS filter to apply the drop shadow and applies this to the images within the animation.</p>
<img src="spongebob.gif" alt="" class ="shadowed">
<br>
<h2>4. Using SVG drop-shadow for Firefox, Chrome, Safari, Opera and IE10+</h2>
<p class ="info">This uses an inline SVG filter which applies the drop shadow to the images within the animation.
<br>The inline method is necessary for IE10+.</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="500" height="350">
<defs>
<filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
<feOffset dx="5" dy="5" result="offsetblur"></feOffset>
<feFlood flood-color="#000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<image xlink:href="spongebob.gif" width="500" height="350" filter="url(#dropshadow)">
</image>
</svg> </body>
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
»
سایه گذاری در Gif با استفاده از CSS3
محفوظ است .
قدرت گرفته از 
.
پارسی سازی توسط 
:
:
:
