Empilez jusqu’à cinq calques text-shadow, chacun avec son décalage, son flou, son opacité et sa couleur, et vérifiez le rendu sur un texte d’exemple. Copier CSS place le bloc .shadowed-text dans le presse-papiers.
Fonctionne localement dans votre navigateurJusqu’à cinq calques text-shadow s’empilent dans un aperçu : le texte, la taille (24-120 px) et la graisse (400/600/800/900), les couleurs du texte et du fond, puis par calque le décalage horizontal et vertical (60 px de chaque côté), le flou (0-100 px), l’opacité (0-1) et la couleur. Chaque frappe redessine la scène et le panneau de code contient exactement la chaîne que Copier CSS place dans le presse-papiers.
La page s’ouvre sur deux calques : 2px 3px 0px rgba(54, 217, 138, 0.9) au-dessus de 6px 8px 18px rgba(6, 29, 20, 0.55), avec VoriTools en 64 px et graisse 800. La sortie est un bloc .shadowed-text avec une ligne d’ombre par calque ; le premier calque de la liste est peint au-dessus.
La sortie imprime une ligne d’ombre par calque, reliées par une virgule et un retour à la ligne, sous le sélecteur fixe .shadowed-text et avec la valeur du sélecteur de couleur : color: #f7fff9 et text-shadow: 2px 3px 0px rgba(54, 217, 138, 0.9), 6px 8px 18px rgba(6, 29, 20, 0.55) sur une page intacte.
L’ordre se voit. Dans le test pixel, deux calques partageaient le même décalage de 12 px et ne différaient que par la couleur : le rouge en premier a dessiné des bords rouges, et après échange c’est le bleu qui apparaît - la première ombre de la liste est au-dessus.
Le décalage est borné à 60 px, le flou à 0-100 px et l’opacité à 0-1. Pendant la frappe l’aperçu reste dans ces bornes ; à la sortie du champ la valeur bornée réécrit le champ : 999 sur le décalage horizontal mémorise 60 px et -10 sur le flou mémorise 0 px.
Le sélecteur de couleur renvoie une valeur hex et l’opacité devient le canal alpha : #123456 à 0,5 exporte rgba(18, 52, 86, 0.5). Un flou nul imprime une copie nette du glyphe, comme le fait le calque par défaut 2px 3px 0px.
Seuls l’empilement des ombres et la couleur du texte arrivent dans la sortie : le texte de l’aperçu, sa taille, sa graisse et le fond de la scène restent dans la scène. Chaque calque ne porte qu’une couleur : pas de dégradé ni de valeur spread par calque, pas d’ombre intérieure, pas de mode filtre drop-shadow().
Tout se passe dans la page : la frappe, l’ajout et la suppression de calques, Copier CSS et Réinitialiser n’ont envoyé aucune requête réseau lors du test (en et ja) ; la seule requête tierce vient de la balise d’analyse partagée. Le sélecteur exporté reste toujours .shadowed-text.