Générer un contour de lettre Enregistrer au format PDF

Jeudi 17 mai 2018 — Dernier ajout vendredi 18 mai 2018
0 vote

Valeurs possibles dans text-shadow text-shadow : Largeur Dx Dx Rayon Couleur

Dx : déplacement horizontal.
Dy : déplacement vertical
Rayon : nul si pas déclaré
Couleur : au format hexdécimal

Démonstration de la déclaration

Lettre A majuscule
Couleur de lettre : rouge
Couleur de bordure : noire
Largeur de bordure : 3px

Cas possibles
  Dy=-3px Dy=0 Dy=3px
Dx=-3px 11

Dx=-3px, Dy=-3px

A

12

Dx=-3px, Dy=0

A

13

Dx=-3px, Dy=3px

A

Dx=0 21

Dx=0, Dy=-3px

A

22

Dx=0, Dy=0

A

23

Dx=0, Dy=3px

A

Dx=3px 31

Dx=3px, Dy=-3px

A

32

Dx=3px, Dy=0

A

33

Dx=3px, Dy=3px

A

Génération d’un contour de lettre

À ma connaissance il n’existe de pas déclaration CSS pour réaliser un contour de texte, mais on peut faire un pseudo-contour en utilisant text-shadow et en l’appliquant plusieurs fois sur un titre h1 par exemple.

Application au contour

Tableau
Déplacement XDéplacement YCas
-3 -3 11
-3 0 12
-3 +3 13
0 -3 21
0 +3 22
+3 -3 31
+3 0 32
+3 +3 33

Le cas 22 ne sert à rien dans notre cas.

Ecriture du text-shadow

text-shadow: -3px -3px black, -3px 0 black, -3 3px black, 0 -3px black,  0 3px black, 3px -3px  black, 3px 0 black, 3px 3px black

Déclaration pour la lettre A ci-dessous

<p style= "margin-left : 5px; font-family: arial; color: red; font-size:5em; text-shadow : black 3px 0px, black 0 -3px, black -3px 0, black 3px 3px, black 3px -3px, black -3px 3px, black -3px -3px "><br />A</p>


A