RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/functions/custom below:

custom() · WebPlatform Docs

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>

View live example