![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/n94shape.png\")
<\/p>\n<\/p>\n
Rettangoli all’interno di altri rettangoli: ecco da cosa sono sempre state fatte le nostre pagine web. Da molto tempo stiamo provando a liberarci da queste costrizioni usando CSS per creare delle forme geometriche<\/a>, ma queste forme non hanno mai influenzato la posizione del contenuto all’interno dell’elemento con una certa forma, o il modo in cui l’elemento viene visto dagli altri presenti sulla stessa pagina.<\/p>\n La nuova specifica CSS Shapes sta cambiando proprio questi aspetti. Introdotta da Adobe<\/a> a met\u00e0 del 2012, il suo obiettivo \u00e8 quello di fornire ai web designer un nuovo modo per cambiare la maniera in cui il contenuto si posiziona all’interno e attorno a forme complesse e arbitrarie: cosa che non siamo mai stati in grado di fare prima d’ora, nemmeno con JavaScript.<\/p>\n Per esempio, osservate come il testo si sistemi attorno alle immagini circolari nel seguente design. Senza Shapes, il testo sarebbe rettangolare, sprecando il tocco sofisticato che porta il design a un livello superiore.<\/p>\n Notate in questo esempio il modo in cui il testo si posiziona attorno alla forma circolare di una ciotola. Usando CSS Shapes possiamo creare dei design simili per il Web.<\/p>\n<\/div>\n Vediamo come funzionano le Shapes e come si possono cominciare ad usare.<\/p>\n Le CSS Shapes attualmente sono supportate solo in Webkit Nightly e Chrome Canary, ma il loro Module Level 1 ha raggiunto lo status di Candidate Recommendation, quindi le propriet\u00e0 e la sintassi definita nella specifica sono piuttosto stabili. Non ci vorr\u00e0 molto prima che venga implementata anche in altri browser. Questo “Level” \u00e8 incentrato sulle propriet\u00e0 delle Shapes che modificano lo scorrere del contenuto attorno<\/em> ad una forma. Pi\u00f9 nello specifico, ruota attorno alla propriet\u00e0 Utilizzando CSS Shapes insieme ad altre feature all’avanguardia come Clipping and Masking<\/a>, CSS Filters<\/a> e Compositing and Blending<\/a> potremo creare design pi\u00f9 raffinati e sofisticati senza dover ricorrere a programmi di grafica come Photoshop o InDesign.<\/p>\n I Level futuri di CSS Shapes si concentreranno sulla presentazione del contenuto anche all’interno di una forma. Per esempio, oggi \u00e8 semplice creare una forma a rombo in CSS: basta ruotare semplicemente l’elemento di 45 gradi e poi ruotare al contrario il contenuto al suo interno, cos\u00ec che si posizioni orizzontalmente sulla pagina. Ma il contenuto all’interno del rombo non sar\u00e0 influenzato dalla forma romboidale del suo container e rimarr\u00e0 sempre rettangolare. Quando la propriet\u00e0 Presto, CSS Shapes permetter\u00e0 che anche il testo all’interno di queste forme, come i rombi, si aggiusti ai lati del suo contenitore piuttosto che uscirne o venirne tagliato.<\/p>\n<\/div>\n Per usare subito CSS Shapes in Chrome Canary dovete abilitare la flag delle feature sperimentali. Se non siete sicuri su come si fa, date un’occhiata a questa guida passo a passo<\/a> sul blog di Adobe.<\/p>\n<\/div>\n Potete applicare una forma a un elemento usando una delle propriet\u00e0<\/em> di Shapes. Si passa alla shape property una shape function<\/em> come valore. La shape function \u00e8 il posto in cui si passano gli argomenti che definiscono la forma che si vuole applicare all’elemento.<\/p>\n Le forme possono essere create usando una delle seguenti funzioni:<\/p>\n Ogni forma \u00e8 definita da un insieme di punti. Alcune funzioni prendono i punti come parametri, altre richiedono gli offset, ma alla fine tutte disegnano le forme come un insieme di punti sull’elemento. Vedremo i parametri per ciascuna di queste funzioni negli esempi che creeremo.<\/p>\n Una forma pu\u00f2 anche essere definita estraendola da un’immagine con un alpha channel. Quando un’immagine viene passata alla shape property, il browser andr\u00e0 poi ad estrarre la forma dall’immagine basandosi su una Le propriet\u00e0 shape che accettano le funzioni di cui sopra come valori sono:<\/p>\n Si pu\u00f2 usare la propriet\u00e0 Usando le shape properties e functions, la dichiarazione di una shape su un elemento pu\u00f2 essere tanto semplice quanto aggiungere una riga di CSS:<\/p>\n Oppure:<\/p>\n Ma\u2026<\/p>\n Se applicate quella riga di CSS al vostro elemento, la shape non verr\u00e0 ad esso applicata a meno che non vengano soddisfatte due condizioni:<\/p>\n Come avete visto nelle definizioni di funzione di cui sopra, le forme sono definite da insiemi di punti. Poich\u00e9 questi punti hanno delle coordinate, serve un sistema di coordinate per far s\u00ec che il browser sappia dove posizionare ciascun punto sull’elemento. Quindi, l’esempio di prima funzionerebbe se includesse qualcosa come:<\/p>\n Comunque, dare all’elemento delle dimensioni intrinseche non influenza la sua “responsiveness” (ne parleremo pi\u00f9 avanti).<\/p>\n Dal momento che ciascuna forma \u00e8 definita da un insieme di punti posizionati usando una coppia di coordinate, cambiare le coordinate di un punto influenzer\u00e0 direttamente la forma creata. Per esempio, l’immagine seguente mostra una forma esagonale che pu\u00f2 essere creata usando la funzione Se l’elemento ha float right e gli si applica questa forma, il contenuto alla sua sinistra cambier\u00e0 il suo andamento quando la coordinata del punto arancio verr\u00e0 cambiata all’interno della funzione Le CSS Shapes sono definite e create all’interno di una reference box<\/em>, che \u00e8 il box usato per disegnare la forma sull’elemento. Oltre all’altezza e alla larghezza dell’elemento, i box del box model dell’elemento – margin box<\/em>, content box<\/em>, padding box<\/em> e border box<\/em> – vengono anche usati come riferimento per specificare la dimensione della forma di un elemento.<\/p>\n Di default, il margin box viene usato come riferimento, quindi, se un elemento a cui volete applicare una forma ha un margin sul lato inferiore (bottom), la forma che definite sull’elemento si estender\u00e0 fino ai bordi dell’area di margin, non fino alla border area dell’elemento. Se volete usare uno degli altri box value, potete specificarlo insieme alla shape function che passate alle shape properties:<\/p>\n La parola chiave Cominceremo col posizionare alcune informazioni attorno all’immagine di un avatar di un utente, come potreste voler fare per mostrare uno user profile o un testimonial.<\/p>\n Usando CSS Shapes, il testo attorno ad un’immagine circolare per lo user profile scorre lungo la forma invece di rimanere rettangolare.<\/p>\n<\/div>\n Useremo la funzione Potreste chiedermi “Perch\u00e9 non usiamo Noi useremo<\/em> la propriet\u00e0 Senza CSS Shapes, il testo vede l’immagine come rettangolare e quindi si scorre attorno ad una forma rettangolare non intorno ad una circolare.<\/p>\n<\/div>\n In un browser che non supporta CSS Shapes, il contenuto attorno all’immagine circolare si posizioner\u00e0 attorno a questa come se non fosse circolare. Questo \u00e8 il modo in cui apparirebbe il fallback nei browser pi\u00f9 vecchi.<\/p>\n Per cambiare il flusso di contenuto perch\u00e9 si sistemi attorno ad una forma, useremo le shape properties.<\/p>\n Con questo codice, il testo “vedr\u00e0” la forma circolare applicata all’immagine e vi si posizioner\u00e0 attorno, come mostrato nel primo screenshot. (Potete vedere il risultato “live” qui<\/a>). Nei browser che non supportano queste propriet\u00e0, il risultato sar\u00e0 quello di fallback mostrato nella seconda immagine.<\/p>\n Potete usare la funzione I punti di domanda indicano che questi parametri sono opzionali e possono essere omessi. Se ne omettete uno, quel parametro verr\u00e0 impostato al suo valore di default dal browser. Quando usate Si pu\u00f2 specificare il raggio del cerchio usando una qualsiasi unit\u00e0 di lunghezza ( La funzione Sebbene non direttamente collegata a un cerchio o a un ellisse, la funzione La funzione Il seguente codice creer\u00e0 un rettangolo arrotondato su un elemento con float.<\/p>\n Guardate l’esempio live qui<\/a>.<\/p>\n L’ultima funzione shape \u00e8 Nell’esempio seguente, un’immagine con float right occupa l’intera altezza dello schermo usando le unit\u00e0 della viewport. Vogliamo che il testo scorra sulla sinistra lungo la clessidra all’interno dell’immagine, cos\u00ec usiamo la funzione Il CSS per l’immagine qui sopra \u00e8 cos\u00ec:<\/p>\n Potete impostare le coordinate dei punti che definiscono la forma in unit\u00e0 di lunghezza o in percentuali, come ho fatto io in questo esempio.<\/p>\n Questo codice da solo produrr\u00e0 il risultato di cui sopra, ma come potete vedere, la shape function non influenza le parti rimanenti dell’immagine al di fuori della forma definita. In realt\u00e0, applicare una shape function a un elemento, che sia un’immagine, un container o qualcosa tra questi due estremi, non influenzer\u00e0 niente se non l’area in cui scorrer\u00e0 il contenuto. I background, i bordi e tutto il resto rimarranno invariati.<\/p>\n Per visualizzare la forma del poligono che abbiamo creato dobbiamo ritagliare le parti dell’immagine al di fuori della forma. Ci viene in aiuto la propriet\u00e0 La propriet\u00e0 Il risultato apparir\u00e0 cos\u00ec:<\/p>\n La propriet\u00e0 La propriet\u00e0 La funzione Per definire una forma utilizzando un’immagina, tale immagine ha bisogno di un alpha channel da cui il browser pu\u00f2 estrarre la forma.<\/p>\n Una forma \u00e8 definita dai pixel i cui valori alfa sono maggiori di una certa soglia, che ha come valore di default 0.0 (completamente trasparente), oppure potete impostarla esplicitamente usando la propriet\u00e0 Un futuro livello di CSS Shapes potrebbe definire uno switch per utilizzare i dati di “luminance” da un’immagine invece dei dati alpha. Se questo accadesse, Useremo la seguente immagine per definire una forma su un elemento e fare in modo che il testo si posizioni attorno ad essa.<\/p>\n Usare la propriet\u00e0 Ovviamente, se aveste applicato un background all’elemento, il background avrebbe dovuto essere ritagliato all’esterno della forma definita. La propriet\u00e0 Se state creando forme complesse, potreste voler definire una forma usando un’immagine. Questo vi permette di usare un’immagine con un alpha channel in Photoshop invece che definire manualmente i punti.<\/p>\n Potreste anche voler usare un’immagine invece di una shape function quando avete pi\u00f9 float o pi\u00f9 aree di esclusione all’interno di un elemento – perch\u00e9, per il momento, non potete dichiarare pi\u00f9 forme su un elemento. Ma se l’immagine contiene pi\u00f9 aree, il browser estrarr\u00e0 queste aree dall’immagine e le user\u00e0.<\/p>\n<\/div>\n CSS Shapes pu\u00f2 rientrare nel nostro workflow responsive? Ci viene in aiuto l’attuale specifica di Creare forme complesse con le shape function pu\u00f2 essere un compito scoraggiante, specialmente se ne state creando una con molti punti e coordinate usando Uno Shape Tool pi\u00f9 avanzato ed interattivo \u00e8 stato sviluppato dal team di Adobe Web Platform. Tale strumento \u00e8 stato rilasciato recentemente<\/a> come estensione dell’editor gratuito Brackets<\/a> di Adobe. Permette di visualizzare ed editare le forme direttamente nel browser e ha una feature di “live preview” che aggiorna i valori di forma nello stylesheet quando li si cambia sulla pagina. In questo modo, si ha un feedback visivo istantaneo dei cambiamenti, permettendoci di vedere come le forme interagiscono con gli altri elementi sulla pagina.<\/p>\n Modifica di una forma poligonale direttamente nel browser con la modalit\u00e0 “live preview” di Brackets. Screen capture di Razvan Caliman.<\/em><\/p>\n<\/div>\n Questo strumento sar\u00e0 indispensabile perch\u00e9 faciliter\u00e0 la creazione, la modifica e il debugging delle nostre forme. Razvan Caliman ha scritto un articolo sul blog di Brackets<\/a> in cui spiega come utilizzare lo Shapes editor in Brackets.<\/p>\n<\/div>\n La specifica CSS Shapes si trovava una volta nella specifica CSS Shapes and Exclusions, ma le due specifiche vennero separate. CSS Shapes definisce le propriet\u00e0 In futuro, CSS Exclusions ci permetter\u00e0 di far scorrere il testo attorno ad una forma come il “pullquote” (frase di articolo estratta e stampata a caratteri pi\u00f9 grandi, ndr<\/em>), come mostrato nel layout di questo magazine. Il pullquote potr\u00e0 anche essere circolare e il testo gli si avvolger\u00e0 comunque attorno. Immagine di Justin Thomas Kay<\/a>.<\/em><\/p>\n<\/div>\n Saranno anche possibili layout simili con elementi di varie forme posizionati in maniera assoluta al centro di un articolo, con il testo che scorre attorno all’elemento su tutti i lati.<\/p>\n<\/div>\n L’attuale specifica di CSS Shapes non \u00e8 altro che un primo passo. Ben presto, avremo nuove opzioni che ci daranno pi\u00f9 controllo sulla creazione di forme e sul posizionamento del contenuto al loro interno e al di fuori di esse, rendendo molto pi\u00f9 semplice per noi tradurre i nostri mockup in design “live” usando solo poche righe di codice. Ad oggi, gli editor della specifica si stanno concentrando sulla pubblicazione di Potete usare Shapes oggi come parte di un workflow basato sul progressive enhancement, sapendo che hanno dei fallback accettabili nei browser in cui non sono supportate. Ho recentemente cominciato ad applicarle al mio sito web<\/a> e il fallback \u00e8 decisamente “normale”. Per design pi\u00f9 complessi, potete usare uno script per controllare se un browser supporta le Shapes e per fornire il fallback che volete se non lo sono. Potete anche estendere i test di Modernizr<\/a> con questo script<\/a> per vedere se CSS Shapes ci permette di colmare una lacuna esistente tra stampa e web. Gli esempi in questo articolo sono semplici, ma possono costituire la base per la creazione di design complessi come un qualunque magazine o poster, senza doversi preoccupare se sarete in grado di riprodurli sullo schermo. Qualunque cosa vogliate esplorare, dai layout non rettangolari<\/a> all’animazione delle Shapes<\/a>, questo \u00e8 il momento giusto per esplorare.<\/p>\n Illustrazioni: {carlok}<\/p>\n<\/div>\n \u00a0<\/p>\n","protected":false},"excerpt":{"rendered":" La nuova specifica CSS Shapes ha il potenziale per cambiare il modo in cui si pensa alla sistemazione del contenuto su una pagina web. Sara Soueidan ci guida attraverso i vari modi in cui si pu\u00f2 usare questa propriet\u00e0, con risultati che vanno dal semplicemente elegante allo sbalorditivo.<\/p>\n","protected":false},"author":818,"featured_media":7000731,"comment_status":"open","ping_status":"open","template":"","categories":[],"tags":[],"coauthors":[420],"class_list":["post-461","article","type-article","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000731"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=461"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Immagine](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/shape-outside-example.jpg\")
<\/p>\n\nSupporto nei browser<\/h2>\n
shape-outside<\/code> e sulle propriet\u00e0 ad essa correlate.<\/p>\nshape-inside<\/code> di CSS Shapes verr\u00e0 implementata, saremo in grado di far s\u00ec che anche il contenuto diventi a forma di rombo, rendendo fattibile il layout come quello mostrato nell’immagine seguente.<\/p>\n![\"Immagine](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/rhombic.jpg\")
<\/p>\n\nCreare una CSS Shape<\/h2>\n
![\"Illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/shape-rule.png\")
<\/div>\n\n
circle()<\/code><\/li>\nellipse()<\/code><\/li>\ninset()<\/code><\/li>\npolygon()<\/code><\/li>\n<\/ul>\nshape-image-threshold<\/code>. La forma \u00e8 definita dai pixel il cui valore alfa \u00e8 maggiore della soglia (treshold). L’immagine deve essere compatibile con CORS<\/a>. Se l’immagine fornita per qualche ragione non pu\u00f2 essere mostrata (come se ad esempio non esistesse), allora non verr\u00e0 applicata alcuna forma.<\/p>\n\n
shape-outside<\/code>: sistema il contenuto attorno (all’esterno) della forma<\/li>\nshape-inside<\/code>: sistema il contenuto all’interno della forma<\/li>\n<\/ul>\nshape-outside<\/code> insieme alla propriet\u00e0 shape-margin<\/code> per aggiungere un margine attorno alla forma cos\u00ec da allontanare il contenuto che scorre attorno alla forma, creando pi\u00f9 spazio fra questa e il contenuto. Proprio come shape-outside<\/code> ha una propriet\u00e0 shape-margin<\/code>, cos\u00ec shape-inside<\/code> ha una propriet\u00e0 shape-padding<\/code>, che aggiunge un padding interno.<\/p>\n.element {\n\tshape-outside: circle(); \/* il contenuto scorrer\u00e0 attorno\n al cerchio definito sull'elemento *\/\n}<\/code><\/pre>\n.element {\n\tshape-outside: url(path\/to\/image-with-shape.png);\n}<\/code><\/pre>\n\n
.element {\n\tfloat: left;\n\theight: 10em;\n\twidth: 15em;\n\tshape-outside: circle();\n}<\/code><\/pre>\npolygon()<\/code>. La forma \u00e8 creata con sei punti. Cambiando la coordinata orizzontale del punto in arancio cambier\u00e0 anche la forma risultante e influenzer\u00e0 il flusso del contenuto all’interno e\/o all’esterno di qualsiasi elemento a cui \u00e8 applicata questa forma.<\/p>\n![\"Immagine](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/shape-points.png\")
<\/p>\npolygon()<\/code>.<\/p>\n<\/div>\n<\/div>\n\nIl reference box di una Shape<\/h2>\n
shape-outside: circle(250px at 50% 50%) padding-box;<\/code><\/pre>\npadding-box<\/code> nella regola di cui sopra specifica che la forma verr\u00e0 applicata e sar\u00e0 ristretta al padding box (padding area) dell’elemento. La funzione circle()<\/code> definisce una forma circolare, la sua dimensione e la sua posizione sull’elemento.<\/p>\n<\/div>\n\nDefinire le Shapes usando le shape function<\/h2>\n
![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/demo-user-profile-screenshot.png\")
<\/p>\ncircle()<\/code> per applicare una forma circolare all’immagine del profilo, usando il seguente markup:<\/p>\n<img src=\"http:\/\/api.randomuser.me\/0.3.2\/portraits\/men\/7.jpg\" \n alt=\"profile image\" \/>\n\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque \n nam blanditiis eveniet enim eligendi quae adipisci?<\/p>\n\n<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae \ndeleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta \nreprehenderit laudantium optio ipsam ducimus consequatur enim fuga \nquibusdam mollitia nesciunt modi.<\/p><\/code><\/pre>\nborder-radius<\/code> per arrotondare l’immagine?” La risposta \u00e8 che la propriet\u00e0 border-radius<\/code> non ha alcun effetto sul fluire del contenuto all’interno o attorno all’elemento a cui \u00e8 applicato: non influenza l’area del contenuto dell’elemento n\u00e9 l’area di posizionamento del contenuto attorno all’elemento. Ha effetto solo sui bordi di un elemento e sugli eventuali background. L’area del background \u00e8 agganciata agli angoli arrotondati dalla propriet\u00e0 e questo \u00e8 tutto; il contenuto all’interno dell’elemento rimarr\u00e0 rettangolare e il contenuto al di fuori dell’elemento vedr\u00e0 ancora e tratter\u00e0 l’elemento come se fosse rettangolare, perch\u00e9 lo \u00e8.<\/p>\nborder-radius<\/code> per rendere l’immagine circolare. Questo \u00e8 quello che facciamo di solito per arrotondare le immagini o altri elementi di una pagina:<\/p>\nimg {\n\tfloat: left;\n\twidth: 150px;\n\theight: 150px;\n\tborder-radius: 50%;\n\tmargin-right: 15px;\n}<\/code><\/pre>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/demo-user-profile-screenshot-incomplete.png\")
<\/p>\nimg {\n\tfloat: left;\n\twidth: 150px;\n\theight: 150px;\n\tborder-radius: 50%;\n\n\tshape-outside: circle();\n\tshape-margin: 15px;\n}<\/code><\/pre>\ncircle()<\/code> cos\u00ec com’\u00e8 o passandogli dei parametri. La sua sintassi ufficiale \u00e8:<\/p>\ncircle() = circle( [<shape-radius>]? [at <position>]? )<\/code><\/pre>\ncircle()<\/code> cos\u00ec com’\u00e8, invece di impostare semplicemente la sua posizione, il suo default consister\u00e0 in un cerchio posizionato al centro dell’elemento a cui la state applicando.<\/p>\npx<\/code>, em<\/code>, pt<\/code>, etc.). Potete anche specificare il raggio usando closest-side<\/code> o farthest-side<\/code>, ma closest-side<\/code> \u00e8 il default, quindi il browser user\u00e0 la lunghezza dal centro dell’elemento verso il suo lato pi\u00f9 vicino come lunghezza del raggio. farthest-side<\/code> usa la lunghezza dal centro verso il lato pi\u00f9 lontano.<\/p>\nshape-outside: circle(farthest-side at 25% 25%); \/* definisce un cerchio \n il cui raggio \u00e8 met\u00e0 della lunghezza del lato pi\u00f9 lungo, \n posizionato nel punto di coordinate 25% 25% \n sul sistema di coordinate dell'elemento *\/\n\nshape-inside: circle(250px at 500px 300px); \/* definisce un cerchio il cui centro \n \u00e8 posizionato orizzontalmente a 500px e verticalmente a 300px, \n con un raggio di 250px. *\/<\/code><\/pre>\n![\"L'illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/closest-side-farthest-side.png\")
<\/div>\nellipse()<\/code> funziona allo stesso modo della funzione circle()<\/code>, con lo stesso elenco di valori ma invece che prendere in ingresso un parametro per il raggio, ne richiede due: uno per la lunghezza del raggio sull’asse X e un altro per l’asse Y.<\/p>\nellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )<\/code><\/pre>\ninset()<\/code> \u00e8 usata per creare forme rettangolari all’interno di un elemento. Dal momento che gli elementi sono gi\u00e0 rettangolari, tuttavia, non abbiamo bisogno di creare altri rettangoli. Al contrario, inset()<\/code> ci aiuta a creare rettangoli con angoli arrotondati il cui contenuto scorre attorno a questi angoli.<\/p>\n![\"Immagine](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/inset-example.png\")
<\/div>\ninset()<\/code> prende da uno a quattro valori di offset, che specificano l’offset verso l’interno dai lati del reference box<\/em>. Questi specificano dove il rettangolo “inset” deve andare all’interno dell’elemento. La funzione prende anche un parametro opzionale per arrotondare gli angoli del rettangolo “inset”. Gli angoli arrotondati sono specificati esattamente nello stesso modo di border-radius, usando da uno a quattro valori, insieme alla parola chiave round<\/code>.<\/code><\/p>\ninset() = inset( offset{1,4} [round <border-radius>]? )<\/code><\/pre>\n.element {\n\tfloat: left;\n\twidth: 250px;\n\theight: 150px;\n\tshape-outside: inset(0px round 100px) border-box;\n}<\/code><\/pre>\npolygon()<\/code>, che definisce forme arbitrarie pi\u00f9 complesse usando un qualunque numero di punti. La funzione prende in ingresso un insieme di coppie di coordinate, ciascuna coppia specifica la posizione di un punto. L’insieme di punti forma la shape.<\/p>\npolygon()<\/code> per definire una forma irregolare sull’immagine.<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/polygon-example-incomplete.png\")
<\/div>\nimg.right {\n\tfloat: right;\n\theight: 100vh;\n\twidth: calc(100vh + 100vh\/4);\n\tshape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, \n 45% 40%);\n}<\/code><\/pre>\nclip-path<\/code> da CSS Masking Module<\/a>.<\/p>\nclip-path<\/code> prende le stesse shape function e gli stessi valori delle shape properties. Se passiamo la stessa forma poligonale che abbiamo usato nella propriet\u00e0 shape-outside<\/code> alla propriet\u00e0 clip-path<\/code>, questa ritaglier\u00e0 tutte le parti dell’immagine che si trovano al di fuori della forma definita.<\/p>\nimg.right {\n\tfloat: right;\n\theight: 100vh;\n\twidth: calc(100vh + 100vh\/4);\n\tshape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%,\n 45% 40%);\n\t\/* clip the image to the defined shape *\/\n\tclip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);\n}<\/code><\/pre>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/polygon-example-finished.png\")
<\/div>\nclip-path<\/code> \u00e8 al momento supportata con i prefissi<\/strong>, quindi funzioner\u00e0 in Chrome con il prefisso -webkit-<\/code> aggiunto alla propriet\u00e0 clip-path<\/code>. Potete guardare la live demo qui<\/a>.<\/p>\nclip-path<\/code> \u00e8 una compagna eccellente per le shape properties, perch\u00e9 contribuisce a visualizzare le forme create e a ritagliare tutte le parti dell’elemento che si trovano al di fuori delle forme definite, cos\u00ec probabilmente vi troverete ad usarla molto spesso insieme alle shape properties.<\/p>\npolygon()<\/code>, inoltre, prende in ingresso una keyword opzionale che pu\u00f2 avere valore nonzero<\/code> o evenodd<\/code>. Questo specifica il modo in cui trattare le aree all’interno della forma poligonale che possono intersecarsi. Si veda la propriet\u00e0 SVG fill-rule<\/a> per i dettagli.<\/p>\n<\/div>\n\nDefinire una forma usando un’immagine<\/h2>\n
shape-image-shreshold<\/code>. Quindi, qualunque pixel non trasparente sar\u00e0 usato come parte della forma definita dall’immagine.<\/p>\nshape-image-treshold<\/code> verrebbe estesa per applicare la sua soglia o all’alpha o alla luminance, a seconda dello stato dello switch.<\/p>\n![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/leaf.png\")
<\/div>\nshape-outside<\/code> con il valore url()<\/code> che punta a questa immagine, possiamo far scorrere il contenuto attorno all’elemento con questa forma di foglia.<\/p>\n.leaf-shaped-element {\n\tfloat: left;\n\twidth: 400px;\n\theight: 400px;\n\tshape-outside: url(leaf.png);\n\tshape-margin: 15px;\n\tshape-image-threshold: 0.5;\n\tbackground: #009966 url(path\/to\/background-image.jpg);\n\tmask-image: url(leaf.png);\n}<\/code><\/pre>\nmark-image<\/code> (con i prefissi appropriati) facente parte del Masking Module pu\u00f2 fare proprio questo, dal momento che la propriet\u00e0 clip-path<\/code> non prende un’immagine alpha come valore. Il risultato ha questo aspetto:<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/shape-image-example.png\")
<\/div>\n\nCSS Shapes nel responsive design<\/h2>\n
shape-outside<\/code>, perch\u00e9 ci permette di specificare le dimensioni dell’elemento sia in percentuali sia in altre unit\u00e0 di lunghezza e i punti che definiscono una forma (parametri della funzione shape) possono essere anch’essi impostati in percentuali. Questo significa che un elemento con shape-outside<\/code> dovrebbe essere completamente responsive, proprio come qualunque altro float con dimensioni in percentuale.<\/p>\nshape-inside<\/code> non \u00e8 ancora responsive ma solo perch\u00e9 \u00e8 stata spostata nel Module Level 2. Molte delle sue attuali limitazioni verranno risolte nel prossimo livello.<\/p>\n<\/div>\n\nStrumenti per la forma<\/h2>\n
polygon()<\/code>. Fortunatamente, il team della piattaforma web di Adobe sta lavorando su dei tool interattivi che renderanno questa operazione molto pi\u00f9 semplice. Bear Travis ha creato una collezione di Shape Tools<\/a> che ci permettono di creare delle forme poligonali in maniera visuale. Il tool genera poi una funzione di forma al posto nostro. Tutto ci\u00f2 \u00e8 utile, ma pu\u00f2 essere limitante se volete creare una forma basata su un’immagine specifica, perch\u00e9 non ci sono modi con cui poter inserire l’immagine nel tool e poi crearne una forma.<\/p>\n![\"Screen](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/shapes-polygon.gif\")
<\/p>\n\nIl futuro: CSS Exclusions<\/h2>\n
shape-inside<\/code> e shape-outside<\/code>, mentre CSS Exclusions definir\u00e0 delle propriet\u00e0 che ci permetteranno di far scorrere il contenuto attorno agli elementi che non hanno float, come gli elementi con posizione assoluta. Ci\u00f2 render\u00e0 possibile lo scorrere del contenuto attorno all’intera forma su lati diversi, come mostrato nell’immagine seguente:<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/06\/exclusion-example.jpg\")
<\/p>\n\nSpingersi oltre le Shapes<\/h2>\n
shape-outside<\/code> e molto probabilmente vedremo le CSS Shapes in sempre pi\u00f9 browser entro la fine del 2014.<\/p>\nshape-outside<\/code> \u00e8 supportata, o scaricarne una “custom build” che includa questo test.<\/p>\n