Share
Nel precedente tutorial, abbiamo dato uno sguardo alla creazione di forme CSS, permettendoci di definire la vera forma di un elemento. Abbiamo toccato le basi; creando un cerchio e avvolgendo alcune righe di testo attorno ad esso. Esaminiamo ora forme più complesse, rendendo i nostri layout di pagina più ricchi e meno squadrati.
Oltre le forme semplici come cerchi e rettangoli possiamo anche creare poligoni; forme costituite da più (tipicamente cinque o più) lati, come un pentagono o un esagono. Per crearne uno, usiamo il CSS poligono() funzione che prende più valori separati da virgola che definiscono le coordinate della forma:
Accentsconagua
.forma float: sinistra; background-size: contenere; background-repeat: no-repeat; margine: 30 px; larghezza: 265 px; altezza: 265 px; shape-margin: 20px; .pentagon background-image: url ('... /img/pentagon.svg'); shape-outside: poligono (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Con il codice sopra, abbiamo aggiunto cinque coordinate, generando così una forma di pentagono. L'aggiunta di un'altra coordinata alla funzione trasformerà la forma in un esagono, una in più per un ettagono, un'altra per un ottagono e così via.
Creare una forma poligonale manualmente non è facile come creare un cerchio o un'ellisse, specialmente se il poligono è complesso e coinvolge decine di coordinate. Fortunatamente, c'è un pratico strumento che rende la creazione di CSS Shapes più intuitiva.
CSS Shapes Editor è un'estensione di Chrome. Una volta installato, aggiunge una nuova scheda denominata forme in DevTools sotto il Elementi scheda, in linea con le altre sottoschede (stili, Computer, eccetera.)
Il forme la scheda contiene a forma-fuori proprietà abbinata a un plus + firmare per aiutarci ad aggiungere le funzioni CSS Shape. Selezioniamo il poligono() e l'elemento nella pagina, quindi possiamo iniziare a disegnare la forma direttamente nel browser proprio come un'applicazione grafica.
Mentre disegniamo, l'estensione del browser aggiorna la nostra funzione poligono con le rispettive coordinate della forma disegnata, aggiungendola contemporaneamente come stile in linea all'elemento. Una volta fatto, copia il codice generato e incollalo nel tuo foglio di stile.
Coordinate poligono generateUsando questa stessa tecnica possiamo facilmente disegnare e applicare qualsiasi forma o forma sulla nostra pagina web, ad esempio:
Immagine da Come aggiungere un dramma a una scena di pioggia Con Adobe PhotoshopUn altro possibile valore che possiamo usare nel forma-fuori proprietà è il url () funzione; la stessa funzione che usiamo altrove in CSS per aggiungere un'immagine di sfondo. In questo caso il url () la funzione abilita il forma-fuori proprietà per definire una forma di elemento basata sull'immagine.
Potresti scegliere di usare il url () funzione al posto di poligono() quando hai una grafica particolarmente complessa, con molte curve e angoli e desideri che i tuoi contenuti si avvolgano senza intoppi. Oppure, quando si tratta di contenuti generati dagli utenti in cui la definizione della forma potrebbe essere complicata.
Useremo questo pappagallo macaw da Unsplash. Innanzitutto, è necessario creare una versione con trasparenza, ad esempio:
La forma del nostro pappagallo araL'immagine del pappagallo originale viene aggiunta al contenitore come immagine di sfondo:
.container background-repeat: no-repeat; background-image: url ('... /img/parrot.png'); Per la forma stessa, la aggiungeremo a un altro elemento all'interno del contenitore e questa volta utilizzeremo un'altra proprietà Shape CSS chiamata Forma-image-soglia.
.shape shape-margin: 15px; shape-outside: url ('... /img/parrot-shape.png'); shape-image-threshold: 0; Questa particolare proprietà imposta la soglia di trasparenza minima che definisce la forma dell'immagine; ci vuole un numero tra 0 a 1 come il valore. Quindi se hai un'immagine leggermente trasparente potresti volerlo impostare 0.8 o 0.5. Abbiamo impostato il nostro valore 0 poiché l'area che circonda la forma del pappagallo è completamente trasparente.
Il risultato dovrebbe assomigliare a qualcosa:
Il supporto del browser per le forme CSS è accettabile; anche se non aspettatevi molto da Firefox, Internet, Explorer o Edge. Inoltre, rispondendo alla domanda di Stephen nel tutorial precedente, abbiamo diverse opzioni.
"Questa è una domanda interessante, ma genuina: qual è il ripiego di IE / FF? Sembra che andare all-in con un layout di forma finirebbe in alcuni posti strani per molti utenti. "- Stephen Bateman
In primo luogo, possiamo usare Modernizr. Modernizr è una libreria JavaScript affidabile per il test delle funzionalità del browser. Assicurati di aver incluso il Forme CSS e il Aggiungi CSS opzione di classi durante il download della libreria. Quindi puoi specificare gli stili di layout quando CSS Shape non è supportato, come segue:
/ ** * Quando il browser non supporta "Forma CSS". * / .no-shapes .shape shape-outside: polygon (); / ** * Stili quando il browser supporta "Forma CSS". * / .shapes .shape
Se caricare Modernizr sembra troppo, dal momento che è sufficiente verificare se il browser ha abilitato CSS, è possibile aggiungere le seguenti linee JavaScript.
if ('undefined' === typeof document.querySelector ('. shape'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Ogni proprietà in CSS viene fornita con il suo equivalente sotto l'oggetto Stile JavaScript, che ci consente di aggiungere lo stile dinamicamente tramite JavaScript. Questo codice rileva se il browser ha il shapeOutside metodo, quindi dove non è il caso aggiungiamo il no-css-shape classe che possiamo utilizzare per aggiungere gli stili di fallback.
.shape shape-outside: poligono (); .no-shapes .shape
Infine, possiamo usare il CSS @supporto sintassi nel foglio di stile, ad esempio.
@supports (shape-outside: circle ()) .shape shape-outside: circle ();
Spetta a te decidere quale approccio si adatta meglio al tuo progetto.
Una cosa grandiosa di CSS Shapes è che ha un naturale ripiego. No biggie. Avere un quadrato http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@ jensimmons) 11 febbraio 2015
In questo tutorial, abbiamo scoperto come usare il poligono() funzione in forma CSS e imparato come possiamo disegnare facilmente poligoni usando un'estensione di Chrome. Abbiamo anche imparato come sfruttare un'immagine per disegnare forme per noi; particolarmente utile con forme eccessivamente complesse. Infine, nonostante il supporto ragionevole del browser per le forme CSS, abbiamo parlato dell'utilizzo di alternative aggraziate per i browser non supportati.
