[Résolu] Ajouter 3 points au dessus de mes H1 / H2

Bonjour,
Je me permets de vous contacter car je souhaiterais savoir comment faire pour avoir ce rendu en CSS sur mes H1 / H2 ?



Est-ce mieux de faire l'image en PNG puis de l'appeler en CSS ou alors de tout faire en CSS ?

J'ai essayé en CSS mais je pense que je m'y prends mal : https://codepen.io/jonathancappe/pen/YzvqZXx

D'un point de vue temps de chargement, je pense que le CSS est mieux ? Qu'en pensez-vous ?

Merci pour votre aide,
Jonathan
Modifié par jnce84 (02 Nov 2022 - 17:15)

Bonjour,

le temps de chargement sera plutôt insignifiant pour de si petites images, une fois en cache, plus besoin de les télécharger.

L'idée d'un pseudo est bonne, et tu peut le mettre directement sur le titre.
A partir d'un seul pseudo et d'un box-shadow (ombrage), les autres points peuvent être dupliqués de couleurs différentes.
Si les couleurs sont injectées via une class, alors tu peut utiliser des variables CSS var() , sans avoir besoin de réécrire la règle X fois.
Si une variable vient à manquer pour un titre, une valeur par défaut peut aussi être appliquée.

ressources : https://developer.mozilla.org/fr/docs/Web/CSS/var

et un exemple pour illustrer mon blabla : https://jsfiddle.net/L28gdv0q/
Modifié par gcyrillus (02 Nov 2022 - 18:33)

Super ! merci pour ton retour rapide

Penses-tu qu'il soit possible de faire cela en une seule class ou systématiquement sur tous mes H1 / H2 au lieu de mettre "titre rouge vert jaune" à chaque fois ?

Merci d'avance,
Jonathan

jnce84 a écrit :
Super ! merci pour ton retour rapide

Penses-tu qu'il soit possible de faire cela en une seule class ou systématiquement sur tous mes H1 / H2 au lieu de mettre "titre rouge vert jaune" à chaque fois ?

Merci d'avance,
Jonathan

Bien sur une seule class et sans variables est suffisant si ces couleurs sont toujours les mêmes. Il est nutile de compliquer un truc simple . https://jsfiddle.net/t6oh92az/1/

Cdt
Modifié par gcyrillus (02 Nov 2022 - 21:24)

C'est PARFAIT ! Merci beaucoup pour ton aide