Effet texte 3D : un lettrage extrudé tout en finesse

Un effet texte 3D donne du volume à des lettres plates en ajoutant des côtés, comme si chaque lettre était taillée dans un bloc et vue légèrement de biais. Bien fait, il repose sur une police grasse, une faible profondeur d’environ 5 à 10 % de la hauteur des lettres, une seule direction constante et des côtés tirés d’une teinte plus foncée du fond. Mal fait, il accumule dégradés, reflets brillants, grandes profondeurs et plusieurs directions à la fois. Restez simple et le texte extrudé aura l’allure d’une enseigne assurée, pas d’un clipart.

Ce qui rend le texte extrudé réussi ou bon marché

L’extrusion a une longue histoire dans les enseignes peintes à la main, les affiches de cirque et les pochettes de disques des années 1970. C’est ce qui lui donne un air chaleureux et un peu nostalgique. Appuyez-vous là-dessus pour les cafés, les glaciers, les marques pour enfants, la musique et les événements. Pour une marque calme et minimale, c’est souvent la mauvaise voix ; les effets de texte aident à en choisir un qui convient.

Choisir profondeur, direction et couleur

Profondeur

Les côtés doivent être plus courts que la largeur des traits des lettres. Sur un titre de 160 px, une profondeur de 8 à 16 px paraît pleine ; à 40 px, on dirait une longue ombre, ce qui est un autre style. Un petit texte ne peut pas porter de profondeur : gardez l’extrusion pour les tailles de titre.

Direction

Choisissez une direction et gardez-la dans toutes vos créations. Vers le bas et la droite est la plus naturelle, car nous imaginons la lumière venant d’en haut à gauche. Tout droit vers le bas évoque des blocs empilés. Vers le haut et la gauche paraît inhabituel : cela peut servir pour une seule déclaration, mais lasse vite.

Couleur

Trois teintes font tout le travail : la face de la lettre, le côté et le fond. La face doit contraster fortement avec le fond. Le côté se place entre les deux, en général une teinte profonde du fond ou de la face. Le tirer du fond donne l’impression que l’extrusion est éclairée par la même lumière.

Comment faire un effet texte 3D en CSS

Le CSS n’a pas de propriété d’extrusion, mais des ombres empilées font l’affaire. Chaque couche de text-shadow est une copie pleine des lettres, décalée d’un pixel de plus, sans flou. Empilez-en assez et les copies fusionnent en côtés pleins. Une dernière ombre plus douce dessous pose les lettres sur la page.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Écrire des dizaines de couches à la main est fastidieux. Quelques lignes de JavaScript produisent la liste pour n’importe quelle profondeur, direction et couleur, à coller dans votre feuille de style.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Gardez les titres extrudés en vrai texte sur un site web, pour qu’ils restent indexables, sélectionnables et lisibles par les lecteurs d’écran. Les ombres ne changent pas le contraste mesuré entre la lettre et le fond : veillez à ce que la couleur de face passe seule. Pour une version plus légère et graphique, une seule ombre dure sans couches est traitée dans les ombres de texte ; pour une vraie 3D avec lumière et rotation, vous entrez dans le territoire de WebGL, que les dégradés shader présentent.

Réaliser un lettrage extrudé pas à pas

1. 1

   Choisissez deux à quatre mots

   Un nom de boutique, une offre unique, un titre d’événement. L’extrusion a besoin d’espace autour d’elle.

2. 2

   Composez-les dans une police grasse

   Une sans serif ou une slab en graisse noire, ou une serif rétro douce. Les polices rétro en suggèrent quelques-unes à la bonne chaleur.

3. 3

   Choisissez les couleurs de face, de côté et de fond

   Fort contraste entre la face et le fond ; le côté, une teinte plus foncée du fond.

4. 4

   Ajoutez de la profondeur dans une seule direction

   Partez d’environ 6 % de la hauteur des lettres, vers le bas et la droite. N’augmentez que si cela paraît encore plat.

5. 5

   Gardez tout le reste plat

   Détails, dates et prix dans une sans serif unie et pleine, sans effet.

Le texte extrudé dans Gradiently

Extrusion est l’un des traitements de Lettrage de Gradiently : il donne à n’importe quel texte du Studio une profondeur pleine vers le bas et la droite, avec des côtés dessinés dans les couleurs du Mark et un réglage de profondeur, donc aucune couche à empiler. Le Mark derrière la création déplace sa zone la plus calme derrière les mots : le lettrage extrudé reste lisible, même quand le fond change dans le cadre. L’effet texte contour et d’autres traitements sont dans le même menu si l’extrusion s’avère trop bruyante pour le message.