Oggi prenderemo alcune tabelle dei prezzi PSD da Design Curate e proveremo a convertirle in puro CSS in modo da poterle facilmente inserire nel tuo sito.
Sarà un esercizio super semplice ma divertente nel portare un design statico sul Web e imparerai un sacco di cose divertenti lungo il percorso, come ad esempio come modellare i tag hr e creare un effetto apice.
Design originale
Il design delle nostre tabelle dei prezzi è super minimal. In pratica sono solo un rettangolo con angoli arrotondati con testo e pulsanti. Scarica qui il PSD originale per dare un'occhiata più da vicino (stiamo demolendo il banner Best Value).
Come puoi vedere, il compito principale qui sarà semplicemente mescolare elementi in posizione. La barra in alto potrebbe sembrare difficile, ma in realtà è un gioco da ragazzi. Più interessante dal mio punto di vista è come modellare quella sottile linea di demarcazione e tirare fuori un apice nel testo.
Interessante è anche il fatto che la tabella dei prezzi del centro è un po 'più grande delle altre e si sovrappone a esse. Questo potrebbe significare lo styling di due versioni uniche del tavolo, ma useremo un piccolo trucco che ci toglie tutto questo. Entriamo e iniziamo.
Forma di base
Per iniziare, ci concentreremo sulla creazione di una tabella dei prezzi. Una volta che abbiamo costruito quello, possiamo espanderlo in tre abbastanza facilmente. Il nostro primo passo è creare la forma base di un singolo tavolo: un rettangolo verticale con angoli arrotondati.
Inizieremo con un div che manterrà tutto il codice per una tabella dei prezzi. Assegnare la classe di? Pricingtable? in modo che possiamo riutilizzare facilmente questo elemento più tardi.
Ora aggiungiamo un po 'di stile. Le nostre tabelle dei prezzi saranno bianche, quindi ho impostato un colore di sfondo grigio per farle risaltare. Poi ho applicato un po 'di ridimensionamento alla nostra classe, arrotondato gli angoli e aggiunto un'ombra.
Aggiornamento del progresso
Questo passaggio dovrebbe darti una semplice scatola bianca. Assicurati che le tue dimensioni siano corrette e che l'ombra e gli angoli arrotondati funzionino correttamente.
Top Bar
Ora che abbiamo creato la nostra forma di base, inizieremo in alto e procediamo verso il basso. La prima cosa di cui abbiamo bisogno è ovviamente quella barra colorata nella parte superiore che contiene il nome per ciascuno dei nostri piani tariffari: Basic, Pro e Premium. Per rimuoverlo, crea un altro div con la classe di? Top ?. Non preoccuparti, non diventeremo pazzi, questo sarà l'ultimo di cui abbiamo bisogno per il nostro modello di tabella dei prezzi di base.
All'interno del div, inserisci un h2 (utilizzeremo l'h1 in seguito) con il nome della tabella dei prezzi. Potremmo semplicemente usare questo h2 senza il div per creare la barra in alto, ma strutturarlo in questo modo rende più facile aggiungere un tag secondario o altro contenuto qui in seguito.
Trasformare quel div nella nostra barra in alto è piuttosto semplice. Per iniziare, diamo una larghezza di 250px, un'altezza di 50px e campioniamo la PSD per ottenere un colore di sfondo di # 2F2E35. Quindi applichiamo lo stesso raggio di bordo che abbiamo usato prima (10px), solo che questa volta lo applichiamo solo ai due angoli superiori, lasciando gli angoli in basso quadrati.
Ora è il momento di prendere di mira l'h2 e dargli un po 'di stile. Ho semplicemente cambiato il colore in bianco, ho allineato il testo al centro e ho usato una sorta di abbreviazione di caratteri fantasiosi per impostare il peso, le dimensioni, l'altezza della linea e la famiglia di font per il nostro titolo.
Aggiornamento del progresso
La nostra semplice scatola bianca sta già iniziando ad assomigliare al tavolo dei prezzi che stiamo cercando. Ora inseriamo solo il contenuto centrale e saremo pronti per partire.
Caratteristiche
Scendendo dal tavolo, troviamo un elenco di funzionalità. Subito quella frase dovrebbe darti un suggerimento su come possiamo marcare questa sezione: con una lista. L'ordine non è qualcosa di specifico qui, quindi useremo una lista non ordinata.
Si noti che nel nostro design originale, la prima parola di ciascuna funzione è in grassetto. Inseriremo alcuni tag efficaci per aiutarci a realizzare questo aspetto nel nostro progetto.
Disegnare questo elenco è abbastanza semplice. Per iniziare, vogliamo eliminare i punti elenco, quindi impostare il tipo di stile lista su "nessuno". Dopodiché, utilizzo la stessa stenografia del font di cui sopra, ma questa volta con dimensioni e altezza della riga diverse.
Si noti che l'altezza della linea è impostata senza un'unità di misura (2, non 2px). Questo è un semplice moltiplicatore che tiene conto della dimensione del font (18px * 2 = 36px line-height). Puoi leggere di più su questa tecnica qui.
Per completare questo blocco di stili, scegli come target questi tag efficaci e assicurati che siano impostati in grassetto.
Aggiornamento del progresso
La nostra lista delle caratteristiche è perfetta! Questi stili più audaci ti aiutano davvero a concentrarti su informazioni importanti.
Linea di divisione
Nel design originale, c'è una linea sottile che separa l'elenco delle caratteristiche dal prezzo.Questo può essere realizzato con un semplice tag regola orizzontale:
Lo stile predefinito per la linea orizzontale è vicino a quello che vogliamo, ma non proprio lì. Ad esempio, nota che si estende completamente attraverso la tabella dei prezzi. Lo vogliamo davvero più stretto e centrato.
Disegnare un ora può essere complicato e frustrante se non sai cosa stai facendo. Penseresti che tutto ciò che dovremmo fare è impostare la larghezza e il colore e sarebbe bello andare, ma non è così.
Per impostazione predefinita, alcuni browser applicano alcuni strani stili che è necessario cancellare. Per essere sicuri di ottenere il look che vogliamo, dobbiamo cancellare i bordi, dichiarare sia l'altezza che la larghezza e impostare un colore di sfondo. Quindi la centriamo usando la matematica di base: se il nostro tavolo è largo 250 px e la nostra linea è 190 px, questo lascia 60 px di larghezza a sinistra. Usando i margini, tagliamo quel valore a metà e assegniamo trenta pixel di spazio alla parte sinistra della linea.
Aggiornamento del progresso
Con quel tocco di stile, la nostra piccola linea sembra esattamente come la vogliamo noi. Sentiti libero di sperimentare con il tuo hr per vedere che tipo di stili di fantasia puoi realizzare. CSS-Tricks ha alcuni grandi esempi di ispirazione.
Prezzo
Il prossimo è il cartellino del prezzo. Questo è diviso in due parti: il prezzo grande e il testo piccolo in basso che dice "al mese". La parte difficile è che, nel design originale, il simbolo del dollaro è apice.
Volevo essere semantico su questo, quindi sono andato avanti e ho usato il? Sup? etichetta. Alcune fonti sembrano ritenere che questo sia un tag deprecato, ma per quanto posso dire, non è così. Sia sub e sup sembrano essere validi in HTML5 e hanno un sacco di supporto del browser su tutta la linea. Sono aperto agli argomenti contrari qui, quindi fammi sapere nei commenti se non sei d'accordo.
Un altro punto potenziale per un enorme argomento semantico qui è il mio uso di h1. Alcuni senza dubbio prenoterebbero h1 per il titolo del piano in cima, ma il punto di prezzo qui sembrava essere l'informazione più importante (ordine di importanza), quindi ho pensato che fosse meglio utilizzarlo qui. Ancora una volta, sentiti libero di non essere d'accordo e vai per la tua strada.
Ora per il nostro CSS abbiamo tre obiettivi diversi: h1, h1 sup e il paragrafo. Non c'è niente di speciale qui, solo un po 'più di ridimensionamento dei caratteri e un po' di margini per mettere le cose a posto. Si noti che tutto ciò che dobbiamo fare per il sup tag è ridurre la dimensione del carattere.
Aggiornamento del progresso
La nostra tabella dei prezzi è quasi completa! Finora abbiamo conquistato i quattro pezzi più difficili del puzzle, tutto ciò che rimane è creare un pulsante in basso.
Il tasto
Per completare la nostra tabella dei prezzi, mettiamo un pulsante di registrazione in basso. Per fare ciò, basta lanciare un tag di ancoraggio nel codice HTML. Questo finirà il nostro div riutilizzabile.
Per trasformare questo semplice collegamento testuale in un pulsante, imposta il display in modo da bloccare e definire larghezza e altezza. Assicurati inoltre di correggere lo stile di collegamento predefinito impostando il colore e la decorazione del testo. Ho trasformato il testo in maiuscolo e per abbinarlo al design originale. Infine, applica lo stesso raggio di bordo di prima.
Per completare il pulsante, puoi utilizzare un colore a tinta unita per semplificare le cose, ma ho optato per un gradiente di base che diventa più chiaro quando passi il mouse su di esso. È una grossa fetta di CSS, ma non preoccuparti, è tutto abbastanza semplice. Usa uno strumento gratuito come questo per risparmiarti qualche problema se stai creando il tuo gradiente.
Aggiornamento del progresso
Con ciò, la nostra prima tabella dei prezzi è completa! Se volessimo andare oltre, potremmo prendere un font web serif lastra per farlo sembrare proprio come il PSD, ma mi piace l'Helvetica bene qui. Ora dobbiamo prendere questo oggetto e trasformarlo in tre!
Fare tre tabelle
Per espandere questo in tre tabelle univoche, copia e incolla il codice HTML appena creato in modo da avere tre div in base al prezzo e inserirli tutti all'interno di un contenitore div. Quindi personalizzare il testo su ciascuno in modo che le caratteristiche e il prezzo siano corretti. Infine, aggiungi un? Featured? classe al secondo tavolo. Ci faremo questo per togliere l'effetto ingrandito.
Per far apparire le tabelle dei prezzi una accanto all'altra, torna alla tua classe pricingtable e lasciala a sinistra. Applica anche una larghezza di 780 px al tuo contenitore e centralo sulla pagina con i margini sinistro e destro automatici.
Ora abbiamo tre tabelle di prezzi in fila, che è esattamente ciò che vogliamo. Tuttavia, ricorda che quello centrale dovrebbe essere più grande degli altri due, questo non è ancora il caso.
Invece di passare manualmente e regolare ogni piccola serie di dimensioni in tutta la tabella dei prezzi centrale, possiamo scegliere come target la classe unica che abbiamo dato e applicare una trasformazione CSS per ingrandirla. Poiché tutto il nostro contenuto è puro codice (senza immagini), la versione ingrandita dovrebbe apparire perfetta.
Tutto finito!
Con ciò, le nostre tabelle dei prezzi CSS sono complete. L'ultima trasformazione ci ha dato esattamente l'effetto che volevamo con il tavolo centrale più grande e fluttuante rispetto agli altri due. Controlla le versioni demo live di seguito.
demo: Clicca qui per avviare la demo
Codice: Guarda e modifica il codice sorgente su Dabblet
Conclusione
Spero che ti sia divertito a costruire questi tavoli dei prezzi e di farne un buon uso. Usali come preferisci e assicurati di scaricare la PSD e le versioni vettoriali da Design Curate.