Бухвалова Юлия, LiveJournal
Internet Explorer
.img {
filter:
progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color="gray", Positive="true");
}
- Появились в 1997 в IE 4.0
- Максимальная поддержка в IE 5.5
- Выпилены в 2012 в IE 10.0
SVG-фильтры
- 1999
-
Первые описания в спеке
- 2008
- Firefox
- 2009
- Opera
- 2010
- Chrome
- 2012
- Safari, IE10
- 2013
- Мобильные браузеры
CSS-фильтры
- 1999
- 2008
- Robert O'Callahan из Mozilla предложил применить SVG-фильтры к HTML
- 2009
- 2010
- Firefox
- 2012
- Safari, Chrome
- 2013
- 2015
- Edge
SVG-фильтры
CSS-фильтры
CSS
.img {
}
CSS
.img {
filter: blur(5px);
}
CSS
.img {
filter: blur(5px) grayscale(.5);
}
SVG
<svg>
<filter id="my-fancy-filter">
</filter>
</svg>
SVG
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
</filter>
</svg>
SVG
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
<feColorMatrix
type="saturate" values=".5"/>
</filter>
</svg>
SVG
.img {
}
SVG
.img {
filter: url("#my-fancy-filter");
}
<svg>
<circle
filter="url(#my-fancy-filter)"/>
</svg>
CSS
SVG
Добавление картинки или цвета
Добавление картинки: feImage
Сужение: feMorphology erode
Расширение: feMorphology dilate
Волны и искажения: feDisplacementMap
Режимы наложения: feBlend multiply
Режимы наложения: feBlend screen
Управление цветом: feColorMatrix hueRotate
Управление цветом: feColorMatrix matrix
Управление цветом: feColorMatrix luminanceToAlpha
Управление каналами: feComponentTransfer
Резкость: feConvolveMatrix
Источники света: feSpecularLighting
Источники света: feDiffuseLighting
Обрезка слоёв: feComposite
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
</filter>
</svg>
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
<feColorMatrix
type="saturate" values=".5"/>
</filter>
</svg>
<svg>
<filter id="my-fancy-filter">
<feGaussianBlur
stdDeviation="5"/>
<feColorMatrix in="SourceGraphic"
type="saturate" values=".5"/>
</filter>
</svg>
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30"/>
</filter>
Wind
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
</filter>
Wind
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
<feMerge>
</feMerge>
</filter>
Wind
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
<feMerge>
<feMergeNode in="offset"/>
</feMerge>
</filter>
Wind
<filter id="wind">
<feGaussianBlur stdDeviation="30"/>
<feOffset dx="-30" result="offset"/>
<feMerge>
<feMergeNode in="offset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
Wind
const primitive = document.querySelector('#turbulence');
function changeProp() {
primitive.setAttribute('seed', primitive.seed.baseVal + 1);
setTimeout(() => {
requestAnimationFrame(changeProp);
}, 75);
}
requestAnimationFrame(changeProp);
Плюсы, минусы, подводные камни
Минусы
- для поддержки в IE/Edge контент нужно завернуть в SVG
- отдельные баги в разных браузерах
- тормозные анимации для крупных элементов
- сложность
Nx (x,y) = - surfaceScale * FACTORx *
(Kx(0,0)*I(x-dx,y-dy) + Kx(1,0)*I(x,y-dy) + Kx(2,0)*I(x+dx,y-dy) +
Kx(0,1)*I(x-dx,y) + Kx(1,1)*I(x,y) + Kx(2,1)*I(x+dx,y) +
Kx(0,2)*I(x-dx,y+dy) + Kx(1,2)*I(x,y+dy) + Kx(2,2)*I(x+dx,y+dy))
Ny (x,y) = - surfaceScale * FACTORy *
(Ky(0,0)*I(x-dx,y-dy) + Ky(1,0)*I(x,y-dy) + Ky(2,0)*I(x+dx,y-dy) +
Ky(0,1)*I(x-dx,y) + Ky(1,1)*I(x,y) + Ky(2,1)*I(x+dx,y) +
Ky(0,2)*I(x-dx,y+dy) + Ky(1,2)*I(x,y+dy) + Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0
N = (Nx, Ny, Nz) / Norm((Nx,Ny,Nz))
<feFuncR type="table"
tableValues="1 0"/>
<feFuncR type="linear"
slope="1"
intercept="0"/>
<feFuncR type="gamma"
amplitude="1"
exponent="1"
offset="0"/>
Плюсы
- широкие возможности
- хорошая поддержка браузерами
- интерактивность
- доступность контента, к которому применен фильтр
SVG Filters — редактор с готовыми фильтрами и документацией
filtered — десктопное приложение для редактирования фильтров
