Máscaras CSS, shape-outside y perspectiva 3D, con demos en vivo | We.Inc
Difumina imágenes con degradados en mask-image, recorta formas con máscaras SVG, haz que el texto rodee círculos con shape-outside, compara clip-path con mask y crea una escena con perspectiva 3D.
Una máscara CSS oculta partes de un elemento usando la transparencia de una imagen: mask-image: linear-gradient(black, transparent) lo difumina hacia abajo. shape-outside hace que el texto vecino rodee un círculo o un polígono en lugar de un rectángulo. perspective en un elemento padre da profundidad real a los hijos rotados. Crea una máscara en el laboratorio y cópiala.
Qué herramienta para cada tarea
Objetivo
Propiedad
Borde
Difuminado suave o foco de luz
mask-image con un degradado
Suave, con cualquier opacidad
Recorte con forma de icono o logo
mask-image con un SVG
Sigue el canal alfa de la imagen
Corte geométrico nítido
Siempre nítido
Texto que fluye alrededor de una forma
shape-outside en un float
Afecta a la disposición del texto
Profundidad para rotaciones 3D
perspective en el padre
No es un recorte en absoluto
Empieza por el laboratorio de máscaras: elige un difuminado, un foco de luz o una forma recortada, muévelo sobre una imagen de ejemplo y copia el CSS con el prefijo -webkit- incluido. Debajo hay ejemplos editables de texto que rodea formas, de clip-path frente a mask y de una pequeña escena 3D, todo sin JavaScript.
Elige un tipo de máscara: difuminado lineal, foco radial o una forma SVG.
Ajusta la dirección, la posición, el tamaño y la suavidad. La vista previa se redibuja al instante.
Copia el CSS. Incluye tanto mask-image como -webkit-mask-image para que también funcione en versiones antiguas de Safari y Chromium.
Baja para ver shape-outside, las comparaciones con clip-path y la escena con perspectiva, y edita cualquiera de ellas directamente.
En mask-image solo cuenta por defecto el canal alfa. El negro y cualquier otro color opaco significan visible; transparente significa oculto.
Usa mask-size, mask-position y mask-repeat igual que las propiedades de background. Una máscara SVG se repite salvo que pongas mask-repeat: no-repeat.
shape-outside solo funciona en elementos flotantes. Combínalo con el mismo clip-path si también quieres que el propio elemento tenga esa forma.
Añade shape-margin para separar un poco de la curva el texto que la rodea.
Preguntas frecuentes
¿Qué diferencia hay entre clip-path y mask?
clip-path dibuja un contorno geométrico y todo lo que queda fuera se corta con un borde nítido. mask-image usa una imagen o un degradado, así que los bordes pueden ser suaves y parcialmente transparentes. Los clip paths son más sencillos para polígonos y círculos; las máscaras son la opción para difuminados, focos con bordes suaves y recortes con forma de logo.
¿Sigo necesitando -webkit-mask-image?
Las propiedades mask sin prefijo pasaron a ser Baseline a finales de 2023. Añadir también la versión -webkit- no cuesta nada y mantiene el efecto para los visitantes con versiones antiguas de Safari y Chromium.
¿Por qué no funciona mi shape-outside?
Comprueba tres cosas: el elemento debe ser flotante, necesita un ancho y un alto, y si usas una imagen como forma, debe ser del mismo origen o servirse con cabeceras CORS. Además, el texto solo rodea el lado opuesto al float.
¿Cómo difumino el borde de una lista con scroll?
Pon una máscara en el contenedor con scroll: mask-image: linear-gradient(to bottom, black 85%, transparent). Las últimas líneas se desvanecen como pista de que hay más contenido, y la máscara se queda con la caja en lugar de desplazarse con el contenido.
¿Qué valor debe tener perspective?
Es la distancia entre el espectador y el plano z = 0. Entre 600px y 1200px queda natural para tarjetas. Valores menores, como 300px, exageran la profundidad y deforman mucho los bordes cercanos.
Cómo decide una máscara qué se ve
El navegador coloca la imagen de máscara sobre el elemento y lee su transparencia píxel a píxel. Donde la máscara es totalmente opaca, el elemento se ve con normalidad; donde es totalmente transparente, desaparece; y la transparencia parcial da visibilidad parcial.
Como los degradados son imágenes, cualquier degradado lineal, radial o cónico es una máscara lista para usar. Se pueden superponer varias máscaras separadas por comas y combinarlas con mask-composite, por ejemplo para abrir un agujero en un difuminado.
Hacer que el texto rodee formas
shape-outside acepta formas básicas como circle(), ellipse(), polygon() e inset(), una palabra clave de caja como margin-box, o una imagen cuyos píxeles transparentes definen la forma. Solo el contenido en línea que fluye junto al float sigue la curva.
El float sigue ocupando su caja rectangular para pintarse a sí mismo. Para que una foto se vea redonda además de empujar el texto en círculo, añade clip-path: circle(50%) o border-radius: 50% al mismo elemento.
Máscaras con degradados: difuminados y focos
Difuminar la parte inferior de un bloque
Totalmente visible hasta el 50 por ciento de la altura y después un difuminado suave hasta desaparecer.
Foco radial
Un degradado radial deja visible un círculo suave y oculta el resto del patrón.
Máscaras SVG y con data URI
Recortar un elemento en forma de estrella
El SVG va en línea como data URI, así que no hace falta ningún archivo extra. mask-size: contain mantiene la estrella entera dentro de la caja.
Cambiar el color de un archivo de icono con una máscara
El archivo del icono solo aporta la forma; background-color define el color, así que un solo SVG sirve para todos los temas y estados hover.
shape-outside: texto que rodea formas
Texto alrededor de un círculo
El float empuja el texto con shape-outside y se ve redondo gracias a border-radius. shape-margin añade espacio para respirar.
Texto a lo largo de un polígono diagonal
El mismo polígono controla tanto el recorte visible (clip-path) como el flujo del texto (shape-outside).
clip-path frente a mask
El mismo círculo, con borde nítido y con borde suave
A la izquierda se usa clip-path: circle(). A la derecha, una máscara con degradado radial y borde suavizado, algo que clip-path no puede hacer.
Comparativa de clip-path y mask
Entrada
Forma básica o SVG <clipPath>
Cualquier imagen: degradado, PNG, SVG
Bordes
Nítidos
Suaves o nítidos
Transparencia parcial
No
Sí
Animable
Formas con el mismo número de puntos
mask-position y mask-size
Una pequeña escena con perspectiva 3D
Tarjetas inclinadas en un espacio 3D compartido
perspective en el escenario y preserve-3d en el grupo colocan las tres tarjetas en un mismo espacio; translateZ lleva cada una a una profundidad distinta.
Referencia de propiedades de máscara
Propiedades individuales de mask y qué hacen
Propiedad
Valor por defecto
Función
La imagen o el degradado que se usa como máscara
Usar el alfa o la luminancia de la máscara
Tamaño de la máscara, como background-size
Dónde se sitúa la máscara
Repetición en mosaico de la imagen de máscara
Caja desde la que se mide la posición
Área a la que afecta la máscara
Cómo se combinan las máscaras superpuestas: add, subtract, intersect, exclude
Círculo
Estrella
Corazón
Mancha
Laboratorio de máscaras
Tipo de máscara
Difuminado lineal
Foco
Forma SVG
Elemento con máscara. El tablero de ajedrez muestra dónde queda oculto.