Share
Salut les gars, nous allons créer aujourd'hui Tag Tag Tag Cloud de Premium Pixels. Pour expérimenter différentes approches, nous allons créer les balises en utilisant des dégradés, des ombres et (surtout) des transformations CSS, qui constitueront le point de chaque balise. Après l'achèvement, nous irons même plus loin et répondrons à IE.
Nous avons déjà couvert les balises sur Webdesigntuts +, mais cette fois nous allons examiner une méthode alternative pour créer tous les morceaux composites. Il existe peut-être des moyens plus précis de créer l’effet, mais notre exemple s’abstiendra d’images, d’utiliser très balisage propre et un style inhabituel. Restons coincés!
Commençons par introduire un balisage de base, y compris le doctype HTML5. Nous allons également nous référer à notre feuille de style dans la tête de notre document.
Pour les besoins de ce tutoriel, nous allons créer un conteneur / emballage pour contenir nos balises. Vous aurez probablement besoin de quelque chose de similaire si vous les utilisez dans, par exemple, une barre latérale de blog.
Pour les nôtres, nous allons simplement créer une div avec une classe de wrapper, appliquer une largeur de 340px et une marge de 50px auto pour centrer le wrapper sur la page. J'ai ajouté 50px au lieu de 0 juste pour ajouter un peu de marge en haut afin que nos tags ne touchent pas le haut de la fenêtre du navigateur. En ajoutant cette CSS, nous allons ajouter du style au corps (comme une image d’arrière-plan) et appliquer une réinitialisation.
html, corps, div, span, applet, objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr et adresse, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, dl, dt, dd, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, à part, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, menu, navigation, sortie, rubis, section, résumé, heure, marque, audio, vidéo, entrée, zone de texte, sélectionnez arrière-plan: transparent; bordure: 0; taille de la police: 100%; marge: 0; contour: 0; remplissage: 0; alignement vertical: ligne de base , details, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block corps hauteur de ligne: 1 blockquote, q guillemets: aucun blockquote: avant, blockquote: après, q: avant , q: après contenu: aucun
body font-family: 'Helvetica Neue', Helvetica, Arial, sans serif; taille de police: 16px; fond: url (… /images/bg.jpg) répéter; -webkit-font-lissage: antialiasé; .wrapper max-width: 340px; marge: auto 50px;
J'ai structuré ces balises très simplement; tout ce que nous allons utiliser est une balise d'ancrage (un choix logique, car ils serviront probablement de liens vers quelque chose ou quelque chose). Pour ce tutoriel, je lui ai donné une classe de "tag", mais cela peut être changé en tout ce que vous voulez.
haute résolution
Bon, passons à la partie suivante! Nous allons maintenant commencer à styler le tag - il y a pas mal de code ici, mais ne vous laissez pas décontenancer, je vais vous expliquer ce qui se passe..
J'ai d'abord ajouté quelques éléments de base ici;
Nous avons ensuite défini certains paramètres de police, taille, famille et poids, suivis d’une couleur et d’une ombre de texte. Après cela, nous avons appliqué un peu de remplissage, en utilisant ems afin que tout soit dimensionné par rapport à la taille de la police du corps ou à celle du navigateur. Ensuite, une simple bordure, bien que nous n’en ayons pas appliquée à gauche. Les ems ont refait surface! Cette fois, nous les appliquerons à border-radius mais uniquement aux coins supérieur droit et inférieur droit. Ok es-tu encore réveillé? Il y en a plus… ensuite nous allons utiliser des dégradés CSS3 (je me suis déjà tourné vers l'avant et j'ai utilisé l'application soignée Gradient pour calculer les valeurs). La dernière partie consiste en des ombres de boîte, un insert et une ombre portée. Rappelez-vous ces préfixes!
.tag float: left; marge: 0 0 7px 20px; position: relative; famille de fontes: 'Helvetica Neue', Helvetica, Arial, sans serif; taille de police: 0,75em; poids de police: gras; texte-décoration: aucun; couleur: # 996633; ombre du texte: 0px 1px 0px rgba (255,255,255, .4); rembourrage: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid # d99d38; border-right: 1px solid # d99d38; border-bottom: 1px solid # d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0,25 m 0,25 m 0; background-image: -webkit-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 71)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 71)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (254, 218, 113), rgb (254, 186, 71)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 71)); image d'arrière-plan: gradient linéaire (haut, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-shadow: encart 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-shadow: encart 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); box-shadow: encart 0 1 px 0 # faeaba, 0 1 px x 1 px rgba (0,0,0, 0,1); z-index: 100;
Ok, nous avons terminé la partie principale de la balise, la prochaine partie consiste à créer la flèche. Pour ajouter cela, nous utiliserons le :avant pseudo élément. Nous allons également expérimenter certaines techniques avancées ici à partir de CSS; transformations. La création de ces flèches impliquait beaucoup d'essais et d'erreurs. Je devais essayer différentes largeurs et hauteurs ainsi que le positionnement du haut et du bas pour le rendre aussi parfait que possible! Tout retour est donc le bienvenu…
Nous avons utilisé le même dégradé d’arrière-plan que précédemment, mais avec une modification mineure: comme nous allons faire pivoter le carré que nous sommes sur le point de créer, nous devons également faire pivoter le dégradé afin qu’il corresponde à la partie principale de la fenêtre. étiquette. L'application Gradient m'a permis de changer la direction du dégradé. La prochaine partie consiste à créer des bordures, à gauche et en bas. En ce qui concerne la flèche, il ne reste plus qu’à ajouter un rayon de bordure pour lisser le point et appliquer enfin nos transformations. Nous allons faire pivoter le carré que nous avons créé à 45 degrés pour qu'il ressemble à une flèche. Nous avons utilisé transformer: 45; avec les préfixés.
.tag: before contenu: "; largeur: 1,30 m; hauteur: 1,358 m; image d'arrière-plan: -webkit-linear-gradient (en haut à gauche, rgb (254, 218, 113), rgb (254, 186, 71)) ; image d’arrière-plan: -moz-linear-gradient (en haut à gauche, rgb (254, 218, 113), rgb (254, 186, 71)); image d’arrière-plan: -o-linear-gradient (en haut à gauche, rgb ( 254, 218, 113), rgb (254, 186, 71)); image d'arrière-plan: -ms-linear-gradient (en haut à gauche, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: gradient linéaire (en haut à gauche, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); position: absolue; gauche: -0.69em; haut: .2em; -webkit-transformation: rotation (45deg); -moz-transformation: rotation (45deg); -o-transformation: rotation (45deg); transformer: faire pivoter (45deg); bord gauche: 1px solide # d99d38; bord-bas: 1px plein # d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0,25 µm; rayon de bordure: 0 0 0 0,25 µm; indice z: 1;
Vous devriez maintenant avoir quelque chose de similaire à ce qui suit; Remarque: j'ai zoomé pour que vous puissiez voir où la flèche se connecte à la partie principale, ce qui est à peine visible lorsque visualisé en taille normale.
La dernière partie pour compléter notre tag est de créer le petit trou dessus. Ici, nous allons utiliser un pseudo à nouveau, mais cette fois, le :après élément. Ce que nous avons fait pour créer le trou est plutôt simple. Nous avons défini une largeur et une hauteur en ems pour une croissance en douceur. Ensuite, nous avons ajouté un grand rayon de bordure qui créera un cercle avec une bordure pour le délimiter. Suite à cela, nous avons ajouté une ombre portée qui est similaire à l'ombre du texte. Enfin nous l'avons positionné (en utilisant ems).
.tag: after content: "; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; bordure: 1px solide # d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolue; haut: 0.667 em; left: -0.083em; z-index: 9999;
Pour rendre nos tags encore plus géniaux, nous ajouterons quelques styles de survol. Nous devrons ajouter ceci à la partie principale de la balise et à la flèche (tout en nous rappelant de faire pivoter le dégradé de la flèche). Nous avons également changé la couleur de la bordure sur les deux.
.tag: survol image d'arrière-plan: -webkit-linear-gradient (haut, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: -o-linear-gradient (haut, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: gradient linéaire (en haut, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); couleur de bordure: # e1b160; .tag: survol: avant background-image: -webkit-linear-gradient (en haut à gauche, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: -moz-linear-gradient (en haut à gauche, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: -o-linéaire-gradient (en haut à gauche, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: -ms-linear-gradient (en haut à gauche, rgb (254, 225, 141), rgb (254, 200, 108)); image d'arrière-plan: gradient linéaire (en haut à gauche, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); couleur de bordure: # e1b160;
Si vous souhaitez toujours afficher vos balises en toute gloire pour les utilisateurs d'IE, vous devrez adopter une approche différente à leur égard, en commençant par créer une feuille de style spécifique à IE. Je vais expliquer pourquoi… Tout d’abord, beaucoup de nos effets CSS3 ne fonctionneront pas dans les versions antérieures à IE9 (quelques-uns seulement fonctionnent dans IE9 tel qu’il est), mais le problème principal ici est celui des transformations qui ne fonctionneront pas. Pour répondre aux besoins des utilisateurs d'IE, nous allons un peu modifier notre code. Nous allons commencer par changer notre code HTML en premier, en remplaçant le emballage div et tout à l'intérieur avec:
haute résolution
Nous utiliserons à nouveau une balise d'ancrage mais avec 3 plages à l'intérieur; nous en aurons besoin pour créer la flèche, la partie principale et la fin qui a le rayon de la frontière.
Pour nous assurer que nos tags fonctionneront dans IE, nous devrons utiliser des images. Commencez par supprimer tout ce qui se trouve sous les styles .wrapper, tout ce qui concerne les balises! Vous devez maintenant coller l’extrait suivant. Nous appliquons simplement quelques images d'arrière-plan ici, mais répétons également l'arrière-plan du texte sur l'axe des x car le texte pourrait avoir n'importe quelle longueur! Même Supercalafragalisticexpialadoshus!
.flèche largeur: 15px; hauteur: 25px; float: gauche; fond: url (… /images/arrow.png) no-repeat; .text height: 25px; float: gauche; padding-left: 4px; padding-right: 4px; background: url (… /images/text.png) repeat-x; famille de fontes: 'Helvetica Neue', Helvetica, Arial, sans serif; taille de police: 0,75em; poids de police: gras; couleur: # 996633; ombre du texte: 0px 1px 0px rgba (255,255,255, .4); hauteur de ligne: 23px; .end width: 4px; hauteur: 25px; float: gauche; fond: url (… /images/end.png) no-repeat; .tag: survol .arrow background-image: url (… /images/arrow_hover.png); .tag: survolez .text background-image: url (… /images/text_hover.png); .tag: survoler .end background-image: url (… /images/end_hover.png);
Eh bien c'est ça! C'est un autre tutoriel complet et ça a l'air bien! Nous avons pris ces balises tagtastic et les avons créées avec CSS tout en prenant en charge Internet Explorer en même temps. Ces balises peuvent être utilisées pour toutes sortes de choses - allez-y et utilisez-les dans une barre latérale, un blog, comme vous voulez!
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu.
Accentsconagua