CSS
Formas para flotadores
Buscar..
Sintaxis
forma fuera: ninguna | [<basic-shape> || <shape-box>] | <imagen>
forma-margen: <length> | <percentage>
forma-imagen-umbral: <número>
Parámetros
| Parámetro | Detalles |
|---|---|
| ninguna | Un valor de none significa que el área flotante (el área que se usa para envolver el contenido alrededor de un elemento flotante) no se ve afectada. Este es el valor predeterminado / inicial. |
| forma básica | Se refiere a uno entre inset() , circle() , ellipse() o polygon() . Usando una de estas funciones y sus valores, se define la forma. |
| caja de formas | Se refiere a uno entre margin-box border-box padding-box content-box . Cuando solo se proporciona <shape-box> (sin <basic-shape>) esta caja es la forma. Cuando se usa junto con <basic-shape>, esto actúa como el cuadro de referencia. |
| imagen | Cuando se proporciona una imagen como valor, la forma se calcula en función del canal alfa de la imagen especificada. |
Observaciones
El soporte del navegador para el módulo CSS Shapes es muy limitado en este momento.
Es compatible con Chrome v37 + y Opera 24+ sin prefijos de navegador / proveedor. Safari lo admite desde v7.1 + pero con el prefijo -webkit- .
Todavía no es compatible con IE, Edge y Firefox.
Forma exterior con forma básica - círculo ()
Con la propiedad CSS shape-outside la shape-outside se pueden definir valores de forma para el área flotante, de modo que el contenido en línea se ajuste a la forma en lugar de a la caja flotante.
CSS
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
HTML
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
En el ejemplo anterior, ambas imágenes son en realidad imágenes cuadradas y, cuando el texto se coloca sin la propiedad de shape-outside , no fluirá alrededor del círculo en ninguno de los lados. Fluirá alrededor de la caja contenedora de la imagen solamente. Con shape-outside el área flotante se redefine como un círculo y el contenido fluye alrededor de este círculo imaginario que se crea utilizando shape-outside .
El círculo imaginario que se usa para redefinir el área de flotación es un círculo con un radio de 80 píxeles dibujado desde el centro-medio del cuadro de referencia de la imagen.
Abajo hay un par de capturas de pantalla para ilustrar cómo se envolvería el contenido cuando se usa shape-outside y cuando no se usa.
Salida con shape-outside
Salida sin shape-outside
Margen de forma
La shape-margin propiedad CSS añade un margen para shape-outside .
CSS
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
HTML
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
En este ejemplo, se agrega un margen de 10px alrededor de la forma usando shape-margin . Esto crea un poco más de espacio entre el círculo imaginario que define el área flotante y el contenido real que está fluyendo alrededor.
Salida:
