Share
Ho sentito che questa cosa di CSS3 è di gran moda. Le risorse stanno volando intorno al mondo tutoriale e alla blogosfera fornendo esempi brillanti di nuovi modi creativi di progettare usando i moduli CSS3. Tuttavia, è facile sovra-implementare e perdere la brillante sottigliezza delle grandi interfacce utente. Ecco tre suggerimenti rapidi per l'utilizzo di potenti tecniche CSS3 in modi sottili.
Le persone sono in grado di percepire e distinguere cambiamenti molto piccoli.
La linea di fondo qui è che le persone sono in grado di percepire e distinguere cambiamenti molto piccoli che potrebbero non notare consciamente o essere in grado di ricordare. Dubito che questa sia una nuova informazione per chiunque. È uno dei concetti più noti sviluppati da studi di sensazioni e percezioni. A volte, una cosa può essere gradita a un'altra. E a volte, non sai nemmeno perché.
Tuttavia, tieni presente che il web design è un consapevole processi. Il design sottile può essere difficile perché è facile pensare "che abbia solo bisogno di un po ' Di Più."Prima che tu lo sai, la sottigliezza è persa.
Con questo in mente, vorrei presentare tre tecniche CSS3 che possono essere utilizzate per fornire varie forme di sottigliezza per il web design.
La transizione è uno strumento potente, che consente ai CSS di animarsi essenzialmente da un endpoint a un altro. La sintassi racchiude un set di strumenti abbastanza ricco: proprietà, durata e andamento. Ognuno di questi pezzi può essere variato per fornire diversi livelli di sottigliezza. Spesso basta giocare, come spesso accade. In altre parole, gioca con i valori fino ad esso sembra giusto. Solo non farti impazzire. È facile perdere i ritocchi anche di un elenco così breve di variabili.
Non è raro che gli elementi di navigazione cambino colore quando il mouse è in bilico. La transizione può rendere quel cambiamento di colore un po 'più agevole.
.nav li a color: # 282828; text-decoration: none; -webkit-transition: color .1s easy-in-out; -moz-transition: color .1s easy-in-out; -o-transizione: color .1s easy-in-out; transizione: colore .1s easy-in-out; .nav li a: hover color: # 808080;
Il cambiamento di colore non è sottile qui. È chiaramente evidente. Che cosa è sottile è la levigatura di quel cambiamento di colore.
Il trucco per mantenere questo sottile è la durata. Se è troppo lungo, l'effetto sarà troppo evidente. La navigazione può diventare rapidamente gravosa aleggiare con il mouse e sembrare amatoriale.
Guarda la demo.
Nel caso in cui non hai ancora approfondito CSS3, è importante notare l'ordine in cui arrivano le dichiarazioni specifiche del browser. In realtà, è solo importante notare che la dichiarazione specifica di un browser non arriva per ultima nella lista. Il CSS prende l'ultima dichiarazione e lo rende più importante in caso di conflitto. Una volta rilasciata una specifica di transizione effettiva, presumibilmente tutti i browser implementeranno il modulo senza necessitando del prefisso proprietario. Pertanto, il tuo CSS diventa in qualche modo pronto per il futuro senza alcun costo reale per le implementazioni correnti.
Inoltre, nota che le transizioni sono nel stile elemento, non il suo hover. Ciò fornirà la transizione sia al passaggio del mouse che al passaggio del mouse.
Il selettore nth-of-type o nth-child consente di dichiarare i pattern in una serie di elementi e di applicare gli stili di conseguenza. Ad esempio, in una tabella, nth-child potrebbe colorare ogni altra riga usando: nth-child (dispari). Diamo un'occhiata a un esempio che potrebbe non essere altrettanto chiaro.
Prenderemo un markup di navigazione piuttosto standard ...
... e applica alcuni stili.
.nav li: nth-of-type (dispari) margin-top: 5px; .nav li: nth-of-type (even) margin-top: 12px; .nav li: nth-of-type (2n + 2) margin-right: 0; .nav li: nth-of-type (2n + 3) margin-left: 8px; margin-right: 25px;
Questo creerà un menu sfalsato con pochi elementi alti, pochi elementi bassi e un paio di set che sembrano accoppiati. La differenza visiva tra questo e un menu in linea è chiara.
Quindi cosa c'è di così sottile? La sottigliezza qui è duplice.
Quindi, forse un visitatore prima vede "Casa". Probabilmente quel visitatore si renderà conto che lui o lei è già sulla home page. Lui o lei potrebbe vedere molto bene "Lavoro". *clic*. Dopo aver visto alcuni pezzi di lavoro, potrebbero aver visto "Blog" dopo, ma forse il gruppo finisce per essere più forte e il loro desiderio è tirato su "Informazioni". Il progettista ora guida il visitatore utilizzando un layout di navigazione. Lui o lei ha fornito suggerimenti su dove i visitatori dovrebbero andare, in sequenza.
Succederà ogni volta? Assolutamente no. Accadrà qualche volta? Lo scommetterei.
Questo è il punto di sottigliezza. Non influenza in modo schiacciante l'utente, ma potrebbe fornire qualche utile suggerimento o motivazione di tanto in tanto.
Ecco un modo semplice per introdurre sottigliezza in un design. Ironia della sorte, probabilmente ha la sintassi più complicata là fuori. Non solo, ma ha anche sintassi significativamente diverse tra i browser. Diamo un'occhiata.
Dato un semplice modulo di contatto (email, messaggio), ecco alcuni stili:
modulo input [tipo = testo], modulo textarea background-image: -webkit-gradient (lineare, a sinistra in basso, a sinistra in alto, color-stop (0, rgb (255,255,255)), color-stop (1, rgb (248,248,248) )); background-image: -moz-linear-gradient (centro-fondo, rgb (255,255,255) 0%, rgb (248,248,248) 100%); delineare: none; border: solid 1px #ccc;
È una dichiarazione abbastanza completa, non è vero? E questo copre solo due browser!
Non ho intenzione di entrare tutti della sintassi, perché altri lo hanno fatto per me. Fai riferimento a "Capire i gradienti CSS" su Nettuts + per una migliore comprensione. Quando hai finito, parliamo di sottigliezza.
Il gradiente in queste aree di testo è quasi impercettibile. Tuttavia, se giochi con il CSS e tiri fuori il confine, ti assicuro che è lì.
Se ancora non riesci a vederlo in quella seconda immagine, prendi la tua testa e spostala sul lato del monitor, in modo da visualizzare il monitor con un'angolazione piuttosto ripida. Guardalo ora? In caso contrario, mi rifiuto di essere ritenuto responsabile. Lo vedo, quindi il tuo monitor deve essere rotto. :)
In ogni caso, nota quanto sono vicini i colori rgb nel css. La parte superiore dell'input di testo e la textarea sono ombreggiate sempre leggermente. Questo è un esempio di sottigliezza estrema. Durante la compilazione di un modulo, è improbabile che qualcuno possa mai notare questo gradiente. Tuttavia, le persone potrebbero trovare la tua forma un po 'più attraente di altre; anche se non sanno perché.
Bene, abbiamo quasi fatto attraverso e intero articolo CSS3 senza discutere di problemi del browser. Come ci siamo riusciti? Per prima cosa, non c'era molta enfasi sul codice. Ancora più importante, però, stavo risparmiando il meglio per ultimo.
Se dai un'occhiata alla demo di questo tutorial in un browser webkit, quindi confrontalo con un browser Firefox, noterai alcune differenze. Se passi a IE, noterai ulteriori differenze. Una cosa carina dell'uso della sottigliezza è che se la sottile differenza non c'è, la gente probabilmente non se ne accorgerà. In altre parole, il cambiamento di colore nel primo esempio funziona ancora senza la transizione; è solo un po 'meno lucido. Se l'unico scopo dell'uso di nth-of-type era raggruppare in base all'omogeneità, nessun visitatore si preoccuperà se quel gruppo non è lì. Il menu funziona ancora. E il gradiente? Ricorda quanto dovevi provare a notarlo anche quando viene detto esattamente dov'era?
Ne fanno un'opportunità per la creatività, invece di un fardello insormontabile.
Probabilmente l'opposizione più razionale al "diverso aspetto nei diversi browser", l'approccio al web design è che molti (forse maggior parte) i clienti vorranno il esatto stesso sito web in qualsiasi browser principale. Se non c'è spazio per il budging su questo e hai bisogno di pagare la tua bolletta elettrica, fai tutto il necessario per ottenere quell'importantissimo angolo arrotondato in tutte le versioni di IE fino all'alba del tempo.
Tuttavia, alcuni clienti possono essere educati e influenzati da alcuni vantaggi di avere un progetto in un posto e un altro da qualche altra parte. Ad esempio, accettare un aspetto leggermente diverso può ridurre drasticamente le richieste HTTP e gli elementi HTML in eccesso, se vengono utilizzate molte immagini per creare bordi e ombre e quant'altro. Oppure, se sei come me, hai alcuni progetti personali e ti godi una bella sfida (come fornire lo stesso browser "esperienza" senza avere sempre lo stesso layout). O forse hai due disegni diversi che ti piacciono davvero e non puoi decidere quale implementare. Ecco un'opportunità per implementare uno in un browser e l'altro in un altro, guidato da un singolo foglio di stile.
Il punto generale qui è che l'incompatibilità del browser è a fatto del Web corrente quando si tenta di utilizzare CSS3. Quindi, rendilo un'opportunità per la creatività, invece di un fardello insormontabile.
La sottigliezza qui non è esattamente a design sottigliezza. Invece, è più di un progettista sottigliezza. Nella mia esperienza, la maggior parte delle persone usa solo un browser. I professionisti del Web dimenticano che a volte, mentre installiamo tre versioni di cinque diversi browser su ogni macchina che incontriamo.
Quindi, se un utente IE-only accade attraverso il tuo sito e il suo contenuto è chiaro e lui o lei gode dell'esperienza, sei riuscito nel tuo progetto. Se un altro utente si trova sul tuo sito in Chrome e gode della sua esperienza e il contenuto è chiaro, hai avuto successo nel tuo progetto. E forse quel visitatore ha apprezzato qualche extra tid-bit. Complimenti. Ancora più importante, però, se hai mai avuto l'opportunità di sederti e vedere questo accadere simultaneamente, sarai riuscito a divertirti un po '.
Accentsconagua