È passato un po 'di tempo da quando abbiamo perfezionato le nostre competenze HTML e CSS con una piccola demo divertente, finiamo quella sequenza con un progetto che è allo stesso tempo super attraente e super pratico.
Oggi costruiremo uno stile di carte? Assumimi Me? widget che puoi rapidamente trascinare su qualsiasi pagina web. Lungo la strada impareremo molte cose sul posizionamento dei CSS e su come utilizzare gli pseudo elementi per ottenere effetti interessanti.
Cosa stiamo costruendo
Recentemente ho sfogliato la fantastica libreria PSD gratuita presso il nostro sito gemello PixelsDaily e mi sono imbattuto in questa gemma del designer Marc Gonzales.
Adoro sia l'idea qui che l'esecuzione. Ogni portfolio dovrebbe avere un modo chiaro per assumere il designer e questo fornisce un modo facile e attraente per integrare tale funzionalità.
Marc ha fatto un lavoro fantastico qui, ma il file che fornisce è un PSD a più livelli. Oggi utilizzeremo questo come fonte di ispirazione per il nostro stesso widget simile interamente realizzato con CSS e HTML. Cambiamo alcune cose lungo il percorso e prendiamo alcune libertà, ma alla fine il pezzo finale sarà molto simile a quello che vediamo qui.
Passo 1. Installazione HTML
La prima cosa che faremo è impostare un codice HTML di base che servirà da struttura per il nostro badge. Useremo una struttura a due div: il div esterno terrà la carta nel suo insieme e il div interno sarà un modo semplice e facile per raggruppare tutti i nostri oggetti di testo insieme.
Nel div esterno, lancia l'immagine che servirà da avatar. Nel div interno, includi un h3 con il tuo nome, un paragrafo con il titolo del tuo lavoro e un tag di ancoraggio con le parole "Hire Me.? Il tuo codice dovrebbe apparire come il seguente.
Come puoi vedere, abbiamo dato un'altezza e una larghezza, impostato il colore di sfondo e applicato un raggio di bordo per arrotondare gli angoli. Prendi nota del posizionamento relativo usato qui, questo diventerà rilevante in seguito, sto solo programmando in anticipo.
Oltre agli angoli arrotondati, il design della carta originale ha un paio di funzioni aggiuntive che richiedono un codice CSS3 pesante. Prima di tutto è box-shadow, che è abbastanza facile e richiede solo un prefisso browser alternativo a questo punto. Tuttavia, aggiungere un gradiente è ancora un gran casino. Detesto i gradienti di codifica a mano quindi uso questo generatore per creare il codice per il gradiente lineare di cui abbiamo bisogno.
Ecco il codice risultante (ho aggiunto anche un colore del corpo):
Step 2 Progress Check
Dopo aver aggiunto questo codice, possiamo vedere chiaramente la forma della carta finita. Il problema ora è che il nostro contenuto sta scoppiando fuori dai limiti della carta, ci occuperemo presto di questo.
Passaggio 3. Stile l'Avatar
Prima di immergerci nel risolvere il brutto problema del testo, prendiamo in stile il nostro avatar e mettiamoci al suo posto.
Tutto quello che abbiamo fatto qui è spostare l'immagine con i margini, assicurandoci che stiamo ottenendo le dimensioni corrette indipendentemente dall'immagine che stai utilizzando e aggiunto un raggio di confine. Si noti che questo non richiede più i prefissi del browser. Evviva!
Step 3 Progress Check
Lentamente ma sicuramente, stiamo facendo progressi. Ora il nostro avatar è a posto con lo stile che vogliamo. Successivamente, affronteremo il testo!
Passaggio 4. Stile il testo
Il modo in cui il testo scorre attualmente non va bene. Dobbiamo toglierlo alla destra dell'avatar piuttosto che al di sotto di esso. Noi poteva float, ma penso che il posizionamento assoluto ci darà più libertà e flessibilità per spingerlo esattamente dove lo vogliamo.
Come puoi vedere, dopo aver applicato il posizionamento assoluto, l'ho spostato verso il basso e verso sinistra, quindi allineato al centro tutto il testo. È qui che entra in gioco il nostro posizionamento relativo che abbiamo applicato prima. Usando questa tecnica, il div interno posizionato in posizione assoluta considererà il punto zero come il div esterno relativamente posizionato invece del punto in alto a sinistra della tela.
Stile l'intestazione e il paragrafo
Ora che abbiamo messo il testo a posto, diamo uno stile. Inizieremo concentrandoci sull'intestazione e sul paragrafo.Tutto ciò di cui abbiamo veramente bisogno è applicare alcuni stili di carattere e un colore per ognuno.
Con quel po 'di codice, stiamo già guardando molto meglio. Abbiamo solo bisogno di creare uno stile che si colleghi a un pulsante e saremo pronti a tuffarci negli elementi pseudo.
Stile il collegamento
La maggior parte del testo è facile da stile, ma per il collegamento avremo bisogno di una porzione di codice molto più ampia. Questo perché il design originale richiede un collegamento che ha lo stile di un pulsante. Per fare ciò, dovremo aggiungere un po 'di padding, border-radius e ombre.
Ci sono alcune cose importanti da prendere in considerazione qui. Innanzitutto, ho rimosso lo stile di collegamento predefinito rimuovendo la decorazione del testo e impostando un nuovo colore. Inoltre, ho aggiunto il più piccolo dei bordi attorno al bordo del pulsante per farlo risaltare un po '. Infine, ho posizionato due ombre su questo elemento. La prima è un'ombra inserita che è davvero più di un bagliore interiore e la seconda è un'ombreggiatura più tipica.
Step 4 Progress Check
Con quello, abbiamo un bel po '? Assumimi? carta. tecnicamente, potresti fermarti qui, ma ho intenzione di andare avanti e creare l'effetto di una piccola pila di carte dal design originale.
Passaggio 5. Impilare il piano
Nel design originale di Marc, vediamo che ha creato l'illusione di una pila di carte invece di mostrare semplicemente una singola carta fluttuante nello spazio. Ci sono diversi modi in cui possiamo ottenere questo con il codice, ma in ultima analisi dovremmo tenere presente che sarebbe meglio non ingombrare il nostro markup HTML con div vuote, una soluzione CSS pura sarebbe molto preferibile.
Date queste informazioni, possiamo rivolgerci al?: Prima? e dopo? elementi pseudo per la soluzione, che spieghiamo in modo impressionante nel nostro post, The Lowdown on: Before e: After in CSS.
Inizieremo con: pseudo elemento dopo. Per implementarlo, scegli come target? Hireme? classe e usa la sintassi del colon singolo (IE non apprezza la sintassi del doppio colon). Imposta il contenuto in bianco, la posizione in assoluto, il raggio del bordo in 10px (uguale alla carta originale) e spostalo verso sinistra di 4px (il valore massimo dovrebbe essere pari a 0). Ho finito questo impostando lo z-index su -1 per essere sicuro che appaia sotto la carta originale.
Fondamentalmente, ciò a cui miriamo qui è ricostruire la carta originale. Vogliamo le stesse dimensioni, le stesse ombre, lo stesso gradiente, ecc. L'unica differenza principale è che aggiungeremo una rotazione per compensare questa carta dall'originale.
Ora ripetiamo lo stesso processo con il?: Prima? pseudo elemento in modo che finiamo con una pila di tre carte. Questo va in giro, lo z-index è impostato a -2 e la rotazione è stata raddoppiata.
Pulisci questo disordine!
È molto importante mettere sempre in discussione il tuo codice ed esaminare come puoi migliorarlo. Mentre guardo gli stili per le tre diverse carte, vedo a tonnellata di ripetizione. Questa è una violazione diretta del principio di codifica DRY (Do not Repeat Yourself), che aiuta il tuo CSS a rimanere pulito ed efficiente.
Gli stessi valori esatti di altezza, larghezza, raggio-ombra, ombra e gradiente vengono ripetuti almeno tre volte nel nostro codice. Questo è completamente inutile e sciatto. È corretto codificare in questo modo come stai? e giocherellando per sistemare le cose, ma una volta che hai finito, dovresti sempre ripulire.
Possiamo realizzare questo prendendo tutti quei valori ripetuti e raggruppandoli in un unico blocco di dichiarazione che si rivolge a tutti e tre i selettori. Dopo questo, possiamo drammaticamente ridurre il codice necessario per ogni singola carta.
Guarda la demo
Buone notizie, abbiamo finito! Ora abbiamo un piccolo fantastico? Assumimi Me? distintivo che può essere facilmente lasciato cadere su qualsiasi pagina web. Ho incorporato la demo CodePen di seguito, quindi dovresti essere in grado di dare un'occhiata sia al codice che al risultato finale. Se questo non funziona, controlla qui.
Cosa pensi?
Spero che tu abbia apprezzato questo piccolo progetto tanto quanto me. Abbiamo imparato molto su tutto, dall'impilamento di oggetti con z-index all'organizzazione del nostro codice con i concetti di DRY. Lascia un commento qui sotto e fammi sapere cosa ne pensi.
Se hai suggerimenti per miglioramenti o modifiche, assicurati di inserire la mia demo CodePen e lasciare un link alla tua versione di seguito.