Mercredi 16 mai 2018 — Dernier ajout jeudi 17 mai 2018

Test de la déclaration text-shadow

0 vote

Principe :
text-shadow: Largeur Dx Dx Rayon Couleur

Démonstration de la déclaration

Dx : déplacement horizontal.
Dy : déplacement vertical
Rayon : nul si pas déclaré.

Lettre A majuscule
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,

A