Contenuto
- 01. Abbina le immagini agli schemi di colori del sito
- 02. Condivisione uniforme dello spazio nell'ultima riga di una griglia
- 03. Crea animazioni di particelle con box-shadow
- 04. Anima i poliedri con le trasformazioni
- 05. Master ’calc ()’ per il posizionamento
- 06. Rendi sano il modello della scatola con il "dimensionamento della scatola"
- 07. Centra verticalmente con CSS
- 08. Scegli come target una banca di oggetti correlati
- 09. Sillabazione di controllo
- 10. Approfitta dei modi di scrittura
- 11. Usa i gradienti in modi insoliti
- 12. Utilizzare la corrispondenza delle stringhe sui collegamenti
- 13. Fai in modo che FOUT lavori per te
- 14. Esplora SVG per gli sfondi
- 15. Focalizza gli utenti con le transizioni 3D
- 16. Crea menu circolari con CSS e matematica
- 17. Animare i collegamenti al passaggio del mouse
- 18. Crea semplici animazioni con fotogrammi chiave
- 19. Crea effetti 3D fluttuanti con le ombre
- 20. Aggiorna gli eleMenti della pagina utilizzando ": target"
- 21. Fornisci feedback con animazioni sottili
- 22. Preparati per "will-animate"
- 23. Umanizza i campi di input
- 24. Metti in pausa e riproduci animazioni CSS
- 25. Non utilizzare variabili CSS
Ad un certo punto con qualsiasi tecnologia, si ha la sensazione che praticamente tutto ciò che può essere fatto sia stato fatto. Quando qualcosa non è più così nuovo e brillante, l'interesse diminuisce e l'attenzione viene attirata sulla prossima grande novità. Questo è stato spesso il caso del settore web, che è incline a essere terribilmente eccitato da un certo aspetto della tecnologia prima, prima o poi, relegandolo al banale.
Quando apparve per la prima volta CSS, era rivoluzionario e nel tempo si è evoluto per consentire ai designer di creare layout di pagine web flessibili, ben congegnati e belli. Di recente, tuttavia, da varie parti è stato suggerito che CSS sia stanco e che forse il suo tempo al sole sia passato.
Voglio mostrare che c'è ancora molto entusiasmo e vita nel mondo dei CSS, sia che si tratti di proprietà all'avanguardia che potresti non aver ancora esplorato, o attraverso l'utilizzo di un aspetto del CSS in un modo che non avevi considerato in precedenza.
Ecco alcuni suggerimenti di alcuni dei migliori esperti CSS del settore.
(Nota: alcune tecniche di questa funzione sono all'avanguardia e potrebbero non essere completamente supportate su tutti i browser. Verifica accuratamente e assicurati che siano presenti fallback prima di avviare qualsiasi lavoro.)
01. Abbina le immagini agli schemi di colori del sito
Christopher Schmitt, organizzatore della conferenza
Le conferenze hanno i propri schemi di colori e, con molti oratori, il flusso di lavoro per la gestione dei ritratti può essere complesso. L'applicazione manuale dei filtri non si ridimensiona e si basa sul fatto che tu abbia accesso, ad esempio, a un'azione specifica di Photoshop. Ora uso PNG in scala di grigi ad alta risoluzione e aggiungo toni usando i filtri CSS. Ciò mi consente di abbinare qualsiasi ritratto allo schema di un evento e anche di riutilizzare le immagini su più temi. Ho solo bisogno di una nuova regola CSS per ciascuno. Guarda una demo.
02. Condivisione uniforme dello spazio nell'ultima riga di una griglia
Stephen Hay, designer e autore
Se hai un numero sconosciuto di elementi da visualizzare in una griglia, puoi utilizzare Flexbox per dividere l'ultima riga in modo uniforme. Quindi, se è presente un solo elemento, occuperà l'intera riga; se sono presenti due elementi, la riga verrà divisa a metà e così via. Guarda una demo.
03. Crea animazioni di particelle con box-shadow
Ana Tudor, programmatrice e fanatica della matematica
Mescolando scatola-ombra con un po 'di matematica e Sass, puoi rappresentare graficamente curve 2D, emulare il movimento 3D e creare folli animazioni di particelle che tutti scambieranno per quelle su tela! Guarda una demo e un'altra.
04. Anima i poliedri con le trasformazioni
Ana Tudor, programmatrice e fanatica della matematica
Probabilmente hai visto poligoni CSS puri creati con bordi, ma abbiamo uno strumento molto più potente nel file trasformare proprietà. Il concatenamento e l'applicazione di trasformazioni su elementi nidificati ci consente di creare poligoni complessi con sfondi o bordi dell'immagine e interni trasparenti. Usando le trasformazioni 3D, possiamo combinare queste forme 2D in poliedri e fare in modo che i solidi si uniscano, dispieghino, esplodano o ricombinino in un modo facilmente scambiato per WebGL. Guarda una demo.
05. Master ’calc ()’ per il posizionamento
Ana Tudor, programmatrice e fanatica della matematica
mi è piaciuto calc () dal momento in cui l'ho scoperto. È utile per domare i margini, il riempimento o le dimensioni e può essere un vero toccasana quando viene utilizzato per posizionare o ridimensionare gli sfondi, all'interno di sfumature o trasformazioni e combinato non solo con le stesse vecchie unità, ma anche con quelle nuove e fantastiche viewport.
06. Rendi sano il modello della scatola con il "dimensionamento della scatola"
Sawyer Hollenshead, sviluppatore e designer di Oak Studios
Uso dimensionamento della scatola per salvare la tua sanità mentale. Senza di essa, un elemento con una larghezza definita di 250 px e 25 px di riempimento si combina con una larghezza di 300 px, rendendo difficile la miscelazione di pixel e percentuali. Con dimensionamento scatola:scatola di confine bordi e imbottitura sono invece posizionati all'interno della larghezza definita.
07. Centra verticalmente con CSS
Trent Walton, fondatore di Paravel
Storicamente, è stato difficile centrare verticalmente qualcosa con CSS, ad esempio se avessi un'immagine con testo adiacente che desideri allineare verticalmente. Invece di calpestare e imprecare, usa Flexbox per affrontare i problemi di allineamento. Guarda una demo.
08. Scegli come target una banca di oggetti correlati
Jonathan Smiley, partner di Zurb e responsabile del design
Riduci lo spessore della linea CSS utilizzando selettori di attributi approssimativi sui nomi delle classi, per indirizzare un ampio banco di oggetti correlati, piuttosto che associare attributi comuni a ogni singola classe. Ad esempio ... [class * = "- block-grid-"] {} ... sceglierebbe come target: .small-block-grid-3 .large-block-grid-5
09. Sillabazione di controllo
Savid Storey, sostenitore del web aperto
La sillabazione è data per scontata in stampa e alcuni sviluppatori usano l'estensione trattini proprietà online, ma pochi sono a conoscenza di altre proprietà che forniscono un controllo più preciso. Se non stai attento, ottieni ladder di sillabazione in cui i trattini vengono utilizzati su più righe. Una regola generale è non più di due di fila, che puoi controllare usando trattino-limite-linee. Anche, trattino-limite-caratteri consente di specificare la lunghezza minima di una parola da sillabare, insieme al numero minimo di caratteri prima e dopo l'interruzione del trattino.
10. Approfitta dei modi di scrittura
David Storey, sostenitore del web aperto
Le modalità di scrittura consentono di definire la direzione in cui scorre il testo. Alcuni testi dell'Asia orientale sono scritti verticalmente, le linee crescono da destra a sinistra, specificate con modalità di scrittura: vertical-rl (tb-rl in IE). Il testo verticale non è realmente utilizzato nei sistemi di scrittura europei, ma può essere utile per le intestazioni delle tabelle quando lo spazio orizzontale è limitato.
11. Usa i gradienti in modi insoliti
Ruth John, designer
Le sfumature di sfondo possono avere un bell'aspetto se usate con bordi e punti elenco. Uso sia sul mio blog che con un preprocessore posso chiamare un mixin con il codice riutilizzato, in modo da non ripeterlo manualmente. Non impazzire perché i gradienti possono essere pesanti per il processore. Mixin SCSS per elenchi puntati:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, trasparente 31px); }
12. Utilizzare la corrispondenza delle stringhe sui collegamenti
Ruth John, designer
Sul mio blog, ho utilizzato selettori di attributi CSS con corrispondenza di stringhe per definire lo stile delle icone social. Questi appaiono in tutto il mio blog, a volte con testo ea volte senza, ma sempre con un'icona. Per modellare il collegamento corretto con l'icona social corretta, utilizzo una corrispondenza di stringa sul file href attributo dell'elemento di ancoraggio. Io uso *= così il href sull'elemento di ancoraggio deve contenere solo la stringa da me specificata.
/ * per tutti i collegamenti sociali * / .social a: before {display: inline-block; padding-right: 30px; font-family: ’FontAwesome’;} / * Ogni link specifico * / .social a [href * = "twitter"]: before {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: prima di {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: prima di {content: " f09e"; colore: # b47742;}
13. Fai in modo che FOUT lavori per te
Jason Pamental, direttore di H + W design
Il Web si basa sulla premessa di fornire contenuti, anche se il browser non è in grado di eseguire il rendering del bling. I caratteri web a caricamento lento possono essere frustranti, FOUT (Flash Of Unstyled Text) sconcerta mentre la navigazione e il testo scorre durante il download dei caratteri. Google e Typekit forniscono una risposta: il caricatore di caratteri web. Inserendo classi in una pagina, in base allo stato di caricamento dei caratteri, puoi applicare uno stile ai fallback con quelle classi per mantenere il reflow al minimo, eliminando anche la sindrome del "contenuto invisibile" di WebKit. Guarda una demo.
14. Esplora SVG per gli sfondi
Emil Björklund, sviluppatore web inUse
Gli unici browser ora senza supporto SVG sono IE8 e versioni precedenti e Android 2 WebKit, quindi è possibile utilizzare SVG per gli sfondi in CSS, specialmente insieme a una soluzione di fallback PNG, come Grunticon. SVG può essere stilizzato tramite CSS e c'è un interessante effetto bleed-through delle proprietà CSS (filtri!) Da SVG con cui possiamo giocare applicato all'HTML.
15. Focalizza gli utenti con le transizioni 3D
Emil Björklund, sviluppatore web inUse
Utilizzando trasformazioni 3D e facendo uso di dimensione z nelle interfacce utente può essere davvero utile, in particolare per nascondere / mostrare o comprimere / espandere il contenuto. È anche abbastanza facile avere un fallback a una transizione 2D, o nessuna transizione, in quelle situazioni. È un'area in cui un piccolo miglioramento progressivo può fare molto.
16. Crea menu circolari con CSS e matematica
Sara Soueidan, sviluppatore frontend
I menu circolari sono popolari nelle app mobili e puoi utilizzare trasformazioni e transizioni CSS per creare un semplice menu circolare. Questo menu può essere modificato e personalizzato per creare anche un menu con apertura verso l'alto o verso il basso. Non esiste un modo diretto in CSS per tradurre un elemento in diagonale, ma puoi utilizzare il valore del raggio del cerchio su cui desideri posizionare gli elementi e applicare una semplice regola matematica per calcolare i valori di traduzione orizzontale e verticale da passare al translateX () e translateY () funzioni. In questo modo, ti ritroverai con un file diagonale traduzione per spostare le voci di menu nelle posizioni corrette sul cerchio. L'evento clic che chiude / apre il menu può essere gestito utilizzando JavaScript, oppure puoi fare un ulteriore passo avanti e avere un menu solo CSS utilizzando un hack della casella di controllo CSS. Nella mia demo, utilizzo JavaScript e l'API classList HTML5, che non è supportata in tutti i browser, quindi dovrai visualizzare la demo in un browser moderno per farlo funzionare, o rimuovere il commento dal codice jQuery invece di utilizzare l'API classList codice.
Guarda una demo e un tutorial completo. Esempio di hacking CSS Checkbox.
17. Animare i collegamenti al passaggio del mouse
Paul Lloyd, designer dell'interazione di The Guardian
Non si dovrebbe fare affidamento sugli stati al passaggio del mouse per far funzionare un'azione o fornire informazioni importanti, ma è comunque possibile migliorare le interfacce per gli utenti basati sul mouse. Su 24ways.org, riveliamo i titoli degli articoli quando passi con il mouse sui link nella navigazione precedente / successiva. Ciò è stato ottenuto creando un file ::dopo pseudoelemento contenente contenuto generato derivato dal valore di a dati- attributo, con una transizione CSS applicata per farlo scorrere in vista al passaggio del mouse. Guarda una demo.
18. Crea semplici animazioni con fotogrammi chiave
Paul Lloyd, designer dell'interazione di The Guardian
Su 24ways.org, abbiamo aggiunto alette d'angolo animate ai riepiloghi, che si aprivano al passaggio del mouse. Ciò è stato fatto combinando il file @keyframes regola con la proprietà animation, alterando la posizione di un'immagine di sfondo per ottenere un'animazione basata su sprite. Il trucco è dichiarare il numero di fotogrammi che hai nello sprite dell'animazione con il gradini () valore. Guarda una demo.
19. Crea effetti 3D fluttuanti con le ombre
Catherine Farman, sviluppatrice di Happy Cog
Un progetto recente richiedeva una foto del prodotto fluttuante con un'ombra rotonda sotto, creando un effetto 3D di schiocco dallo schermo. L'ombra utilizza diverse funzionalità CSS3: border-radius trasparenza alfa e scatola-ombra. Funziona bene per griglie di prodotti, immagini in vetrina in un eroe della home page o qualsiasi design stravagante con una piega skeuomorfa. Guarda una demo.
20. Aggiorna gli eleMenti della pagina utilizzando ": target"
Simon Madine, sviluppatore web senior di HeRe
CSS non è un linguaggio di programmazione nel senso consueto, ma puoi comunque fare cose intelligenti senza ricorrere a JavaScript. Ad esempio, il file :bersaglio la pseudo-classe viene applicata agli elementi che sono l'obiettivo di un collegamento cliccato.
Puoi usarlo per definire lo stato di una pagina, indirizzare un genitore contenente molti elementi ei tuoi link diventano un mezzo per controllare l'aspetto e il layout di tutti i bambini con un solo clic. Guarda una demo.
21. Fornisci feedback con animazioni sottili
Neil Renicker, designer e sviluppatore
Pseudo-elementi CSS ::prima e ::dopo insieme alle transizioni CSS, può abilitare deliziose animazioni che forniscono un feedback sottile agli utenti del mouse. Ad esempio, crea una freccia CSS all'interno di uno pseudoelemento, applica una transizione allo pseudoelemento (transizione: tutti i .15 di facilità in uscita;), quindi aggiungi una semplice modifica del layout al file : hover pseudo-classe (come emendare margin-top). Guarda una demo.
22. Preparati per "will-animate"
Paul Lewis, programmatore e membro del team addetto alle relazioni con gli sviluppatori di Chrome
Se hai usato -webkit-transform: translateZ (0) per rendere magicamente più veloci le tue pagine, l'hack, che in molti browser crea semplicemente un nuovo livello di composizione, viene sostituito da animerà. Presto sarai in grado di dire al browser cosa intendi modificare di un elemento (la sua posizione, dimensione, contenuto o posizione di scorrimento) e il browser applicherà la giusta ottimizzazione sotto il cofano. Maggiori informazioni.
23. Umanizza i campi di input
Yaron Schoen, fondatore di Made For Humans
L'aggiunta di animazioni rapide agli elementi con cui gli utenti interagiscono rende l'interfaccia meno computerizzata. Con i campi di input, prova a inserire un file chiamata di transizione all'interno, quindi ogni volta che lo metti a fuoco o lo sfuggi, avviene una transizione graduale.
input, textarea {-moz-Transition: tutti gli 0.2s di facilità; -o-transizione: allentamento di tutti gli 0.2; -webkit-Transition: tutti gli scarti di 0.2s; -m-transizione: tutti gli 0.2s di facilità; transizione: allentamento di tutti gli 0.2;
24. Metti in pausa e riproduci animazioni CSS
Val Head, designer e consulente
Puoi "mettere in pausa" e "riprodurre" l'animazione CSS modificando il suo stato di riproduzione dell'animazione proprietà. Impostandolo su "in pausa", l'animazione viene interrotta finché non la modifichi stato di riproduzione dell'animazione per in esecuzione, ad esempio al passaggio del mouse.
.animating_thing {animation: spin 10s linear infinite; stato di riproduzione dell'animazione: in pausa; }. animating_thing: hover {animation-play-state: running; }
25. Non utilizzare variabili CSS
Dave Shea, designer e autore
Stiamo finalmente ottenendo le variabili CSS, ad esempio per scrivere una volta il valore esadecimale di un colore e farvi riferimento attraverso un foglio di stile. Ma la specifica ufficiale è dettagliata, aggiunge complessità sintattica, offre funzionalità insoddisfacenti ed è in gran parte non supportata dalla maggior parte dei browser. In un'era in cui Sass è molto popolare e va oltre le variabili con una potente logica di programmazione come funzioni personalizzate e istruzioni if / else, le specifiche ufficiali sono molto brevi.
Si spera che questi suggerimenti importanti abbiano rinnovato la tua visione dei CSS e le possibilità che rappresentano nello sviluppo e nel design web. Non dimenticare di testare a fondo nessuna di queste tecniche per verificare il supporto del browser prima di avviare qualsiasi lavoro.
Parole: Craig Grannell Illustrazione: Mike Chipperfield
Questo articolo è apparso originariamente nel numero 253 di net magazine.
