Share
Nous commençons aujourd'hui avec un tutoriel sur la façon de concevoir et de coder votre propre nuage de tags juteux à l'aide de Photoshop, CSS et quelques images minuscules! Nous utiliserons la technique ancestrale des portes coulissantes, mais nous inclurons des méthodes de sélecteur CSS avancées vers la fin si vous souhaitez pousser l'enveloppe et l'utiliser dans WordPress. À vos marques, prêt, partez!
Un peu de polissage aux bons endroits peut vraiment donner du piquant à un dessin de page par ailleurs standard. Aujourd'hui, nous allons vous expliquer comment créer votre propre variante personnalisée de l'élément "nuage de tags" que vous pouvez trouver dans à peu près n'importe quel système de blogging de nos jours..
Nous allons parcourir rapidement le design (c'est facile), puis creuser dans le CSS qui fait tout cela. Utilisez-le dans vos propres projets, déposez-le dans un blog personnel, c'est vous qui décidez? allons plonger dans!
Les puristes CSS de l’audience peuvent faire un mouvement de recul à ce stade, car nous allons ouvrir Photoshop. Pourquoi? Parce que nous voulons créer une conception de balise complètement personnalisée. Cette balise que nous utiliserons aujourd'hui peut-elle être réalisée en CSS? Probablement - je suis sûr que certains ninjas CSS sur le marché vont rapidement souligner que ce ne sont que des formes de base? mais si vous vouliez ajouter de la texture? Ou une forme complètement différente (bords festonnés n'importe qui)?
Mis à part les soucis du navigateur d'essayer de faire fonctionner cela avec CSS uniquement, il est important de savoir comment utiliser les images et les CSS à l'unisson, c'est précisément ce que nous allons faire..
Allez-y et lancez Photoshop. Ouvrir un nouveau document de 71px par 29px.
La largeur ne compte pas beaucoup ici? mais la hauteur va être quelque chose que vous voulez vous rappeler.
Ensuite, dessinons un rectangle arrondi sur notre document avec un rayon de 2px. Laisser un peu de place pour une ombre portée plus tard? dans notre cas, j'ai laissé 2px en bas et sur les côtés.
Il est maintenant temps de créer notre forme personnalisée. Nous allons utiliser Photoshop Ajouter un point et Point de conversion outils. Il n’ya pas grand-chose à cela au-delà du simple bricolage des points jusqu’à ce que vous obteniez la forme souhaitée, alors jouez un peu. Voici les nôtres:
Nous avons besoin d'un petit trou dans notre tag cependant? vous savez, pour que les gens puissent passer une chaîne virtuelle en boucle. Ok, peut-être pas, mais cela ajoute une petite touche supplémentaire qui ne serait pas possible avec CSS. Utilisez le outil de sélection elliptique et dessinez une sélection circulaire (maintenez la touche Maj enfoncée pendant que vous dessinez pour la garder parfaite).
Une fois votre sélection faite, sélectionnez l'inverse de la sélection (Sélectionnez> Inverse) et transformez-le en masque vectoriel sur la forme de votre tag à l'aide du bouton Ajouter un masque de calque bouton en bas de l'inspecteur de calque.
Par souci de brièveté (nous voulons passer à la partie codage, n'est-ce pas?!), Parcourons les styles de calque ici. Vous pouvez ajouter vos propres ajustements, mais voici à quoi ressemblent les nôtres:
Le résultat final devrait ressembler à ceci:
Vous remarquerez dans le PSD (dans le dossier de téléchargement de ce tutoriel) que j'ai également ajouté dans notre texte. N'hésitez pas à faire la même chose au cas où vous auriez besoin de l'utiliser à l'intérieur de n'importe quelle maquette..
Remarque: Vous pouvez facilement inverser l’orientation de la balise. En fait, nous allons vous montrer comment créer une balise orientée vers la gauche et vers la droite lors de la phase de codage..
Woot! Nous avons donc conçu notre tag? mais comment allons-nous l'utiliser dans une page Web réelle? Nous allons commencer par découper notre tag en trois parties:
Enregistrez-les tous en tant que graphiques PNG pour préserver la transparence et stockez-les dans un dossier appelé "images"..
Nous devons maintenant créer notre balisage de base. Nous allons commencer par utiliser une approche simple et logique en utilisant des couches de DIV, mais comme pour tout ce qui concerne le code, nous pourrons nettoyer cela (et réduire la quantité de code requise) au cours des étapes ultérieures..
Voici notre balisage de base pour chaque balise:
Conception
Passons rapidement en revue ceci: nous avons essentiellement un conteneur de balise principal DIV (.tag), avec trois DIV imbriquées:
Vous pouvez continuer et répéter ce bloc de code plusieurs fois pour tester plusieurs balises empilées les unes à côté des autres..
Maintenant il est temps d'ajouter notre CSS.
Nous allons commencer le CSS en appliquant quelques règles de base à chacun de nos divs. Je vais vous montrer le code pour chacun, puis expliquer ce qu'il fait:
Accentsconagua
.tag taille de la police: 11 pt; ombre du texte: 0 1px 1px rgba (255, 255, 255, 0.4); float: gauche; / * Fait que chaque étiquette reste ensemble en une seule pièce * / margin: 5px; .tag .center background: url ("images / gradient.png") repeat-x défiler à gauche en haut transparent; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: auto; remplissage: 0px 6px; / * Donne au texte un peu d'espace pour respirer * / .tag .center a vertical-align: middle; / * Important pour adapter le texte parfaitement * / line-height: 21pt; / * Important pour que le texte soit parfaitement * / color: # 0f2d39; texte-décoration: aucun; Ce bloc de code définit l’élément qui entourera notre balise; Notez que nous ajoutons ici quelques règles de type, un simple flottant et une marge entre chaque balise pour les espacer..
Les deux autres règles du CSS ci-dessus couvrent la partie centrale de la balise - établissant le dégradé de fond et un certain espacement..
À ce stade, vous devriez avoir des balises ressemblant à ceci:
Maintenant, regardons ajouter un peu de style pour les éléments latéraux gauche et droit.
.tag-left .left background: url ("images / tagleft_left.png") défilement non répétitif gauche en haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 15px; / * Identique à la largeur de votre image * / .tag-left .right background: url ("images / tagleft_right.png") no-repeat défiler à droite en haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 4px; / * Identique à la largeur de votre image * / Le bloc de code ci-dessus fait trois choses principales:
Maintenant, vos balises devraient être assez proches pour être complétées:
Mais que se passe-t-il si nous voulons inclure un autre type de tag? dire celui qui fait face à la direction opposée? C'est là que les sélecteurs "tag-left" et "tag-right" entrent en jeu. En les ajoutant au niveau supérieur, nous pouvons ajouter juste quelques règles supplémentaires à notre CSS pour permettre une balise complètement différente:
.tag-right .left background: url ("images / tagright_left.png") défilement non répétitif gauche en haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 4px; / * Identique à la largeur de votre image * / .tag-right .right background: url ("images / tagright_right.png") no-repeat défilement droite en haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 16px; / * Identique à la largeur de votre image * / Ce qui devrait vous donner le bon style "right-tag":
Terminé! Bien, en quelque sorte? pour être honnête, c’est une façon très lourde de gérer cet effet. Dans l'étape suivante, nous vous présenterons des sélecteurs CSS plus avancés pour une approche plus élégante..
Google Fonts Note: Vous avez peut-être remarqué que j'utilise une police personnalisée ici (Droid Sans). Il est facile d'ajouter votre propre police personnalisée. Il vous suffit de vous rendre sur le site des polices de Google, de rechercher celle que vous aimez et de l'ajouter au code d'intégration et à la règle CSS de la police..
La grande chose à propos des polices Google (ou quelque chose du genre) est que vous pouvez réellement appliquer la plupart des styles de police CSS au texte? cela signifie que nous pouvons utiliser des attributs tels que ombre de texte pour créer l'effet de lumière subtile.
Quiconque a codé pendant un certain temps vous dira qu'il existe TOUJOURS un moyen d'améliorer un morceau de code. C'est exactement ce que nous allons faire dans cette dernière étape.
Commençons par examiner ce qui est peu gracieux à propos de l'approche précédente.
Voici une autre approche utilisant CSS :avant et :après sélecteurs pour alléger la charge.
Commençons par regarder le CSS original dans son intégralité, puis récrivons-le à l'aide de nos sélecteurs:
/ * Générique Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag taille de la police: 11 pt; ombre du texte: 0 1px 1px rgba (255, 255, 255, 0.4); float: gauche; / * Fait que chaque étiquette reste ensemble en une seule pièce * / margin: 5px; .tag .center background: url ("images / gradient.png") repeat-x défiler à gauche en haut transparent; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: auto; remplissage: 0px 6px; / * Donne au texte un peu d'espace pour respirer * / .tag .center a vertical-align: middle; / * Important pour adapter le texte parfaitement * / line-height: 21pt; / * Important pour que le texte soit parfaitement * / color: # 0f2d39; texte-décoration: aucun; / * Règles de balise gauche ++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++ * / .tag-left .left background: url ("images / tagleft_left.png") défilement sans répétition haut gauche transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 15px; / * Identique à la largeur de votre image * / .tag-left .right background: url ("images / tagleft_right.png") no-repeat défiler à droite en haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 4px; / * Identique à la largeur de votre image * / / * Règles de balise de droite ++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++ * / .tag-right .left background: url ("images / tagright_left .png ") pas de répétition défilement gauche haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 4px; / * Identique à la largeur de votre image * / .tag-right .right background: url ("images / tagright_right.png") no-repeat défilement droite en haut transparent; bloc de visualisation; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 16px; / * Identique à la largeur de votre image * / / * Générique Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag float: left; marge: 5px; hauteur: 29px; / * Identique à la hauteur de votre image * / width: auto; .tag a background: url ("images / gradient.png") repeat-x défiler à gauche en haut transparent; float: gauche; hauteur: 29px; rembourrage: 5px 6px; couleur: # 0F2D39; taille de police: 11 points; texte-décoration: aucun; ombre du texte: 0 1px 1px rgba (255, 255, 255, 0.4); .tag: before content: "; background: url (" images / tagleft_left.png ") défilement sans répétition 0 0 transparent; affichage: bloc; float: gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 15px; / * Identique à la largeur de votre image * / .tag: after content: "; background: url ("images / tagleft_right.png") no-repeat scroll 0 0 transparent; bloc de visualisation; Flotter à droite; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 4px; / * Identique à la largeur de votre image * / / * Règles de basculement ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ * / .tag.flip: before content: "; background: url ( "images / tagright_left.png") non répétitif défilement de gauche en haut transparent; display: bloc; flottant: à gauche; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 4px; / * Identique à la largeur de votre image * / .tag.flip: after content: "; background: url ("images / tagright_right.png") no-repeat défiler à droite en haut transparent; bloc de visualisation; Flotter à droite; hauteur: 29px; / * Identique à la hauteur de votre image * / width: 16px; / * Identique à la largeur de votre image * / Qu'est ce qui est different? Pour commencer, nous avons éliminé le besoin des éléments gauche et droit à l'intérieur de la DIV.
Ici, il suffit de comparer l’ancien balisage et le nouveau:
Conception
Conception En utilisant le :avant et :après sélecteurs, nous sommes en mesure d’injecter efficacement nos "portes coulissantes" dans le balisage sans charge supplémentaire. Le résultat est un balisage beaucoup plus propre, et qui fonctionne réellement sur tous les navigateurs modernes! Nous avons également abandonné l'utilisation des éléments DIV au profit d'éléments SPAN simples (les SPAN sont un peu plus logiques dans ce contexte).
Alors que faire si nous voulons avoir un état de survol pour nos balises? En fait, c’est plutôt simple - il suffit d’ajouter quelques nouvelles règles au :flotter sélecteur inséré entre notre sélecteur de classe et le :avant et :après sélecteurs.
Par exemple:
.tag: survoler: avant
Cela résout le problème de sélection - à partir de là, vous pouvez ajouter votre propre variation de ce qui se passe lors du survol de la souris. Vous pouvez faire n'importe quoi, de changer la couleur du texte à l'opacité, ou même de modifier les graphiques d'arrière-plan. Voici ce que nous avons utilisé dans la démo:
/ * Règles relatives au survol de souris ++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++ * / .tag a: hover background: url ("images / gradient_hover.png") répéter-x faire défiler à gauche en haut transparent; .tag: hover: before background: url ("images / tagleft_left_hover.png") no-repeat scroll 0 0 transparent; .tag: hover: after background: url ("images / tagleft_right_hover.png") no-repeat scroll 0 0 transparent; .tag.flip: survol: avant arrière-plan: url ("images / tagright_left_hover.png") défilement non répétitif gauche en haut transparent; .tag.flip: survoler: après background: url ("images / tagright_right_hover.png") no-repeat défiler à droite en haut transparent; Notez que permuter l'image peut créer un effet de scintillement rapide la première fois que les images se chargent? il y a moyen de gérer cela, mais c'est un autre tutoriel;)
Utiliser ce petit truc dans WordPress est également assez facile. Consultez la page WordPress Codex sur la fonction "the_tags" que vous utiliseriez normalement dans l’un des fichiers modèles. nous chercherons à voir comment nous pouvons changer le balisage utilisé pour recracher les tags.
Voici un exemple de la façon dont vous pourriez transformer les balises rendues en une liste non ordonnée:
Nous voudrions simplement changer cela pour correspondre à notre propre système:
','',''); ?> C'est tout! Incluez simplement les CSS associées dans votre fichier style.css (ou le fichier .css que vous utilisez dans votre thème), et vous devriez avoir quelques superbes balises personnalisées prêtes à l'emploi.!
Merci de suivre tout le monde :) Les commentaires sur la façon dont nous pouvons améliorer cela ou le faire différemment sont toujours les bienvenus!
