CSS
Recorte y enmascaramiento
Buscar..
Sintaxis
- Recorte
- ruta de clip: <clip-source> | [<basic-shape> || <clip-geometry-box>] | ninguna
- Enmascaramiento
- máscara-imagen: [ninguno | <referencia de máscara>] #
- modo de máscara: [<modo de máscara>] #
- repetición de máscara: [<estilo de repetición] #
- posición de la máscara: [<posición>] #
- máscara-clip: [<geometry-box> | no hay video ]#
- origen de la máscara: [<geometry-box>] #
- tamaño de máscara: [<tamaño_gg>] #
- compuesto de máscara: [<compositing-operator>] #
- máscara: [<mask-reference> <masking-mode>? || <position> [/ <bg-size>]? || <repeat-style> || <geometry-box> || [<geometry-box> | sin clip] || <compositing-operator>] #
Parámetros
| Parámetro | Detalles |
|---|---|
| fuente de clip | Una URL que puede apuntar a un elemento SVG en línea (o) un elemento SVG en un archivo externo que contiene la definición de la ruta del clip. |
| forma básica | Se refiere a uno entre inset() , circle() , ellipse() o polygon() . Usando una de estas funciones se define el trazado de recorte. Estas funciones de forma funcionan exactamente de la misma forma que en Formas para flotadores |
| clip-geometría-caja | Esto puede tener uno entre content-box , content-box padding-box border-box margin-box fill-box stroke-box view-box como valores. Cuando esto se proporciona sin ningún valor para <basic-shape>, los bordes del cuadro correspondiente se utilizan como la ruta para recortar. Cuando se usa con una <forma básica>, esto actúa como el cuadro de referencia para la forma. |
| mascara-referencia | Esto puede ser none o una imagen o una URL de referencia a una fuente de imagen de máscara. |
| estilo de repetición | Esto especifica cómo se debe repetir o colocar la máscara en los ejes X e Y. Los valores admitidos son repeat-x , repeat-y , repeat , space , round , no-repeat . |
| modo de máscara | Puede ser alpha o luminance o auto e indica si la máscara debe tratarse como una máscara alfa o una máscara de luminancia. Si no se proporciona ningún valor y la referencia de la máscara es una imagen directa, se consideraría una máscara alfa (o) si la referencia de la máscara es una URL, se consideraría una máscara de luminancia. |
| posición | Esto especifica la posición de cada capa de máscara y es similar en comportamiento a la propiedad de background-position . El valor se puede proporcionar en la sintaxis de 1 valor (como top , 10% ) o en la sintaxis de 2 valores (como top right , 50% 50% ). |
| caja de geometría | Esto especifica el cuadro en el que se debe recortar la máscara ( área de pintura de máscara ) o el cuadro que se debe utilizar como referencia para el origen de la máscara ( área de posicionamiento de máscara ) según la propiedad. La lista de valores posibles es content-box padding-box border-box margin-box fill-box stroke-box view-box . La explicación detallada de cómo funciona cada uno de esos valores está disponible en la especificación W3C . |
| tamaño bg | Esto representa el tamaño de cada capa de imagen de máscara y tiene la misma sintaxis que background-size . El valor puede ser longitud o porcentaje o auto o cubrir o contener. La longitud, el porcentaje y el auto pueden proporcionarse como un solo valor o como uno para cada eje. |
| operador de composición | Puede ser cualquiera entre add , subtract , exclude , multiply por capa y define el tipo de operación de composición que se debe usar para esta capa con las que están debajo. La explicación detallada sobre cada valor está disponible en las especificaciones del W3C . |
Observaciones
CSS Clipping y Masking son conceptos muy nuevos, por lo que el soporte del navegador para estas propiedades es bastante bajo.
Mascarillas
Al momento de escribir (Jul '16), Chrome, Safari y Opera admiten estas propiedades con el prefijo -webkit- .
Firefox no requiere prefijos, pero admite máscaras solo cuando se usa con elementos de mask SVG. Para los elementos de mask SVG en línea, la sintaxis es mask: url(#msk) mientras que para el uso de elementos de mask en un archivo SVG externo, mask: url('yourfilepath/yourfilename.svg#msk') . #msk en ambos casos se refiere al id del elemento de mask que se hace referencia. Como se indica en esta respuesta , en la actualidad, Firefox no admite ningún parámetro que no sea mask-reference a la mask en la propiedad de la mask .
Internet Explorer (y Edge) aún no ofrece soporte para esta propiedad.
La propiedad del mask-mode actualmente no es compatible con ningún navegador con o sin prefijos.
Recorrido del clip:
Como en el momento de escribir (Jul '16) Chrome, Safari y Opera son compatibles clip-path cuando la ruta se crea utilizando formas básicas (como circle , polygon ) o la sintaxis url(#clipper) con SVG en línea. No admiten el recorte basado en formas que forman parte de archivos SVG externos. Además, requieren que el prefijo -webkit esté presente.
Firefox solo admite la sintaxis url() para clip-path mientras que Internet Explorer (y Edge) no ofrecen soporte.
Recorte (polígono)
CSS:
div{
width:200px;
height:200px;
background:teal;
clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}
HTML:
<div></div>
En el ejemplo anterior, se utiliza un trazado de recorte poligonal para recortar el elemento cuadrado (200 x 200) en forma de triángulo. La forma de salida es un triángulo porque la ruta comienza en (es decir, las primeras coordenadas están en) 0 0 , que es la esquina superior izquierda del cuadro, luego va a 0 100% , que es la esquina inferior izquierda del cuadro y finalmente, al 100% 50% que no es más que el punto medio derecho de la caja. Estos caminos se cierran automáticamente (es decir, el punto de inicio será el punto final) y, por lo tanto, la forma final es la de un triángulo.
Esto también se puede utilizar en un elemento con una imagen o un degradado como fondo.
Salida:
Recorte (círculo)
CSS:
div{
width: 200px;
height: 200px;
background: teal;
clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}
HTML
<div></div>
Este ejemplo muestra cómo recortar un div en un círculo. El elemento se recorta en un círculo cuyo radio es del 30% en función de las dimensiones del cuadro de referencia con su punto central en el centro del cuadro de referencia. Aquí, ya que no se proporciona <clip-geometry-box> (en otras palabras, cuadro de referencia), el border-box de border-box del elemento se usará como cuadro de referencia.
La forma del círculo debe tener un radio y un centro con las coordenadas (x,y) :
circle(radius at x y)
Salida:
Recorte y enmascaramiento: Resumen y diferencia
Con Recorte y Máscara puede hacer que algunas partes específicas de los elementos sean transparentes u opacas. Ambos pueden aplicarse a cualquier elemento HTML.
Recorte
Los clips son caminos vectoriales. Fuera de este camino el elemento será transparente, dentro de él será opaco. Por lo tanto, puede definir una propiedad de clip-path en los elementos. Cada elemento gráfico que también existe en SVG se puede usar aquí como una función para definir la ruta. Los ejemplos son circle() , polygon() o ellipse() .
clip-path: circle(100px at center);
El elemento solo será visible dentro de este círculo, que se coloca en el centro del elemento y tiene un radio de 100px.
Enmascaramiento
Las máscaras son similares a los Clips, pero en lugar de definir una ruta, se define una máscara en qué capas sobre el elemento. Puede imaginar esta máscara como una imagen que consiste principalmente en dos colores: blanco y negro.
Máscara de luminancia : Negro significa que la región es opaca y blanca que es transparente, pero también hay un área gris que es semitransparente, por lo que puede hacer transiciones suaves.
Máscara alfa : solo en las áreas transparentes de la máscara el elemento será opaco.
Esta imagen, por ejemplo, puede usarse como una máscara de luminancia para hacer que un elemento tenga una transición muy suave de derecha a izquierda y de opaco a transparente.
La propiedad de mask permite especificar el tipo de máscara y una imagen que se utilizará como capa.
mask: url(masks.svg#rectangle) luminance;
Un elemento llamado rectangle definido en masks.svg se usará como una máscara de luminancia en el elemento.
Máscara simple que desvanece una imagen de sólido a transparente.
CSS
div {
height: 200px;
width: 200px;
background: url(http://lorempixel.com/200/200/nature/1);
mask-image: linear-gradient(to right, white, transparent);
}
HTML
<div></div>
En el ejemplo anterior hay un elemento con una imagen como fondo. La máscara que se aplica en la imagen (mediante CSS) hace que parezca que se está desvaneciendo de izquierda a derecha.
El enmascaramiento se logra utilizando un linear-gradient que va de blanco (a la izquierda) a transparente (a la derecha) como máscara. Como es una máscara alfa, la imagen se vuelve transparente donde la máscara es transparente.
Salida sin la máscara:
Salida con la máscara:
Nota: Como se mencionó en las observaciones, el ejemplo anterior funcionaría en Chrome, Safari y Opera solo cuando se usa con el prefijo -webkit . Este ejemplo (con un linear-gradient como imagen de máscara) aún no es compatible con Firefox.
Usando máscaras para cortar un agujero en el medio de una imagen
CSS
div {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/200/200/abstract/6);
mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}
HTML
En el ejemplo anterior, se crea un círculo transparente en el centro usando radial-gradient y luego se usa como máscara para producir el efecto de un círculo que se corta desde el centro de una imagen.
Imagen sin máscara:
Imagen con máscara:
Usando máscaras para crear imágenes con formas irregulares.
CSS
div { /* check remarks before usage */
height: 200px;
width: 400px;
background-image: url(http://lorempixel.com/400/200/nature/4);
mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
mask-size: 75% 25%, 25% 25%, 100% 75%;
mask-position: bottom left, bottom right, top left;
mask-repeat: no-repeat;
}
HTML
<div></div>
En el ejemplo anterior, tres imágenes de linear-gradient (que cuando se colocan en sus posiciones apropiadas cubrirían el 100% x 100% del tamaño del contenedor) se utilizan como máscaras para producir un corte transparente de forma triangular en la parte inferior de la imagen.
Imagen sin la máscara:
Imagen con la máscara:
