Costruisci una tabella di prezzi reattivi con gli stati al passaggio del mouse

Durante questo tutorial creeremo una tabella dei prezzi elegante con alcuni effetti hover sorprendenti. Useremo lo script Prefixfree di Lea Verou per mantenere pulito il nostro CSS, inoltre renderemo tutto reattivo, spostando il layout in un paio di punti di interruzione.

Il markup

L'immagine sotto mostra uno scheletro visivo del markup che creeremo. Come puoi vedere, non è costruito usando le tabelle; stiamo usando liste non ordinate per la massima flessibilità e reattività.

Markup HTML

Prima di ogni altra cosa, dobbiamo iniziare con un documento vuoto. Molto importante qui è il meta tag viewport che consentirà a tutti i dispositivi di interpretare correttamente il nostro layout reattivo.

Ora possiamo iniziare con la carne del nostro markup al tavolo (o meglio elenco markup):

  ... 
  Di base
   $ 9.99 al mese 
 
  Archiviazione da 2 GB
 5 clienti
 10 progetti attivi
 10 colori
 Goodies gratuiti
 Supporto via email 24/7
 
  Acquista ora 
 
 ... 
 ...

In fondo abbiamo incluso prefisso libero (prima della chiusura tag), che ci consente di usare ovunque proprietà CSS non prefissate. Funziona dietro le quinte, aggiungendo il prefisso del browser corrente a qualsiasi codice CSS, solo quando è necessario.

stili

Dopo aver risolto il nostro markup, diamo un'occhiata ad aggiungere alcuni stili. Lo farò dentro