CSS
Forme per galleggianti
Ricerca…
Sintassi
fuori forma: nessuno | [<forma base> || <shape box>] | <Image>
margine di forma: <lunghezza> | <Percentuale>
shape-image-threshold: <numero>
Parametri
| Parametro | Dettagli |
|---|---|
| nessuna | Un valore pari a none significa che l'area float (l'area utilizzata per avvolgere il contenuto attorno a un elemento float) non è interessata. Questo è il valore predefinito / iniziale. |
| basic-figura | Si riferisce a uno tra inset() , circle() , ellipse() o polygon() . Usando una di queste funzioni e i suoi valori viene definita la forma. |
| Forma-box | Si riferisce a uno tra margin-box , border-box , padding-box , content-box . Quando viene fornito solo <shape-box> (senza <basic-shape>) questa casella è la forma. Quando viene utilizzato insieme a <forma base>, funge da riquadro di riferimento. |
| Immagine | Quando un'immagine viene fornita come valore, la forma viene calcolata in base al canale alfa dell'immagine specificata. |
Osservazioni
Il supporto del browser per il modulo CSS Shapes è molto limitato in questo momento.
È supportato in Chrome v37 + e Opera 24+ senza prefissi browser / fornitore. Safari lo supporta dalla v7.1 + ma con il prefisso -webkit- .
Non è ancora supportato in IE, Edge e Firefox.
Forma all'esterno con forma base - cerchio ()
Con la proprietà CSS shape-outside possibile definire i valori di forma per l'area float in modo che il contenuto inline ricopra la forma anziché la casella del float.
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>
Nell'esempio sopra, entrambe le immagini sono in realtà immagini quadrate e quando il testo viene posizionato senza la proprietà shape-outside , non scorrerà attorno al cerchio su entrambi i lati. Scorrerà intorno alla scatola contenente solo l'immagine. Con la shape-outside dell'area del float viene ri-definita come un cerchio e il contenuto viene fatto fluire attorno a questo cerchio immaginario creato utilizzando la shape-outside .
Il cerchio immaginario che viene utilizzato per ridefinire l'area fluttuante è un cerchio con raggio di 80 px disegnato dal centro-centro del riquadro di riferimento dell'immagine.
Di seguito sono riportati alcuni screenshot per illustrare in che modo il contenuto verrà avvolto quando viene utilizzato shape-outside e quando non viene utilizzato.
Uscita con shape-outside
Uscita senza shape-outside
Margine di forma
La shape-margin proprietà CSS aggiunge un margine di 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>
In questo esempio, un margine di 10 pixel viene aggiunto attorno alla forma utilizzando il shape-margin . Questo crea un po 'più di spazio tra il cerchio immaginario che definisce l'area fluttuante e il contenuto reale che scorre intorno.
Produzione:
