Crea forme reattive perfette utilizzando l'unità CSS vw. Generatore CSS3 online con una semplice GUI: forme EnjoyCSS Css

, e quindi applicarvi la trasformazione opposta ruotare()
HTML

.immagine(
larghezza: 400px;
trasformazione: ruota (45 gradi);
overflow: nascosto;
}
.immagine > immagine (
larghezza massima: 100%;
trasformazione: ruota (-45 gradi);
}
Tuttavia, come puoi vedere nell'immagine, non siamo riusciti a ottenere subito la stilizzazione richiesta. Naturalmente, se avevi intenzione di ritagliare l'immagine in una forma ottagonale, puoi dire che il lavoro è finito e passare a qualcos'altro. Ma per ritagliare l'immagine a forma di diamante, dovrai lavorare di più.

Le trasformazioni opposte di rotazione() non sono sufficienti per ottenere l'effetto desiderato (il div con name.picture è indicato da un contorno tratteggiato)
Il problema principale risiede nella larghezza massima: dichiarazione del 100%. Il 100% si applica al nostro lato container.picture. Tuttavia, vogliamo che la larghezza dell'immagine risultante sia uguale alla diagonale dell'originale, non al suo lato. Hai già intuito che abbiamo ancora bisogno dell'aiuto del teorema di Pitagora (se hai bisogno di rinfrescarti la memoria, troverai la spiegazione in segreto). Come afferma il teorema, la diagonale di un quadrato è uguale al suo lato moltiplicato per .

Pertanto, ha senso impostare un valore di larghezza massima pari a 2 × 100% ≈ 141,4213562% o, arrotondato, 142%, poiché in nessun caso vogliamo che l'immagine diventi più piccola (e se risulta essere un po' più grande, poi tutto ok visto che comunque lo tagliamo).

In effetti, è ancora meglio ingrandire l'immagine utilizzando la trasformazione scale(), per due ragioni: vogliamo che la dimensione dell'immagine rimanga al 100% in situazioni in cui le trasformazioni CSS non sono supportate;
Quando un'immagine viene ingrandita utilizzando la trasformazione scale(), viene ridimensionata dal centro (a meno che non venga specificato un valore di origine della trasformazione diverso). Se lo aumenti modificando il valore della proprietà larghezza, si ridimensionerà dall'angolo in alto a sinistra e per spostarlo dovremo utilizzare valori di margine negativi. Mettendo tutto insieme, otteniamo questo codice finale:
.immagine(
larghezza: 400px;
trasformazione: ruota (45 gradi);
overflow: nascosto;
}
.immagine > immagine (
larghezza massima: 100%;
trasformazione: ruota (-45 gradi) scala (1.42);
}
Come puoi vedere nell'immagine, questo finalmente ci dà il risultato desiderato.

PROVA TU STESSO!
http://play.csssecrets.io/diamond-images

Soluzione del tracciato di ritaglio

La soluzione precedente funziona, ma è intrinsecamente un trucco sporco. Richiede un elemento HTML in più, il che significa che è una soluzione disordinata, confusa e fragile: se abbiamo a che fare con immagini non quadrate, il risultato sarà disastroso.

In realtà, esiste un modo molto migliore per ottenere il risultato desiderato. L'idea principale è quella di utilizzare la proprietà percorso clip- un'altra funzionalità presa in prestito da SVG. Questa proprietà può ora essere applicata al contenuto HTML (almeno nei browser che supportano) e in una sintassi piacevole e leggibile, a differenza dell'equivalente SVG, che è noto per far impazzire le persone.

Ha un solo inconveniente (al momento della stesura di questo capitolo): il supporto limitato del browser. Tuttavia, questa soluzione ricorre a un rendering semplificato (senza ritaglio), quindi è un degno candidato da prendere in considerazione. È probabile che tu abbia già familiarità con i tracciati di ritaglio grazie ad applicazioni di modifica delle immagini come Adobe Photoshop. I tracciati di ritaglio ti consentono di ritagliare un elemento in qualsiasi forma desideri. In questo caso utilizzeremo la forma polygon().

Definiremo un rombo, ma in generale questa forma permette di definire qualsiasi poligono tramite una sequenza di punti separati da virgole. Puoi anche utilizzare le percentuali: i valori totali verranno calcolati in relazione alle dimensioni complessive dell'elemento. Il codice è molto semplice:
percorso di ritaglio: poligono(50% 0, 100% 50%, 50% 100%, 0 50%);

Che tu ci creda o no, tutto qui! Ma invece di due elementi HTML e otto righe di confuso codice CSS, abbiamo ottenuto ciò che volevamo con una sola semplice riga. Ma le meravigliose capacità di clip-path non si limitano a questo. Questa proprietà supporta anche l'animazione, a condizione che stiamo animando la transizione tra due funzioni di forma identiche (nel nostro caso polygon()) con lo stesso numero di punti. Quindi, se vogliamo espandere agevolmente l'intera immagine al passaggio del mouse, possiamo farlo in questo modo:
immagine (
percorso di ritaglio: poligono(50% 0, 100% 50%,
50% 100%, 0 50%);
transizione: percorso clip 1s;
}
img: passa il mouse (
percorso-clip: poligono(0 0, 100% 0,
100% 100%, 0 100%);
}
Inoltre, questo metodo si adatta perfettamente alle immagini non quadrate. Ah, le gioie dei moderni CSS...
PROVA TU STESSO!

Dall'autore: Un rettangolo nei rettangoli: così sono da sempre costruite le nostre pagine web. Abbiamo cercato a lungo di liberarci da queste limitazioni utilizzando i CSS per creare forme geometriche, ma tali forme non influiscono mai sul contenuto all'interno degli elementi con stile o sul modo in cui gli altri elementi sulla pagina sono disposti in relazione agli elementi con stile.

La nuova specifica CSS per le forme cambia lo status quo. Introdotto da Adobe a metà del 2012, mira a dare ai web designer la possibilità di modificare il flusso di contenuti all'interno e attorno a forme relativamente complesse, qualcosa che prima non potevamo ottenere, nemmeno utilizzando JavaScript.

Ad esempio, nota come il testo si avvolge attorno alle immagini rotonde nel seguente disegno. Senza Shapes, il testo avrebbe una forma rettangolare, eliminando una tecnica sottile che porta il design a un livello superiore.

Nota come in questo esempio il testo assume una forma arrotondata attorno ai bordi del piatto. Utilizzando CSS Shapes, possiamo creare un design simile per una pagina web.

Diamo uno sguardo più da vicino a come funzionano le forme e come puoi iniziare a usarle.

Supporto del browser

Le forme CSS sono attualmente supportate solo in Webkit Nightly e Chrome Canary, ma il loro modulo di livello 1 ha raggiunto lo stato di candidato raccomandato, quindi le proprietà e la sintassi definite nelle specifiche sono abbastanza stabili. Non passerà molto tempo prima che altri browser inizino a supportarli. Questo livello si concentra sulle proprietà delle forme che modificano il flusso di contenuto attorno alla forma. In particolare si concentra sulle proprietà forma-esterno e su quelle correlate.

In combinazione con altre funzionalità più recenti come Ritaglia e Maschera, Filtri CSS e Collage e Unisci, CSS Shapes ci consentirà di creare progetti più complessi e sofisticati senza dover ricorrere a editor di immagini come Photoshop e InDesign.

I livelli futuri di CSS Shapes si concentreranno anche sullo styling dei contenuti all'interno delle forme. Ad esempio, oggi è abbastanza semplice creare una forma a diamante in CSS semplicemente ruotando l'elemento di 45 gradi e quindi ruotando il contenuto al suo interno nel senso opposto in modo che si trovi orizzontalmente sulla pagina. Ma il contenuto all'interno del diamante non assumerà la forma appropriata e rimarrà sempre rettangolare. Una volta implementata la proprietà shape-inside, possiamo rendere anche il contenuto a forma di diamante, creando un markup simile all'immagine seguente.

Presto CSS Shapes ti consentirà anche di modellare il testo all'interno come questi diamanti, in modo che invece di ritagliare o utilizzare l'overflow, il testo stesso sia posizionato rispetto ai bordi del contenitore.

Per utilizzare le forme CSS in Chrome Canary oggi, devi abilitare la casella di controllo che rende disponibili le funzionalità sperimentali.

Creazione di forme CSS

Puoi applicare una forma a un elemento utilizzando le proprietà Forme. Si passa la funzione shape come valore alla proprietà shape. La funzione forma è la sezione di codice in cui passi i parametri che specificano la forma che desideri applicare a un elemento.

Le forme possono essere create utilizzando una delle seguenti funzioni:

Ogni forma è definita da un insieme di punti. Alcune funzioni accettano punti come parametri; altri accettano parametri di offset, ma finiscono tutti per disegnare le forme sull'elemento come un insieme di punti. Esamineremo i parametri per ciascuna di queste funzioni con esempi.

Una figura può anche essere determinata da un'immagine utilizzando l'estrazione del canale alfa. Quando un'immagine viene passata alla proprietà shape, il browser estrae una forma dall'immagine in base al valore shape-image-threshold. La forma è definita da pixel il cui valore alfa è superiore a una soglia specificata. L'immagine deve essere compatibile con CORS. Se quella fornita non è disponibile per qualche motivo (ad esempio, non esiste), non verrà applicata alcuna forma.

Le seguenti figure assumono come valori le funzioni di cui sopra:

shape-outside: fa sì che il contenuto si avvolga attorno alla forma (esterna)

shape-inside: il contenuto prende la forma della forma dall'interno

Puoi utilizzare la proprietà shape-outside in combinazione con shape-margin per aggiungere un margine esterno attorno a una forma, che allontanerà il contenuto dalla forma, lasciando spazio tra di loro. Proprio come shape-outside ottiene una proprietà shape-margin, shape-inside ottiene una proprietà shape-padding, che aggiunge riempimento.

Utilizzando le proprietà della forma o della funzione, la dichiarazione di un elemento forma può essere eseguita con una sola riga di codice CSS:

Element ( shape-outside: circle(); /* il contenuto si avvolgerà attorno al cerchio assegnato all'elemento */ )

Elemento ( forma-esterno: url(percorso/dell'immagine-con-forma.png); )

Elemento (forma-esterno: url (percorso/a/immagine-con-forma. png);)

Ma... Se applichi questa riga di codice CSS a un elemento, la forma non verrà applicata ad esso a meno che non siano soddisfatte le seguenti condizioni:

L'elemento deve essere mobile. I futuri livelli di CSS Shapes ci permetteranno di definire forme per elementi non mobili, ma questo non è ancora possibile.

L'elemento deve avere le dimensioni specificate. L'altezza e la larghezza assegnate all'elemento verranno utilizzate per stabilire il sistema di coordinate.

Come hai visto nelle funzioni sopra, le forme sono definite da una serie di punti. Poiché i punti hanno coordinate, il browser necessita di un sistema di coordinate per sapere esattamente dove posizionare ciascun punto su un elemento. Quindi l'esempio sopra funzionerebbe se avesse quanto segue:

Elemento ( float: sinistra; altezza: 10em; larghezza: 15em; forma esterna: cerchio(); )

Elemento (float: sinistra; altezza: 10em; larghezza: 15em; forma esterna: cerchio ();)

Tuttavia, impostare un elemento su una determinata dimensione non influisce sulla sua reattività (ne parleremo più avanti). Poiché ogni forma è definita come un insieme di punti individuati utilizzando una coppia di coordinate, la modifica delle coordinate di un punto influenzerà direttamente la forma creata. Ad esempio, la figura seguente mostra un esagono che può essere creato utilizzando la funzione polygon(). La figura è composta da sei punti. La modifica della coordinata orizzontale del punto arancione modificherà la forma finale e influenzerà anche il posizionamento del contenuto all'interno/all'esterno di qualsiasi elemento a cui viene applicata la forma.

Se un elemento è mobile e allineato a destra e gli è applicata una forma, il contenuto alla sua sinistra cambierà la sua posizione quando viene modificata una delle coordinate del punto arancione all'interno della funzione polygon().

Blocco di riferimento delle forme

Le forme CSS vengono definite e create all'interno di un riquadro di riferimento, dove viene disegnata la forma. Oltre all'altezza e alla larghezza di un elemento, i componenti del modello di riquadro degli elementi, ovvero il riquadro del margine, il riquadro del contenuto, il riquadro di riempimento e il riquadro del bordo, forniscono anche riferimenti per definire la forma dell'elemento.

Per impostazione predefinita, la casella del margine viene utilizzata come riferimento, quindi se l'elemento a cui stai applicando una forma ha già un margine nella parte inferiore, la forma terminerà sul bordo del margine anziché sul bordo. Se desideri utilizzare altri valori del box model, puoi specificarli insieme alla funzione shape che passi alla proprietà shape:

forma esterna: cerchio (250px al 50% 50%) imbottitura-box;

forma - esterno: cerchio (250px al 50% 50%) imbottitura - casella;

La parola chiave riempimento-box in questa regola definisce l'applicazione della forma e del vincolo del riquadro di riempimento (l'area di riempimento). La funzione circle() determina il cerchio, le sue dimensioni e il suo posizionamento rispetto all'elemento.

Definizione di forme utilizzando le funzioni

Inizieremo avvolgendo un testo informativo attorno a un'immagine rotonda dell'avatar dell'utente, proprio come per un profilo utente o una recensione.

Utilizzando le forme CSS, il testo attorno all'immagine dell'utente scorre attorno alla forma invece di mantenere una forma rettangolare.

Utilizzeremo la funzione circle() per applicare una forma circolare all'immagine del profilo utilizzando il seguente markup:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

< img src = "//api.randomuser.me/0.3.2/ritrattos/men/7.jpg" alt = "immagine del profilo" / > !}< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?< / p > < p >Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.< / p >

