OLD | NEW |
1 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> | 1 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> |
2 <defs> | 2 <defs> |
3 <filter id="xor" color-interpolation-filters="sRGB"> | 3 <filter id="xor" color-interpolation-filters="sRGB"> |
4 <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0
0 0.5 0" result="transp"/> | 4 <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0
0 0.5 0" result="transp"/> |
5 <feOffset dx="10" dy="10"/> | 5 <feOffset dx="10" dy="10"/> |
6 <feComposite in2="transp" operator="xor"/> | 6 <feComposite in2="transp" operator="xor"/> |
7 </filter> | 7 </filter> |
8 </defs> | 8 </defs> |
9 </svg> | 9 </svg> |
10 <style> | 10 <style> |
11 li { | 11 li { |
12 margin: 10px; | 12 margin: 10px; |
13 display: block; | 13 display: block; |
14 float: left; | 14 float: left; |
15 } | 15 } |
16 img { | 16 img { |
17 width: 160px; | 17 width: 160px; |
18 height: 90px; | 18 height: 90px; |
19 } | 19 } |
20 </style> | 20 </style> |
21 <ul> | 21 <ul> |
22 <li><img style="-webkit-filter: blur(3px)" src="resources/reference.png"/></li> | 22 <li><img style="filter: blur(3px)" src="resources/reference.png"/></li> |
23 <li><img style="-webkit-filter: brightness(0.5)" src="resources/reference.png"/>
</li> | 23 <li><img style="filter: brightness(0.5)" src="resources/reference.png"/></li> |
24 <li><img style="-webkit-filter: contrast(3)" src="resources/reference.png"/></li
> | 24 <li><img style="filter: contrast(3)" src="resources/reference.png"/></li> |
25 <li><img style="-webkit-filter: drop-shadow(5px 5px 5px blue)" src="resources/re
ference.png"/></li> | 25 <li><img style="filter: drop-shadow(5px 5px 5px blue)" src="resources/reference.
png"/></li> |
26 <li><img style="-webkit-filter: grayscale(0.5)" src="resources/reference.png"/><
/li> | 26 <li><img style="filter: grayscale(0.5)" src="resources/reference.png"/></li> |
27 <li><img style="-webkit-filter: hue-rotate(180deg)" src="resources/reference.png
"/></li> | 27 <li><img style="filter: hue-rotate(180deg)" src="resources/reference.png"/></li> |
28 <li><img style="-webkit-filter: invert(1.0)" src="resources/reference.png"/></li
> | 28 <li><img style="filter: invert(1.0)" src="resources/reference.png"/></li> |
29 <li><img style="-webkit-filter: opacity(0.5)" src="resources/reference.png"/></l
i> | 29 <li><img style="filter: opacity(0.5)" src="resources/reference.png"/></li> |
30 <li><img style="-webkit-filter: saturate(10)" src="resources/reference.png"/></l
i> | 30 <li><img style="filter: saturate(10)" src="resources/reference.png"/></li> |
31 <li><img style="-webkit-filter: sepia(1.0)" src="resources/reference.png"/></li> | 31 <li><img style="filter: sepia(1.0)" src="resources/reference.png"/></li> |
32 <li><img style="-webkit-filter: url(#xor)" src="resources/reference.png"/></li> | 32 <li><img style="filter: url(#xor)" src="resources/reference.png"/></li> |
33 </ul> | 33 </ul> |
OLD | NEW |