Share
Les balises sont une fonctionnalité familière de nombreux services Web 2.0, de sites Web et en particulier de blogs. Au cours de ce tutoriel, nous allons utiliser CSS3 pour créer des balises ressemblant à des tickets, sans aucune image..
Voici un aperçu rapide du processus:
Commençons par ajouter d'abord le balisage à l'intérieur du tête de notre document. Nous avons ajouté deux feuilles de style: "tut.css" et "tickets.css"; Vous pouvez supprimer l'ancien lorsque vous souhaitez implémenter votre propre travail, mais nous l'utilisons dans la démo. La feuille de style "tickets.css" contient tous les styles qui vont formater nos info-bulles. Voici notre balise de tête de document:
Balises purement similaires à des tickets CSS3
Nous devons maintenant ajouter le balisage pour les balises. Nous avons utilisé une division pour chaque balise avec un attribut de classe billet que nous utiliserons pour styliser les balises. Ensuite, nous avons un span avec l'attribut de classe cercle. Enfin, vous verrez un lien avec du texte pour les balises. Voici le balisage des balises (j'ai ajouté quatre balises à titre d'exemple, mais vous pouvez en ajouter autant que vous le souhaitez):
CSS3HTML5ConceptionDéveloppement
Commençons par définir les balises principales div (.billet). Ici, nous définissons les styles de police, définissons la position sur relatif afin que nous puissions positionner des éléments absolus à l'intérieur (notez qu'il a !important sans cela, nous ne pouvons pas obtenir les résultats souhaités), couleur de fond, flottant vers la gauche que vous pouvez également définir pour droite, puis enfin un peu de rembourrage et des marges d'espacement.
.ticket font-family: Arial; taille de police: 12px; poids de police: gras; position: relative! importante; arrière-plan: # 8dc63f; float: gauche; rembourrage: 7px 3px; marge: 0 5px 5px 0;
Nos tags devraient ressembler à ceci.
Maintenant, nous appelons les deux coins supérieurs pour qu’il ressemble à un quart de cercle découpé. Pour créer cela, nous allons utiliser des pseudo-éléments après et avant. Les deux pseudo-éléments ont le même style, la seule différence étant que après est positionné à gauche alors que avant est placé à droite.
Commencez par définir la valeur du contenu sur none, position absolu, z-index à 100 ou toute grande valeur positive, définissez sa position en haut, à gauche ou à droite et à zéro. Définissez le style border-bottom et left ou right, puis finalement nous définissons border-radius sur 20px (coin inférieur droit pour après et en bas à gauche pour avant.
Pour en savoir plus sur la création de formes à l'aide de styles de bordures CSS, vous pouvez afficher cette
guider.
.ticket: après contenu: ""; position: absolue! important; z-index: 100; en haut: 0; gauche: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; .ticket: before content: ""; position: absolue! important; z-index: 100; en haut: 0; à droite: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px;
Nos tags devraient ressembler à ceci.
Dans les liens, vous pouvez maintenant créer un effet d'assemblage en utilisant des bordures et des contours. Nous appelons les liens avec un pointillé 1px contour avec 40% de couleur blanche transparente, définissez les bordures avec 30% de couleur noire transparente, un rembourrage pour rendre les points de couture plus réalistes sur les bords, aucune décoration de texte, définissez la couleur du texte sur 50% de blanc transparent changer la couleur du texte à chaque fois que nous changeons la couleur d'arrière-plan des balises) et définissons un espace blanc sur maintenant. Enfin, nous avons défini la couleur du texte sur le survol à 50% en noir transparent..
.ticket a contour: 1px rgba (255,255,255,0,4) en pointillé; bordure: 1px rgba (0,0,0,0,3) en pointillé; remplissage: 4px 10px 4px 20px; texte-décoration: aucun; couleur: rgba (255,255,255,0,5); espace blanc: maintenant; .ticket a: hover color: rgba (0,0,0,0,5);
Nos balises devraient maintenant ressembler à ceci. Notez que les deux coins de la découpe se trouvent au-dessus de la couture.
Pour les coins inférieurs, nous allons également utiliser des pseudo-éléments après et avant mais cette fois dans le lien. Le style de ces deux coins est évidemment similaire aux coins supérieurs, il suffit de changer la position et la bordure pour les adapter à leur position..
.ticket a: after content: ""; position: absolue! important; z-index: 100; en bas: 0; gauche: 0; border-right: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20 pixels 0 0; border-radius: 0 20px 0 0; .ticket a: before content: ""; position: absolue! important; z-index: 1000; en bas: 0; à droite: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0;
Nos tags devraient maintenant ressembler à ceci.
Dans le balisage HTML, nous avons déjà ajouté un élément span vide avec le nom de la classe cercle et il est principalement utilisé pour créer notre effet trou perforé. Nous utiliserons à nouveau les bordures et le rayon de bord pour créer des cercles avec des valeurs de hauteur et de largeur nulles. Nous allons définir leur position à absolu, z-index à un grand nombre positif, 50% du haut, 8px de gauche avec une ombre de boîte pour le rendre plus réaliste, et enfin une marge supérieure de -5px pour l'aligner parfaitement au centre.
.ticket .circle position: absolute! important; z-index: 100; bordure: 5px #fff solide; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; marge supérieure: -5px; largeur: 0; hauteur: 0; en haut: 50%; à gauche: 8px; -moz-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); -webkit-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0.3);
Nos balises doivent être complètes!
Mon approche pour la création de ces billets a un problème. Les quatre coins et le trou perforé ne changent pas de couleur si la couleur de fond est modifiée. En d'autres termes, ils ne sont pas transparents et vous devez changer leur couleur chaque fois que vous changez la couleur de fond.
Quant à la compatibilité du navigateur, elle a été testée pour fonctionner sur Firefox 4.5+, Chrome 13, Opera 11 et IE9.
Votre résultat final devrait ressembler à l'image ci-dessus. Pour que votre résultat final ressemble exactement à notre démo, vous devez utiliser les styles de "tut.css", mais n'hésitez pas à ajouter vos propres ajustements..
J'espère que vous avez tous appris quelques techniques grâce à ce tutoriel CSS! Partagez vos pensées ci-dessous :)
Accentsconagua