Potresti chiedere: "Perché non possiamo usare border-radius per arrotondare l'immagine?" Risposta: La proprietà border-radius non ha alcun effetto sul posizionamento del contenuto all'interno o all'esterno dell'elemento a cui viene applicata. Influisce solo sui bordi o sullo sfondo dell'elemento. Lo sfondo è ritagliato agli angoli arrotondati, tutto qui. Il contenuto all'interno dell'elemento rimarrà rettangolare e il contenuto all'esterno dell'elemento si comporterà come se l'elemento rimanesse rettangolare.

Utilizzeremo la proprietà border-radius per rendere rotonda un'immagine: questo è ciò che facciamo per arrotondare le immagini o altri elementi su una pagina:

img (float: sinistra; larghezza: 150px; altezza: 150px; bordo - raggio: 50%; margine - destra: 15px;)

Senza le forme CSS, il testo vede l'immagine come quadrata e si avvolge attorno a una forma quadrata anziché rotonda.

In un browser che non supporta le forme CSS, il contenuto attorno a un'immagine circolare verrà posizionato come se non fosse rotonda. Questo è esattamente come apparirà nei browser più vecchi. Per modificare il modo in cui il contenuto si avvolge attorno a una forma specifica, utilizza le proprietà della forma.

img ( float: sinistra; larghezza: 150px; altezza: 150px; raggio bordo: 50%; forma-esterno: cerchio(); margine forma: 15px; )

img (float: sinistra; larghezza: 150px; altezza: 150px; bordo - raggio: 50%; forma - esterno: cerchio (); forma - margine: 15px;)

Con questo codice il testo potrà “vedere” la forma circolare applicata all'immagine e si avvolgerà attorno ad essa, come mostrato nel primo screenshot. (Puoi guardare il risultato.) Nei browser che non supportano le forme, apparirà come la seconda immagine.

È possibile utilizzare la funzione circle() così com'è o passarle dei parametri. Ecco la sua sintassi ufficiale:

cerchio() = cerchio([ ]? ? [A< position > ] ? )

I punti interrogativi indicano che questi parametri sono facoltativi e possono essere omessi. I parametri che ometti assumeranno i loro valori predefiniti. Quando usi circle() così com'è, invece di specificare direttamente la posizione, il centro predefinito del cerchio sarà al centro dell'elemento a cui lo stai applicando.

Puoi impostare il raggio di un cerchio utilizzando qualsiasi unità di lunghezza (px, em, pt, ecc.). Puoi anche impostare il raggio utilizzando i parametri utilizzando il lato più vicino o il lato più lontano, ma il lato più vicino è l'impostazione predefinita che significa il il browser prenderà la distanza dal centro dell'elemento al lato più vicino come il raggio, il lato più lontano utilizza la distanza dal centro al lato più lontano.

forma esterna: cerchio (lato più lontano al 25% 25%); /* definisce un cerchio il cui raggio è la metà del lato più lungo, situato alle coordinate 25% 25% nel sistema di coordinate dell'elemento */ shape-inside: circle(250px at 500px 300px); /* definisce un cerchio il cui centro è di 500px in orizzontale e 300px in verticale, con un raggio di 250px */

La funzione ellipse() funziona proprio come circle(), con lo stesso insieme di valori, tranne che invece del parametro raggio, ne richiede due: un raggio nell'asse x, uno nell'asse y.

ellisse() = ellisse([ (2)]? ? [A< position > ] ? )

La funzione inset() non è direttamente correlata al cerchio o all'ellisse, viene utilizzata per creare forme rettangolari all'interno di un elemento. Poiché gli elementi sono già rettangolari, non ne abbiamo bisogno per creare rettangoli. Invece, inset() può aiutarci a creare rettangoli arrotondati in modo che il contenuto si avvolga attorno agli angoli arrotondati.

La funzione inset() accetta da uno a quattro parametri di offset, che specificano un offset relativo ai bordi del riquadro di riferimento, che determina la posizione del rettangolo all'interno dell'elemento. Gli angoli arrotondati vengono specificati esattamente allo stesso modo di border-radius, utilizzando uno dei quattro valori, in combinazione con la parola chiave round.

inserto() = inserto(offset(1,4) ?)

inserto() = inserto(offset(1, 4)[arrotondato< border - radius > ] ? )

Il codice seguente creerà un rettangolo arrotondato su un elemento mobile.

Elemento ( float: sinistra; larghezza: 250px; altezza: 150px; forma esterna: inset(0px rotondo 100px) border-box; )

Elemento (float: sinistra; larghezza: 250px; altezza: 150px; forma-esterno: riquadro (0px rotondo 100px) bordo-riquadro;)

L'ultima funzione Shapes è polygon(), che definisce forme ambigue più complesse utilizzando un numero qualsiasi di punti. La funzione accetta un insieme di coppie di coordinate, dove ciascuna coppia definisce la posizione di un punto.

Nell'esempio seguente, l'immagine mobile viene posizionata sul bordo destro, occupando l'intera altezza dello schermo e utilizzando le unità viewport. Vogliamo che il testo a sinistra avvolga la clessidra all'interno dell'immagine e utilizziamo la funzione polygon() per definire una forma personalizzata per l'immagine.

Il codice CSS per l'immagine sopra è simile al seguente:

img.right ( float: right; altezza: 100vh; larghezza: calc(100vh + 100vh/4); forma-esterno: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%);

