Aujourd'hui, nous allons récupérer des tables de tarification PSD auprès de Design Curate et essayer de les convertir en CSS pur afin que vous puissiez facilement les déposer sur votre site.
Ce sera un exercice super basique mais amusant en apportant une conception statique sur le Web et vous apprendrez plein de choses amusantes tout au long du chemin, comme la façon de styliser les balises hr pour créer un effet exposant.
Dessin original
La conception de nos tableaux de prix est super minimale. Ils sont fondamentalement juste un rectangle à coins arrondis avec du texte et des boutons. Téléchargez le fichier PSD d'origine ici pour l'examiner de plus près (nous éliminons la bannière Best Value).
Comme vous pouvez le constater, la tâche principale ici consistera simplement à mélanger des éléments. La barre du haut peut sembler délicate, mais en réalité c'est un jeu d'enfant. Plus intéressant de mon point de vue est la façon de styler cette fine ligne de séparation et d’obtenir un indice supérieur dans le texte.
Il est également intéressant de noter que le tableau de tarification du centre est un peu plus grand que les autres et les chevauche. Cela pourrait signifier le style de deux versions uniques de la table, mais nous allons utiliser un petit truc sympa qui demande beaucoup d'efforts. Faisons un saut et commençons.
Forme de base
Pour commencer, nous allons nous concentrer sur la création d'un tableau de prix. Une fois que celui-ci est construit, nous pouvons l’étendre assez facilement en trois. Notre première étape consiste à créer la forme de base d'une seule table: un rectangle vertical aux angles arrondis.
Nous commencerons par un div qui contiendra tout le code pour un tableau de prix. Attribuer la classe de? Pricingtable? afin que nous puissions facilement réutiliser cet élément ultérieurement.
Ajoutons maintenant un peu de style. Nos tableaux de prix seront blancs, alors je mets une couleur de fond gris pour les aider à se démarquer. Ensuite, j'ai appliqué des tailles à notre classe, arrondi les angles et ajouté une ombre.
Mise à jour en cours
Cette étape devrait vous donner une simple boîte blanche. Assurez-vous que vos dimensions sont correctes et que votre ombre et les coins arrondis fonctionnent correctement.
Barre du haut
Maintenant que notre forme de base est en place, nous allons commencer par le haut et continuer ensuite. La première chose dont nous avons besoin est évidemment la barre colorée située en haut qui porte le nom de chacun de nos plans tarifaires: Basique, Pro et Premium. Pour retirer ceci, créez une autre div avec la classe de "top". Ne vous inquiétez pas, nous ne devenons pas fous, ce sera le dernier dont nous avons besoin pour notre modèle de tableau de prix de base.
Dans la division, placez un h2 (nous utiliserons h1 plus tard) avec le nom du tableau de tarification. Nous pourrions simplement utiliser ce h2 sans la div pour créer la barre supérieure, mais sa structuration facilite l'ajout ultérieur d'une balise secondaire ou d'un autre contenu.
Transformer cette division en barre supérieure est assez simple. Pour commencer, nous lui donnons une largeur de 250 px et une hauteur de 50 px et échantillonnons le fichier PSD pour obtenir une couleur de fond de # 2F2E35. Ensuite, nous appliquons le même bord-rayon que nous utilisions auparavant (10px), mais cette fois-ci, nous l’appliquons uniquement aux deux coins supérieurs, en laissant les coins inférieurs carrés.
Ensuite, il est temps de cibler le h2 et de lui donner du style. J'ai simplement changé la couleur en blanc, aligné le texte au centre et utilisé une sténographie élégante pour définir le poids, la taille, la hauteur de ligne et la famille de polices de notre titre.
Mise à jour en cours
Notre boîte blanche unie commence déjà à ressembler au tableau de prix que nous visons. Maintenant, nous venons de remplir le contenu du centre et nous serons prêts à commencer.
Caractéristiques
En descendant la table, nous trouvons ensuite une liste de fonctionnalités. Tout de suite, cette phrase devrait vous indiquer comment nous pouvons marquer cette section: avec une liste. L'ordre n'est pas spécifique ici, nous allons donc utiliser une liste non ordonnée.
Notez que dans notre conception d'origine, le premier mot de chaque fonction est en gras. Nous ajouterons des balises fortes pour nous aider à intégrer cela dans notre conception.
Mettre en forme cette liste est assez facile. Pour commencer, nous voulons supprimer les puces, donc définissez le type de liste-style sur "none". Après cela, j'utilise le même raccourci de police que ci-dessus, mais cette fois-ci avec une taille et une hauteur de ligne différentes.
Notez que la hauteur de ligne est définie sans unité de mesure (2, pas 2px). C'est un multiplicateur simple qui prend en compte la taille de la police (18px * 2 = 36px line-height). Vous pouvez en savoir plus sur cette technique ici.
Pour terminer ce bloc de styles, ciblez ces balises fortes et assurez-vous qu’elles sont en gras.
Mise à jour en cours
Notre liste de fonctionnalités est parfaite! Ces styles plus audacieux vous aident vraiment à vous concentrer sur les informations importantes.
Ligne de séparation
Dans la conception d'origine, une ligne subtile sépare la liste des fonctionnalités du prix.Ceci peut être accompli avec une simple balise de règle horizontale:
Le style par défaut pour la ligne horizontale est Fermer à ce que nous voulons, mais pas tout à fait là. Par exemple, notez que cela s'étend tout au long du tableau des prix. Nous voulons en réalité que ce soit plus étroit et centré.
Styler une heure peut être difficile et frustrant si vous ne savez pas ce que vous faites. Vous penseriez que tout ce que nous aurions à faire serait de définir la largeur et la couleur et que nous serions prêts à partir, mais ce n'est pas le cas.
Par défaut, certains navigateurs appliquent des styles étranges que vous devez effacer. Pour être sûr d'obtenir le look souhaité, nous devons effacer les bordures, déclarer une hauteur et une largeur et définir une couleur d'arrière-plan. Ensuite, nous le centrons en utilisant des calculs de base: si notre table mesure 250 pixels de large et notre ligne 190 pixels, il reste 60 pixels de largeur. En utilisant les marges, nous avons coupé cette valeur en deux et affecté trente pixels d’espace au côté gauche de la ligne.
Mise à jour en cours
Avec ce style, notre petite ligne ressemble exactement à ce que nous voulons. N'hésitez pas à expérimenter avec votre heure pour voir quel genre de styles sophistiqués vous pouvez créer. CSS-Tricks a de bons exemples d’inspiration.
Prix
La prochaine étape est l'étiquette de prix. Cela vient en deux parties, le gros prix et le petit texte en dessous qui dit "par mois". La partie délicate est que, dans la conception originale, le signe dollar est en exposant.
Je voulais être sémantique à ce sujet alors je suis allé de l'avant et utilisé le? Sup? étiquette. Certaines sources semblent penser qu'il s'agit d'une balise déconseillée, mais pour autant que je sache, ce n'est pas le cas. Les deux sous et sup semblent être valables en HTML5 et ont beaucoup de support du navigateur à travers le conseil. Je suis ouvert aux arguments opposés, alors faites-le-moi savoir dans les commentaires si vous êtes en désaccord.
Un autre point potentiel pour un énorme argument sémantique ici est mon utilisation de h1. Certains réservent sans aucun doute h1 pour le titre du plan en haut, mais le prix indiqué semble être l'information la plus importante (ordre de priorité), j'ai donc pensé qu'il était préférable de l'utiliser ici. Encore une fois, n'hésitez pas à être en désaccord et à suivre votre propre chemin.
Maintenant, pour notre CSS, nous avons trois choses différentes à cibler: le h1, le h1 sup et le paragraphe. Il n’ya rien d’extraordinaire ici, juste un peu plus de taille de police et un peu de marge pour mettre les choses en place. Notez que tout ce que nous devons faire pour la balise sup est de réduire la taille de la police.
Mise à jour en cours
Notre tableau de prix est presque complet! Jusqu'ici, nous avons vaincu les quatre pièces les plus difficiles du puzzle. Il ne reste plus qu'à créer un bouton en bas.
Le bouton
Pour terminer notre tableau de prix, mettons un bouton d'inscription en bas. Pour ce faire, il suffit de placer une balise d'ancrage dans votre code HTML. Ceci finira notre div table de prix réutilisable.
Pour transformer ce simple lien de texte en bouton, définissez l'affichage de manière à bloquer et à définir une largeur et une hauteur. Veillez également à corriger le style de lien par défaut en définissant la couleur et la décoration du texte. J'ai également transformé le texte en majuscule pour l'adapter au design original. Enfin, appliquez le même rayon de bordure que précédemment.
Pour terminer le bouton, vous pouvez utiliser une couleur unie pour simplifier les choses, mais j’ai opté pour un dégradé de base qui s’éclaircit lorsque vous la survolez. C'est un gros morceau de CSS effrayant, mais ne vous inquiétez pas, c'est assez basique. Utilisez un outil gratuit comme celui-ci pour vous éviter des problèmes si vous créez votre propre dégradé.
Mise à jour en cours
Avec cela, notre premier tableau de prix est complet! Si nous voulions aller plus loin, nous pourrions utiliser une police Web slab serif qui ressemblerait au PSD, mais j'aime bien Helvetica. Maintenant, nous devons prendre cet article et le transformer en trois!
Faire trois tables
Pour étendre cela en trois tables uniques, copiez et collez le code HTML que vous venez de créer afin d'avoir trois divs de table de tarification et placez-les tous à l'intérieur d'une div de conteneur. Ensuite, personnalisez le texte sur chacun afin que les caractéristiques et le prix soient corrects. Enfin, ajoutez un? Vedette? classe à la deuxième table. Nous allons cela pour obtenir l'effet élargi.
Pour que les tableaux de prix apparaissent les uns à côté des autres, revenez à votre classe de tableau de prix et faites-la flotter à gauche. Appliquez également une largeur de 780 pixels à votre conteneur et centrez-le sur la page avec les marges gauche et droite automatiques.
Nous avons maintenant trois tableaux de prix en ligne, ce qui est exactement ce que nous voulons. Cependant, rappelez-vous que le premier devrait être plus grand que les deux autres, ce n'est pas encore le cas.
Au lieu d'analyser et d'ajuster manuellement chaque petit ensemble de dimensions dans le tableau de tarification central, nous pouvons cibler la classe unique que nous lui avons attribuée et appliquer une transformation CSS pour l'agrandir. Puisque tout notre contenu est du code pur (pas d’image), la version à l’échelle améliorée devrait bien paraître.
Tout fini!
Avec cela, nos tableaux de prix CSS sont complets. La dernière transformation nous a donné exactement l’effet que nous souhaitions avec la table centrale plus grande et flottant au-dessus des deux autres. Découvrez les versions de démonstration en direct ci-dessous.
Démo: Cliquez ici pour lancer la démo
Code: Voir et modifier le code source sur Dabblet
Conclusion
J'espère que vous avez aimé construire ces tableaux de prix et que vous en tirerez un bon usage. Utilisez-les comme vous le souhaitez et veillez à télécharger les versions PSD et vectorielles de Design Curate.