custom()
Summary
With CSS custom filters you can create your own sophisticated effects on DOM elements. They work with CSS animations and transitions to create complex animated visual effects.
Examples
Using shaders created by Adobe, the following example shows how to create a folded map effect with custom CSS filters.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 400px;
height: 400px;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-filter: custom(
url(http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/shaders/vertex/fold.vs) mix(url(http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/shaders/fragment/fold.fs) multiply source-atop),
8 50,
transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
t 0.5,
spins 1.5,
phase -0.7,
shadow 1.5,
mapDepth 40,
mapCurve -0.3,
minSpacing 0.3,
useColoredBack 1,
backColor 0.5 0.5 0.5 1
);
}
</style>
</head>
<body>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=51.58803,4.774246&zoom=15&size=400x400&sensor=false" id="map" />
</body>
</html>
See also
Related articles
Filters
custom()