img. destra ( float: destra ; altezza: 100vh ; larghezza: calc (100vh + 100vh / 4 ) ; forma - esterno : poligono (40% 0 , 100% 0 , 100% 100% , 40% 100% , 45% 60% , 45% 40% ;

Puoi specificare le coordinate dei punti che definiscono la figura in unità di lunghezza o in percentuali, come la mia. Questo codice darà il risultato desiderato, ma come puoi vedere, la funzione forma non influisce sulle restanti parti dell'immagine al di fuori della forma data. Il punto è che applicare una funzione di forma a un elemento - sia esso un'immagine, un contenitore o qualcos'altro - non influenzerà nient'altro che l'area di avvolgimento del contenuto. Lo sfondo, i bordi e tutto il resto rimarranno invariati.

Per rappresentare visivamente il poligono creato, dobbiamo “ritagliare” le parti dell'immagine esterne alla forma. La proprietà clip-path della specifica CSS Masking Module ci aiuterà in questo.

La proprietà clip-path accetta le stesse funzioni e valori di forma della proprietà shape. Se passiamo la stessa forma poligonale che abbiamo usato per la proprietà shape-outside alla proprietà clip-path, ritaglierà la parte dell'immagine all'esterno della forma.

img.right ( float: right; altezza: 100vh; larghezza: calc(100vh + 100vh/4); forma-esterno: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%); /* ritaglia l'immagine lungo il contorno della figura */ clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40% )

img. destra ( float: destra ; altezza: 100vh ; larghezza: calc (100vh + 100vh / 4 ) ; forma - esterno : poligono (40% 0 , 100% 0 , 100% 100% , 40% 100% , 45% 60% , 45% 40%); /* ritaglia l'immagine lungo il contorno della figura */ percorso di ritaglio: poligono(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); )

Il risultato è simile al seguente:

La proprietà clip-path è attualmente supportata insieme ai prefissi, ad es. funzionerà in Chrome con il prefisso –webkit- aggiunto. Puoi guardare la demo.

La proprietà clip-path è un ottimo complemento alla proprietà shape perché ti aiuta a visualizzare le forme che hai creato e a ritagliare parti all'esterno della forma, quindi probabilmente finirai per usarle spesso insieme.

La funzione polygon() accetta anche una parola chiave opzionale per il riempimento, che può essere diversa da zero o paridispari. Determina come si comporteranno le aree intersecanti all'interno del poligono. Controlla la proprietà della regola di riempimento SVG per i dettagli.

Definire una figura utilizzando un'immagine

Per definire una forma utilizzando un'immagine, l'immagine deve avere un canale alfa da cui il browser estrarrà l'immagine.

Una forma è definita da pixel il cui valore alfa è superiore a una determinata soglia. Il valore di soglia predefinito è o.o (completamente trasparente) oppure puoi impostarlo direttamente utilizzando la proprietà shape-image-threshold. Pertanto, qualsiasi pixel opaco può essere utilizzato come parte della forma definita dall'immagine.

Un futuro livello CSS Shapes potrebbe consentire il passaggio all'utilizzo dei dati sulla luminosità dell'immagine anziché del canale alfa. Se ciò accade, la soglia dell'immagine della forma verrà espansa per includere una soglia per la luminosità o il canale alfa, a seconda dello stato dell'interruttore.

Usiamo la seguente immagine per definire la forma dell'elemento e fare in modo che il testo lo avvolga:

) ; margine forma: 15px; soglia forma-immagine: 0,5; sfondo: #009966 url(percorso/dell'immagine-di-sfondo.jpg); maschera-immagine: url(leaf.png); )

Naturalmente, se applichi uno sfondo a un elemento, lo sfondo dovrà essere ritagliato al di fuori della forma data. La proprietà mask-image (con i prefissi appropriati) del modulo Masks può aiutare in questo, poiché la proprietà clip-path non accetta il canale alfa come valore. Il risultato è simile al seguente:

Se crei forme complesse, potrebbe risultare conveniente definire la forma utilizzando un'immagine. Ciò ti consentirà di utilizzare il canale alfa dell'immagine in Photoshop invece di dover impostare manualmente i punti.

Troverai conveniente anche usare un'immagine invece di una funzione di forma quando hai molti elementi mobili o aree di eccezione all'interno di un elemento, perché attualmente non esiste modo di dichiarare più forme per un singolo elemento. Ma se l'immagine contiene più regioni, il browser estrarrà quelle regioni e le utilizzerà.

Forme CSS nel responsive design

Le forme CSS possono essere adatte al responsive design? Le specifiche attuali per shape-outside includono questo punto perché consente di dimensionare un elemento in unità percentuali o di lunghezza e anche i punti di definizione della forma (parametri della funzione forma) possono essere specificati in percentuali. Ciò significa che un elemento con una determinata forma esterna può essere completamente reattivo, così come qualsiasi elemento mobile con una dimensione definita in percentuale.

La proprietà shape-inside non è ancora reattiva, ma è perché è stata spostata in un modulo di livello 2. Molti dei suoi attuali limiti scompariranno nel livello successivo.

Strumenti per creare forme

Creare forme complesse utilizzando le funzioni può essere un'attività dispendiosa in termini di tempo, soprattutto se stai creando una forma con molti punti e coordinate utilizzando polygon(). Fortunatamente, il team della piattaforma web Adobe sta lavorando alla produzione di strumenti interattivi per rendere questo processo molto più semplice. Bear Travis ha creato una raccolta di strumenti per la creazione di forme che ci consente di creare visivamente forme poligonali. Lo strumento genera una funzione di forma. Questo può essere utile, ma presenta i suoi limiti se desideri creare una forma basata su un'immagine specifica, poiché lo strumento non fornisce tale opzione.

