Le testimonianze dei clienti sono una caratteristica popolare del sito. Portano credibilità in un'azienda e infondono un senso di fiducia. Se i tuoi altri clienti ti amano così tanto, potrei anche io!
Come divertente esperimento, oggi ci accingiamo a creare una piccola sezione di citazione che ruoterà tra più citazioni diverse utilizzando solo CSS. Lungo la strada, impareremo tutto su come pianificare e creare sequenze di fotogrammi chiave in più fasi. Iniziamo.
L'HTML
Per iniziare questo progetto, dobbiamo decidere la struttura della nostra citazione. In genere, una citazione del cliente avrà tre parti di testo: il nome del cliente, da dove provengono e cosa hanno detto.
Con questo in mente, possiamo creare un contenitore di citazione che ha tre pezzi diversi. L'intestazione contiene il nome del cliente, il piccolo elemento presumibilmente contiene il nome della società da cui il cliente proviene o alcune altre informazioni correlate e il paragrafo con il testo della citazione in attesa.
Poiché abbiamo utilizzato tre elementi diversi, non avremo bisogno di ulteriori hook e dovremmo essere in grado di indirizzare facilmente ogni parte della citazione nel nostro CSS. Come nota a margine, ho scelto arbitrariamente un h3 qui semplicemente perché h1 e h2 sono tipicamente usati per altri scopi. Sentiti libero di cambiarlo in qualsiasi cosa ti piaccia.
Ora che abbiamo capito la nostra struttura, è ora di estenderla in tre diverse citazioni. Per mostrare la versatilità di questo progetto, ho deciso di riempire il mio testo con le ultime parole di alcuni personaggi famosi. Un po 'morboso, ma come un segnaposto lo farà!
Starter CSS
Una volta che hai risolto il tuo HTML, vai al tuo CSS e inserisci qualcosa di simile al codice qui sotto. Fondamentalmente, ho impostato un pattern di sfondo interessante e definito il contenitore che terrà le virgolette.
Stili di citazione
Ora è il momento di modellare i div quote. Ho usato il posizionamento assoluto qui in modo che tutte e tre le virgolette occuperanno lo stesso spazio. Per impostazione predefinita, creeranno uno stack verticale ma non lo vogliamo affatto. Nel nostro prodotto finito, una virgola svanirà, poi un altro si dissolverà. Di conseguenza, vorremmo che fossero nello stesso punto.
Ho anche impostato l'opacità a zero in modo che tutte le virgolette siano nascoste di default. L'opacità è una proprietà bizzarra che è davvero un mal di testa con cui lavorare. Ne parleremo un po 'più tardi. La cosa da notare ora è che, non vedrai nulla con l'opacità a zero, quindi ti consigliamo di commentare temporaneamente questa parte mentre modifichi la sezione delle quote.
Preventivi stili di testo
Ora che abbiamo il contenitore di quote generali in stile, è tempo di afferrare ogni pezzo di testo e di personalizzarlo singolarmente. Per questa demo, renderemo il testo piacevole e grande, quindi imposti da h3 a 55px e da piccolo a 18px, quindi usa Helvetica per la famiglia di font.
Il nostro compito con il paragrafo è molto più complesso. Non solo abbiamo bisogno di adattarlo a una scatola, dobbiamo rimuoverlo dallo stack e incollarlo a destra dell'altro contenuto.
Per fare in modo che ciò accada, abbiamo bisogno di fare una serie di cose così ho diviso i miei stili per questo in tre diversi passaggi (mostrato sotto).
Per il primo passo, ho gestito il? Icing? o roba visiva standard. Ho reso lo sfondo bianco, impostato il carattere e allineato il testo al centro. Successivamente ho gestito il posizionamento e le dimensioni della scatola reale attraverso l'uso di alcune imbottiture e il posizionamento assoluto. Ho finito tutto con un raggio del bordo opzionale, che arrotonda bene le nostre curve.
Controllo avanzamento
Se controlliamo i nostri progressi assicurandoci che una citazione sia visibile, stiamo andando piuttosto bene! Tuttavia, la nostra citazione è seduta in una semplice scatola vecchia. Ci manca il piccolo triangolo che lo fa sembrare un fumetto.
Aggiungere il triangolo
Per aggiungere quel piccolo triangolo, dobbiamo passare allo: pseudo elemento dopo. Fondamentalmente, creiamo un elemento vuoto, lo posizioniamo sul lato sinistro e applichiamo un delicato voodoo di confine.
Come puoi vedere, questo ci dà l'effetto che stiamo ottenendo, abbastanza pulito eh?
Anima quel Sucka
Ora che abbiamo definito il nostro stile e posizionamento visivo, è tempo di inventare un modo per sfumare una virgoletta e inserirla in un'altra e ripetere questo processo su un ciclo infinito. Potremmo e dovremmo usare jQuery, ma oggi stiamo cercando di capirlo con puro CSS, quindi passeremo alle animazioni dei fotogrammi chiave.
Sarò brutalmente onesto qui, faccio questo tipo di cose quasi ogni giorno e mi ci è voluto ancora un'eternità per capire la sequenza corretta da usare per far sbiadire i fotogrammi chiave al momento giusto. Ho manipolato e manipolato continuando a sovrapposizioni impacciate e risultati che non erano affatto quello che volevo.
Te lo dico io così sai che non sei solo se ti trovi ancora a colpire muri difficili da superare. Alla fine, ho avuto il mio cervello lento per avvolgere il concetto però.
Sono un pensatore visivo quindi ho creato una tabella approssimativa per vedere come funziona. Fondamentalmente vogliamo impilare queste animazioni in modo che solo una citazione sia visibile in un dato momento. Per rimuoverlo, creeremo un'animazione di trenta secondi e dividerla in tre parti. La prima e l'ultima parte avranno una opacità pari a zero e la seconda parte avrà un'opacità di una.
Come puoi vedere, dovremo ritardare di dieci secondi il tempo di avvio della seconda animazione e il tempo di avvio della terza animazione di venti secondi. In questo modo, se si disegna una linea verticale in qualsiasi punto del grafico, non viene visualizzata più di una virgoletta allo stesso tempo.
Ora, quando ho implementato questo, non mi piaceva quanto tempo ci volevano le virgolette per sfumare dentro e fuori. Voglio una rapida dissolvenza, un lungo periodo di visibilità e una rapida dissolvenza. Per fare ciò abbiamo semplicemente bisogno di aggiungere un paio di altri keyframe. Ecco la sequenza che ho trovato:
Abbiamo solo bisogno di impostare una sequenza, ma la applichiamo alle tre citazioni separate in tre modi diversi. Fondamentalmente, l'unica differenza è il valore del ritardo, che fa attendere l'animazione qualche secondo prima di iniziare.
Questo è tutto ciò che c'è da fare! Quando la pagina viene caricata, la prima citazione si dissolverà, quindi si dissolverà man mano che arriva la seconda citazione (e così via).
Compatibilità del browser
A questo punto probabilmente stai urlando al tuo schermo del computer che sono un idiota che usa solo i prefissi Webkit. In verità, l'ho fatto solo per mantenere le cose comprensibili. Ora che abbiamo capito tutto, possiamo usare il nostro buon vecchio amico Prefixr per espanderlo. Quando lo facciamo, ecco il grosso pezzo di codice che viene sputato:
Come ho detto prima, il nostro uso della proprietà di opacità è un po 'sospetto perché il supporto dell'opacità è un disastro. Fortunatamente, Prefixr prende il comando su questo e cerca di garantire che il nostro codice sia pronto per funzionare su quanti più browser possibile. Sfortunatamente, diventa un po 'esagerato inserendo tutte quelle proprietà del filtro dove non sono necessariamente necessarie, quindi una pulizia potrebbe essere una buona idea.
Selectivizr
Abbiamo usato alcuni selettori avanzati nel tutorial, quindi mentre siamo sul tema del supporto del browser, dovrei sottolineare che dovrai aggiungere Selectivizr e jQuery al tuo progetto per assicurarti che i browser più vecchi li capiscano.
Supporto per keyframe
Ecco il kicker, abbiamo esaminato tutto questo per assicurarci di aver massimizzato il supporto del browser su selettori e opacità, ma alla fine IE continuerà a rifiutarsi di giocare perché non c'è supporto per i keyframe fino a IE 10 .
Ovviamente, JavaScript sarà la risposta qui se hai intenzione di utilizzare questo nel mondo reale. Puoi fare tutto in JS o semplicemente usarlo come backup per i browser che non supportano i fotogrammi chiave.
dimostrazione
Ecco la demo dal vivo. Assicurati di attendere un po 'quando lo lanci, ricorda che l'intera animazione impiega trenta secondi!
demo: Clicca qui per il lancio
Conclusione
I fotogrammi chiave hanno fatto molta strada dai giorni in cui erano supportati solo dai browser Webkit. Tuttavia, tieni presente che a causa del nostro vecchio amico IE, sono ancora più nel regno del divertimento con cui giocare? di qualcosa su cui dovresti puntare per progetti importanti.
Lascia un commento qui sotto e facci sapere se ti è piaciuto questo tutorial e come lo miglioreresti!