Del curso: CSS esencial

Accede al curso completo hoy mismo

Únete hoy para acceder a más de 24.900 cursos impartidos por expertos del sector.

Efectos en CSS con SVG

Efectos en CSS con SVG - Tutorial de CSS

Del curso: CSS esencial

Comenzar mi mes de prueba gratis Comprar para mi equipo

Efectos en CSS con SVG

“

Los efectos en CSS con imágenes o gráficos SVG te permiten agregar efectos visualmente interesantes en los elementos de tu sitio web. SVG es un formato de imagen escalable basado en XML que se utiliza comúnmente para gráficos, iconos o logotipos, por lo que podrás aplicar cualquier efecto CSS a elementos SVG de la misma manera que lo harías con un elemento HTML. Puedes desde añadir sombras, transiciones o animaciones, filtros o máscaras. Vamos ahora a ver un ejemplo con nuestra imagen SVG. Para ello, tenemos en el documento HTML declarada la etiqueta svg y dentro de esta, con la etiqueta image, tenemos definido nuestro fichero SVG. De esta forma, vemos que nos carga la imagen. Ahora, si por ejemplo queremos aplicar una sombra a esta imagen SVG, lo primero que debemos hacer es declarar la etiqueta en nuestro documento CSS. Y dentro de esta, especificar la propiedad filter y, por ejemplo, añadir el valor drop-shadow, que añadirá una sombra a nuestro icono o imagen. Y ahora, dentro de…

Contenido