Uno strumento più avanzato e interattivo è stato sviluppato dal team della piattaforma web Adobe. Lo strumento è stato recentemente rilasciato come estensione dell'editor gratuito di Brackets. Ti consente di eseguire il rendering e modificare le forme direttamente nel browser e dispone di una funzionalità di anteprima online che aggiorna i valori delle forme nel foglio di stile mentre li modifichi nella pagina. Ciò fornisce un feedback visivo immediato alle tue modifiche, permettendoti di vedere come le forme interagiscono con altri elementi sulla pagina.

Modifica una forma poligonale direttamente nel browser utilizzando la modalità di anteprima in Parentesi. Registrazione dello schermo realizzata da Razvan Caliman.

Questo strumento diventerà indispensabile in quanto facilita la creazione, la modifica e il debug delle figure. Razvan Caliman, che spiega come aprire l'editor Shapes in Brackets e iniziare a usarlo.

Il futuro: eccezioni CSS

La specifica CSS Shapes era una specifica dedicata alle forme e alle eccezioni CSS, ma era divisa. Mentre CSS Shape definisce le proprietà shape-inside e shape-outside, le eccezioni CSS definiscono proprietà che fanno sì che il contenuto si avvolga attorno a elementi non mobili, come quelli che sono posizionati in modo assoluto. Consentono al contenuto di fluire attorno a un'intera forma da diverse direzioni, come mostrato nell'immagine seguente.

In futuro, le eccezioni CSS consentiranno al contenuto di avvolgersi attorno a una forma come un riquadro, come mostrato nella diffusione della rivista. L'inserto può anche essere rotondo e il testo scorrerà attorno ad esso nello stesso modo.

Nuovo livello di cifre

L'attuale specifica CSS Shapes è solo il primo passo. Presto, nuove funzionalità ci daranno un maggiore controllo sulla creazione e sul flusso dei contenuti, rendendoci più semplice trasformare i modelli in progetti viventi con solo poche righe di codice. Ad oggi, gli editor delle specifiche si concentrano sul completamento dello shape-outside e potresti vedere il supporto di CSS Shapes in più browser entro la fine del 2014.

Puoi utilizzare Shapes oggi come parte di una strategia di miglioramento progressivo, sapendo che hanno un sostituto accettabile nei browser non supportati. Recentemente ho iniziato a usarli sul mio sito e la sostituzione sembra abbastanza accettabile. Per progetti più complessi, è possibile utilizzare uno script per verificare il supporto del browser e fornire eventuali sostituzioni se non è disponibile supporto. Puoi anche utilizzare i test Modernizr con questo script per verificare se la proprietà shape-outside è supportata o caricare la tua build che include questo test.

Le forme CSS ci consentono di creare un altro ponte tra la stampa e il web design. Gli esempi in questo articolo sono semplici, ma dovrebbero fornirti una base per creare un design complesso come una rivista o un poster senza doverti preoccupare di poterlo ricreare sullo schermo. Qualunque cosa tu stia imparando, dai layout non rettangolari all'animazione Shape, ora è il momento di sperimentare.

Ciao a tutti. Oggi toccheremo un argomento piuttosto insolito, ovvero il futuro del web design, le forme CSS.

Come sapete, ora è molto di moda, ma è costituito principalmente da rettangoli, che a loro volta limitano notevolmente gli orizzonti dei designer. E poi c’è l’adattabilità… che è molto limitante in termini di creatività. Ma qui c'è un enorme vantaggio: è facile avvolgere il testo attorno a un rettangolo, ma come far scorrere il testo attorno a forme rotonde o irregolari è più difficile. Perché le immagini non possono essere rotonde.

Proprio in questo caso i numeri ci vengono in aiuto. Il popolare sito CSS del W3C ha pubblicato la prima documentazione sulle forme. Ecco questo post in inglese Modulo CSS Shapes Livello 1. Questo modulo è stato recentemente rilasciato il 20 giugno. Finora si tratta di una versione beta, che include forme come rettangolo, triangolo, ellisse, cerchio e poligono.

Ora diamo uno sguardo più da vicino a qual è il vantaggio delle forme CSS utilizzando un esempio.

Per prima cosa, prendiamo qualche semplice markup HTML, grazie a http://www.webdesignerdepot.com:

Questo è un testo di esempio