Construire un tableau de prix réactif avec les états de survol de Neat

Au cours de ce tutoriel, nous allons créer un tableau de prix élégant avec des effets de survol saisissants. Nous utiliserons le script Prefixfree de Lea Verou pour maintenir notre CSS propre. De plus, nous rendrons le tout réactif, en déplaçant la mise en page en deux points d'arrêt..

Le balisage

L'image ci-dessous affiche un squelette visuel du balisage que nous allons créer. Comme vous pouvez le constater, il n’a pas été construit à l’aide de tables; nous utilisons des listes non ordonnées pour une flexibilité et une réactivité maximales.

Balisage HTML

Avant toute chose, il faut commencer par un document vide. La balise méta de la fenêtre de visualisation est très importante car elle permettra à tous les appareils d’interpréter correctement notre présentation réactive.

Maintenant, nous pouvons commencer avec la viande de notre balisage de table (ou plutôt liste balisage):

 
 
… 
 
 
De base
 
 
 9,99 $ par mois 
 
 
 
2 Go de stockage
 
5 clients
 
10 projets actifs
 
10 couleurs
 
Goodies gratuits
 
Assistance par email 24/7
 
 
 Acheter maintenant 
 
 
… 
 
… 
 
 

Tout en bas, nous avons inclus prefixfree (avant la clôture balise), ce qui nous permet d’utiliser des propriétés CSS non préfixées partout. Il fonctionne dans les coulisses, en ajoutant le préfixe du navigateur actuel à n'importe quel code CSS, uniquement lorsque cela est nécessaire..

modes

Après avoir trié notre balisage, voyons comment ajouter quelques styles. Je vais le faire dans les