Efectos de edición de imagen hechos con CSS.
filter: Filtros gráficos sobre el elemento.
clip-path: Recorta el elemento con una forma.
Efectos de edición de imagen hechos con CSS: desenfoques, modos de fusión, recortes con formas y máscaras.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Filtros gráficos sobre el elemento: desenfoque, escala de grises, brillo, contraste, sombra con la forma del contenido…
Valores: blur(4px), grayscale(1), brightness(1.2), contrast(1.5), sepia(1), hue-rotate(90deg), drop-shadow(…)
Filtros sobre lo que hay detrás del elemento (efecto de cristal esmerilado). El elemento necesita un fondo semitransparente.
Valores: blur(8px), saturate(1.5)
Cómo se mezcla el elemento con lo que tiene debajo (multiplicar, trama, superponer…), como las capas de un editor de imagen.
Valores: normal, multiply, screen, overlay, difference, luminosity
Esencial. Recorta el elemento con una forma: círculo, elipse, polígono o un trazado. Lo que queda fuera no se ve.
Valores: circle(50%), polygon(50% 0, 100% 100%, 0 100%), inset(10% round 1rem)
Una imagen o un degradado como máscara: las zonas transparentes de la máscara ocultan el elemento. Abrevia con mask.
Valores: linear-gradient(black, transparent), url(forma.svg)
La forma que rodea el texto alrededor de un elemento flotante (en lugar de su caja rectangular). Solo funciona en elementos con float.
Valores: none, circle(50%), ellipse(40% 50%), inset(1rem round 2rem), url(forma.png)
📌 Nota. Con none el texto rodea la caja cuadrada, aunque el elemento se vea redondo con border-radius: compáralo con circle(50%).
El margen entre la forma de shape-outside y el texto que la rodea.
Valores: 0, 0.5rem, 1.5rem, 3rem
Efectos de edición de imagen hechos con CSS.
Código del tema: .foto { filter: grayscale(1) contrast(1.4); }
Efectos de edición de imagen hechos con CSS: desenfoques, modos de fusión, recortes con formas y máscaras.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Filtros gráficos sobre el elemento: desenfoque, escala de grises, brillo, contraste, sombra con la forma del contenido…
Valores: blur(4px), grayscale(1), brightness(1.2), contrast(1.5), sepia(1), hue-rotate(90deg), drop-shadow(…)
Filtros sobre lo que hay detrás del elemento (efecto de cristal esmerilado). El elemento necesita un fondo semitransparente.
Valores: blur(8px), saturate(1.5)
Cómo se mezcla el elemento con lo que tiene debajo (multiplicar, trama, superponer…), como las capas de un editor de imagen.
Valores: normal, multiply, screen, overlay, difference, luminosity
Esencial. Recorta el elemento con una forma: círculo, elipse, polígono o un trazado. Lo que queda fuera no se ve.
Valores: circle(50%), polygon(50% 0, 100% 100%, 0 100%), inset(10% round 1rem)
Una imagen o un degradado como máscara: las zonas transparentes de la máscara ocultan el elemento. Abrevia con mask.
Valores: linear-gradient(black, transparent), url(forma.svg)
La forma que rodea el texto alrededor de un elemento flotante (en lugar de su caja rectangular). Solo funciona en elementos con float.
Valores: none, circle(50%), ellipse(40% 50%), inset(1rem round 2rem), url(forma.png)
📌 Nota. Con none el texto rodea la caja cuadrada, aunque el elemento se vea redondo con border-radius: compáralo con circle(50%).
El margen entre la forma de shape-outside y el texto que la rodea.
Valores: 0, 0.5rem, 1.5rem, 3rem