Rebanar SVG de 9 maneras | Programar Plus

Paul Lewis animó un Flip Card 3D. Lo suficientemente sencillo allí, pero esto también necesitaba un elemento de sombra:

Es posible que la sombra necesite moverse o desvanecerse, por lo que necesitamos una solución que podamos animar con transformaciones y opacidad, ya que se pueden transferir a la GPU. Deberá estar separado del elemento que está sombreando, ya que es probable que queramos desvanecerlo y moverlo sin afectar al otro elemento.

El intentó box-shadow y filter: blur(), pero ambos no son lo suficientemente eficaces.

Probó un elemento SVG con un filtro de desenfoque, pero SVG por sí solo no puede hacer una escala de 9 cortes (necesaria para evitar que las esquinas escalen de manera incómoda).

El ganador estaba usando una imagen SVG pero aplicándola a un elemento a través de border-image, que esencialmente escala de 9 cortes.

Enlace directo →

(Visited 7 times, 1 visits today)