Index

Style des titres

Personnaliser la couleur des titres

Dans PageCss , vous trouverez ce code prêt à être adapté à vos gouts et vos couleurs.
Des variables de couleurs ont été définies dans le thème Margot, vous pouvez les modifier :
- soit en utilisant les couleurs de votre thème
par exemple pour utiliser la couleur primaire vous utiliserz la variable --title-h1-color:var(--primary-color);
- soit en utilisant un code couleur hexadecimal :
par exemple --title-h2-color:#ea663c;
- soit nommer la couleur : red, green, blue - c'est plus simple mais le choix est réduit ... (listes des couleurs que l'on peut nommer)

:root { 
 --title-h1-color:var(--neutral-color); 
 --title-h2-color:#ea663c;
 --title-h3-color:Fuchsia; 
 --title-h4-color:var(--secondary-color-2); 
 }

  • Si vous souhaites aller plus loin, vous pouvez aussi définir vos propres style avec toutes les propriétés css que vous voulez :
  • /* pour les titres de niveau 1 */
 h1 {
	color:red;
	border:2px solid blue; }
 /* pour les titres de niveau 2 */
 h2 {
  ....
  }

  • Titre avec un effet surligné

image Capture_dcran_titre_surlign.png (3.2kB)
L'astuce pour avoir une couleur de fond légèrement décalée comme sur cet exemple, c'est de définir un dégradé transparent sur 60% de la hauteur du titre, puis de la couleur de votre choix sur 40%
L'utilisation d'un dégradé est possible en utilisant la propriété CSS background-image.


h3 {
  • font-size: 1.2rem;
  • color: var(--neutral-color);
  • background-image: linear-gradient(transparent 60%, rgb(253, 193, 0) 40%);
  • width: fit-content;
}


Titre avec un petit trait dessous

image Capture_dcran_titre_soulign.png (19.7kB)
Le trait est sous le titre est défini grâce au pseudo élément after
Celui ci permet de rajouter un contenu après une balise HTML, ici après les titres de niveau 2

  • h2::after {
    • content: '';
    • width: 60px;
    • border-bottom: 3px solid var(--primary-color);
    • display: block;
}


PDF