| 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 -webkit-transform:translateZ(0); | 19 transform:translateZ(0); |
| 20 } | 20 } |
| 21 </style> | 21 </style> |
| 22 <ul> | 22 <ul> |
| 23 <li><img style="-webkit-filter: blur(3px)" src="resources/reference.png"/></li> | 23 <li><img style="-webkit-filter: blur(3px)" src="resources/reference.png"/></li> |
| 24 <li><img style="-webkit-filter: brightness(0.5)" src="resources/reference.png"/>
</li> | 24 <li><img style="-webkit-filter: brightness(0.5)" src="resources/reference.png"/>
</li> |
| 25 <li><img style="-webkit-filter: contrast(3)" src="resources/reference.png"/></li
> | 25 <li><img style="-webkit-filter: contrast(3)" src="resources/reference.png"/></li
> |
| 26 <li><img style="-webkit-filter: drop-shadow(5px 5px 5px blue)" src="resources/re
ference.png"/></li> | 26 <li><img style="-webkit-filter: drop-shadow(5px 5px 5px blue)" src="resources/re
ference.png"/></li> |
| 27 <li><img style="-webkit-filter: grayscale(0.5)" src="resources/reference.png"/><
/li> | 27 <li><img style="-webkit-filter: grayscale(0.5)" src="resources/reference.png"/><
/li> |
| 28 <li><img style="-webkit-filter: hue-rotate(180deg)" src="resources/reference.png
"/></li> | 28 <li><img style="-webkit-filter: hue-rotate(180deg)" src="resources/reference.png
"/></li> |
| 29 <li><img style="-webkit-filter: invert(1.0)" src="resources/reference.png"/></li
> | 29 <li><img style="-webkit-filter: invert(1.0)" src="resources/reference.png"/></li
> |
| 30 <li><img style="-webkit-filter: opacity(0.5)" src="resources/reference.png"/></l
i> | 30 <li><img style="-webkit-filter: opacity(0.5)" src="resources/reference.png"/></l
i> |
| 31 <li><img style="-webkit-filter: saturate(10)" src="resources/reference.png"/></l
i> | 31 <li><img style="-webkit-filter: saturate(10)" src="resources/reference.png"/></l
i> |
| 32 <li><img style="-webkit-filter: sepia(1.0)" src="resources/reference.png"/></li> | 32 <li><img style="-webkit-filter: sepia(1.0)" src="resources/reference.png"/></li> |
| 33 <li><img style="-webkit-filter: url(#xor)" src="resources/reference.png"/></li> | 33 <li><img style="-webkit-filter: url(#xor)" src="resources/reference.png"/></li> |
| 34 </ul> | 34 </ul> |
| OLD | NEW |