Pourquoi ce simple mouvement de texte CSS HTML ne fonctionne-t-il pas?

Mon but ultime est de faire un effet comme celui-ci: http://codepen.io/yoksel/pen/XJbzrO (bas de la page). Mais je ne peux même pas obtenir ce contour de texte simple à travailler.Pourquoi ce simple mouvement de texte CSS HTML ne fonctionne-t-il pas?

<!DOCTYPE html> 

<html lang = "en-US"> 
    <head> 
    <title> Test </title> 
    <style> 
     #title { 
      color: blue; 
      stroke: red; 
      stroke-width: 2px; 
     } 
    </style> 
    </head> 

    <body> 
    <h1 id="title">This is some text</h1> 
    </body> 
</html>

La solution doit fonctionner sur tous les principaux navigateurs. J'utilise Google Chrome. Si le trait ne peut pas être effectué de cette manière, ne suggérez pas d'utiliser des ombres. Je ne peux pas transformer les ombres en l'effet désiré.

Source

2016-07-13 Daniel Williams

Vous savez, ce stylo utilise svg-s –

@ Bálint Je suis nouveau en HTML et CSS, et je ne suis pas sûr de ce que cela signifie. –

SVG est un élément permettant de créer des graphiques vectoriels avec du code. Stroke est une propriété exclusive pour cela –

La propriété stroke existe en CSS, mais elle ne fonctionne que sur les éléments SVG. Une propriété -webkit-text-stroke peut être appliquée aux éléments de texte standard, mais elle n'est pas standard et ne fonctionne pas dans Internet Explorer. Pour obtenir l'effet que vous recherchez, vous avez 2 options: Utilisez la propriété non standard ou enveloppez votre texte dans un élément SVG.

h1 { 
 
    color: blue; 
 
    -webkit-text-stroke: 2px red; 
 
} 
 
text { 
 
    fill: blue; 
 
    stroke: red; 
 
    stroke-width: 2px; 
 
    font-size:2em; 
 
    font-weight: bold; 
 
}

<h1>Nonstandard -webkit-text-stroke</h1> 
 
<svg> 
 
    <text text-anchor="top" y="50%">SVG Element</text> 
 
</svg>

Source

2016-07-13 22:50:41

@ Bálint - http://caniuse.com/#feat=svg –

Désolé, le poste que je voulais initialement le poste ce message a été supprimé –

Vous essayez d'appliquer une propriété svg "de course" à une balise html. C'est votre problème.

Vous pouvez convertir votre texte en objet svg, puis copier l'effet à partir de ce stylo et cela devrait fonctionner correctement. SVG comme celui-ci est assez compatible avec les navigateurs croisés tant que vous vous en tenez au trait et à certaines animations d'images clés. La seule préoccupation serait que vous deviez faire quelque chose d'autre votre balise h1 pour des raisons de SEO.

Je ne vais pas créer un exemple de travail puisque vous en avez déjà un du stylo code.

Source

2016-07-13 22:52:18 nordicnomad

Pourquoi ce simple mouvement de texte CSS HTML ne fonctionne-t-il pas?

Répondre

Questions connexes