Tags pour les mots clés en FULL CSS (sans images)

tag full css

Il faut l’avouer, même si le W3C n’a pas tout à fait publié le CSS3, les spécialistes nous gâtent un peu en nous offrant des astuces, bien que petites, mais vraiment utiles.

Dans cet article, nous allons voir une astuce offrant la possibilité de créer notre propre design uniquement avec du CSS3 pour afficher les mots clés de nos billets dans notre blog.

Cette astuce est très simple. Elle apporte un style visuel aux mots clés qui sont situés à la fin des billets. Celle-ci utilise au minimum 2 autres astuces CSS qui sont les cercles et les triangles en CSS3.

En gros, il suffit de jouer avec les bordures d’un élément n’ayant ni largeur ni hauteur :
height : 0 et width : 0.
Pour créer un cercle, vous n’aurez besoin que d’un carré avec des angles arrondis ce qui permettra avec le rayon de bordure (border-radius) approprié, l’obtention du cercle en question.

Le code HTML

Généralement, nous codons nos tags avec une liste non ordonnée (ul) permettant de rendre la structure XHTML assez simple :

Ensuite, nous allons ajouter les pseudo-éléments CSS :before et :after, et nous les personnaliserons. L’objectif étant d’obtenir le rendu identique à l’image en haut de page

Le CSS

Concernant le CSS, nous allons positionner la liste des mots-clés (tags) après le contenu du billet blog tout en effectuant l’ajustement de la positionnement en absolue de l’élément ul (position : absolute).

Ensuite, nous allons valoriser les attributs qui font référence à la hauteur (height et line-height) de l’élément li de la liste, mais également tous ceux du lien le contenant.

Ensuite, nous allons personnaliser le lien qui est l’élément <a> contenu dans la liste.
Nous ajoutons des marges intérieures (padding) et les marges extérieures (margin) ainsi que des coins arrondis aux extrémités droites (right bottom et right top).

Pour réaliser le bout pointu de l’image, il suffit d’ajouter le pseudo élément :before sur la balise <a>.
La valeur utilisée pour la largeur et la hauteur de l’élément est zéro. Cela permet de n’utiliser que ces bordures.
Pour l’obtenir une flèche pointant que vers la gauche, il suffit d’afficher uniquement la bordure droite.

Ensuite, un dernier élément est à ajouter. Il s’agit du pseudo-élément :after associé à la balise <a>.
Cet élément agira comme trou avec des bords arrondis. Pour cela, nous allons devoir créer un carré vide puis arrondir les côtés dans le but d’avoir un cercle. Ce dernier sera positionné en absolu avec position : absolute.

Enfin, l’étape final consiste à l’ajout du style offrant la possibilité d’une personnalisation d’un effet de survol ( :hover) à la balise <a>.

Répondre