Cela fait longtemps que nous n’avons pas perfectionné nos compétences en HTML et CSS avec une petite démo amusante. Terminons avec un projet à la fois super attrayant et super pratique.
Aujourd'hui, nous allons construire un style de carte? Engagez-moi? widget que vous pouvez déposer rapidement sur n’importe quelle page Web. En cours de route, nous apprendrons beaucoup de choses intéressantes sur le positionnement CSS et sur l'utilisation de pseudo-éléments pour créer des effets sympas.
Ce que nous construisons
Je parcourais récemment l'impressionnante bibliothèque PSD gratuite de notre site jumeau, PixelsDaily, et suis tombé sur ce joyau du designer Marc Gonzales.
J'aime à la fois l'idée ici et l'exécution. Chaque portefeuille doit avoir un moyen clair d’engager le concepteur, ce qui constitue un moyen simple et attrayant d’intégrer cette fonctionnalité.
Marc a fait un travail remarquable ici, mais le fichier qu’il fournit est un fichier PSD en couches. Aujourd'hui, nous allons utiliser cela comme source d'inspiration pour notre propre widget similaire, entièrement construit à partir de CSS et de HTML. Nous allons changer quelques choses en cours de route et prendre quelques libertés, mais au final, le dernier élément sera très similaire à ce que nous voyons ici.
Étape 1. Configuration HTML
La première chose que nous allons faire est de mettre en place un code HTML très basique qui servira de structure à notre badge. Nous utiliserons une structure à deux divisions: la division externe contiendra la carte dans son ensemble et la division interne constituera un moyen simple et agréable de regrouper tous nos objets texte.
Dans la partie extérieure, ajoutez une image qui vous servira d’avatar. Dans la division intérieure, incluez un h3 avec votre nom, un paragraphe avec le titre de votre travail et une balise d'ancrage avec les mots "Engagez-moi". Votre code devrait ressembler à ce qui suit.
Comme vous pouvez le constater, nous lui avons attribué une hauteur et une largeur, défini la couleur de l’arrière-plan et appliqué un rayon de bordure pour arrondir les angles. Prenez note du positionnement relatif utilisé ici, cela deviendra pertinent plus tard, je ne fais que planifier.
Au-delà des angles arrondis, le design original de la carte présente quelques fonctionnalités supplémentaires qui nécessiteront du code CSS3 lourd. Tout d'abord, box-shadow, qui est assez simple et ne nécessite qu'un seul préfixe de navigateur à ce stade. L'ajout d'un dégradé reste toutefois un énorme gâchis. Je déteste coder les dégradés à la main et j'utilise ce générateur pour créer du code pour le dégradé linéaire dont nous avons besoin.
Voici le code résultant (j'ai également ajouté une couleur de corps):
Étape 2 Vérification de la progression
Après avoir ajouté ce code, nous pouvons voir clairement la forme de la carte finie. Le problème est que notre contenu est en dehors des limites de la carte, nous y reviendrons bientôt.
Étape 3. Style de l'avatar
Avant de nous attaquer à la résolution du problème de texte laid, commençons à mettre notre avatar en forme et à le mettre en place.
Tout ce que nous avons fait ici, c’est de décaler l’image avec les marges, d’obtenir la taille appropriée quelle que soit l’image que vous utilisez et d’ajouter un rayon de bordure. Notez que cela ne nécessite plus de préfixes de navigateur. Hourra!
Étape 3 Vérification de la progression
Lentement mais sûrement, nous progressons. Maintenant, notre avatar est en place avec le style que nous voulons. Ensuite, nous aborderons le texte!
Étape 4. Style le texte
La manière dont le texte coule actuellement n'est pas bonne. Nous devons le placer à la droite de l'avatar plutôt que sous celui-ci. nous pourrait Floate it, mais je pense que le positionnement absolu va nous donner plus de liberté et de flexibilité pour le pousser exactement où nous le voulons.
Comme vous pouvez le constater, après avoir appliqué le positionnement absolu, je l'ai déplacé vers le bas et à gauche, puis tout le texte aligné au centre. C’est là que notre positionnement relatif que nous avons appliqué précédemment entre en jeu. En utilisant cette technique, la div interne absolument positionnée considérera le point zéro comme étant la div externe relativement positionnée au lieu du point en haut à gauche de la toile.
Style de l'en-tête et du paragraphe
Maintenant que le texte a été mis en place, modélisons-le. Nous allons commencer par nous concentrer sur l'en-tête et le paragraphe.Tout ce dont nous avons besoin, c’est d’appliquer un style de police et une couleur pour chacun.
Avec ce petit bout de code, nous cherchons déjà beaucoup mieux. Nous avons juste besoin de transformer ce lien en bouton et nous serons prêts à plonger dans les pseudo-éléments.
Style le lien
La plupart du texte est facile à styler, mais pour le lien, nous avons besoin d'un bloc de code beaucoup plus volumineux. En effet, la conception d'origine appelle un lien stylé ressemblant à un bouton. Pour ce faire, nous devrons ajouter du rembourrage, un rayon de bordure et des ombres.
Il y a quelques points importants à prendre en compte ici. Tout d'abord, j'ai supprimé le style de lien par défaut en supprimant la décoration du texte et en définissant une nouvelle couleur. De plus, j'ai ajouté la plus petite des bordures autour du bouton pour l'aider à se démarquer un peu. Enfin, j'ai placé deux ombres sur cet élément. La première est une ombre incrustée qui est vraiment davantage une lueur intérieure et la seconde est une ombre portée plus typique.
Étape 4 Vérification de la progression
Avec ça, nous avons un joli petit? Engagez-moi? carte. techniquement, vous pourriez vous arrêter ici, mais je vais continuer et créer le petit effet de carte empilée à partir du dessin original.
Étape 5. Empiler le pont
Dans la conception originale de Marc, nous voyons qu'il a créé l'illusion d'une pile de cartes plutôt que d'afficher une seule carte flottant dans l'espace. Cela peut être réalisé de différentes manières avec du code, mais il ne faut surtout pas oublier qu'il serait préférable de ne pas encombrer notre balisage HTML avec des div vides, une solution CSS pure serait nettement préférable.
Compte tenu de cette information, nous pouvons nous tourner vers le?: Avant? et après? Les pseudo-éléments de la solution, que nous expliquons en profondeur dans notre post, The Lowdown sur: Before et: After en CSS.
Nous commencerons par le pseudo-élément: after. Pour le mettre en œuvre, ciblez le? Hireme? classe et utilise la syntaxe à deux points (IE n'apprécie pas la syntaxe à deux points). Définissez le contenu en blanc, la position en absolu, le bord de rayon à 10px (identique à la carte d'origine) et déplacez-le vers la gauche de 4px (la valeur supérieure doit être à 0). J'ai terminé ceci en réglant l'index z sur -1 pour m'assurer qu'il apparaît sous la carte d'origine.
En gros, notre objectif est de reconstruire la carte originale. Nous voulons les mêmes dimensions, les mêmes ombres, le même dégradé, etc. La principale différence est que nous ajouterons une rotation pour décaler cette carte de l'original.
Maintenant, nous répétons le même processus avec le?: Avant? pseudo élément afin que nous nous retrouvons avec une pile de trois cartes. Ce tour, l'index z est mis à -2 et la rotation a été doublée.
Nettoyez ce gâchis!
Il est très important de toujours interroger votre code et d'examiner comment vous pouvez l'améliorer. En regardant les styles pour les trois différentes cartes, je vois un tonne de répétition. Ceci est une violation directe du principe de codage DRY (Don't Repeat Yourself), qui aide votre CSS à rester propre et efficace.
Les mêmes valeurs exactes de hauteur, de largeur, de rayon de bordure, d'ombre et de dégradé sont répétées au moins trois fois dans notre code. Ceci est complètement inutile et bâclé. C'est bien de coder comme ça car tu es? Esquisse? et jouer pour bien faire les choses, mais une fois que vous avez terminé, vous devriez toujours nettoyer.
Nous pouvons accomplir cela en prenant toutes ces valeurs répétées et en les regroupant dans un seul bloc de déclaration qui cible les trois sélecteurs. Après cela, nous pouvons dramatiquement réduire le code nécessaire pour chaque carte individuelle.
Découvrez la démo
Bonne nouvelle, nous avons tous terminé! Nous avons maintenant un petit super? Engagez-moi? badge qui peut être facilement déposé sur n’importe quelle page Web. J'ai intégré la démo CodePen ci-dessous afin que vous puissiez avoir un aperçu du code et du résultat final. Si cela ne fonctionne pas pour vous, consultez-le ici.
Qu'est-ce que tu penses?
J'espère que vous avez apprécié ce petit projet autant que moi. Nous avons beaucoup appris sur tout, de l'empilement d'objets avec z-index à l'organisation de notre code avec les concepts DRY. Laissez un commentaire ci-dessous et laissez-moi savoir ce que vous pensez.
Si vous avez des suggestions d’amélioration ou de modification, assurez-vous de lancer ma démo CodePen et de laisser un lien vers votre version ci-dessous.