J'essaie d'obtenir cet effet de texte courbe en utilisant CSS3, HTML Canvas, ou même SVG (voir l'image ci-dessous par exemple) ? Est-ce possible ? Si oui, comment puis-je obtenir cet effet ?
Mise à jour : Pour clarifier : le texte qui sera stylé de cette façon sera dynamique.
SVG supporte directement le texte sur un chemin, bien qu'il ne "plie" pas les glyphes individuels le long du chemin. Voici un exemple de la façon dont vous le créez :
...
<defs>
<path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
<textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
Vous pouvez certainement le faire avec canvas, essayez ce code à titre d'exemple :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="cnv"></canvas>
<script type="text/javascript" charset="utf-8">
cnv = document.getElementById("cnv");
cnv.width = 500;
cnv.height = 300;
ctx = cnv.getContext("2d");
ctx.font = "bold 12px sans-serif";
text = "abcdefghijklm"
for (i = 0; i < text.length; i++) {
ctx.fillText(text[i], 300, 100);
ctx.rotate(0.1);
}
</script>
</body>
</html>Il ne fait pas tout à fait l'affaire, mais je suis certain que vous parviendrez à l'adapter à votre goût ;)
Vous pouvez aussi le faire en utilisant des CSS, mais je suis sûr que vous n'arriverez pas à le faire fonctionner sous IE de sitôt. D'un autre côté, ce qui est cool, c'est que le texte est sélectionnable :D
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
.num1 {
-webkit-transform: translate(0px, 30px) rotate(-35deg);
}
.num2 {
-webkit-transform: translate(0px, 25px) rotate(-25deg);
}
.num3 {
-webkit-transform: translate(0px, 23px) rotate(0deg);
}
.num4 {
-webkit-transform: translate(0px, 25px) rotate(25deg);
}
.num5 {
-webkit-transform: translate(0px, 30px) rotate(35deg);
}
span {display: inline-block; margin: 1px;}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; margin: 50px auto">
<span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
</div>
</body>
</html>
Franchement, je ne me soucie pas de l'IE. Ce projet est destiné à un site optimisé pour l'iPhone et je ne m'inquiète que de son affichage correct dans Webkit. Je pourrais peut-être faire ce que vous suggérez pour le texte dynamique en utilisant un peu de JavaScript. Merci.
IE9+ prend en charge les transformations CSS3 2d, et IE8 et les versions inférieures prennent en charge les transformations matricielles de Microsoft, mais leur traitement est un peu différent.
Il existe un plugin jQuery permettant d'incurver le texte à l'aide de CSS3, appelé arctext.js . Il est assez bon et dispose d'une série d'options de configuration. Je suppose qu'il ne fonctionnera pas sur IE8, mais je suppose que la plupart des choses CSS3 ne fonctionnent pas !
Il y a aussi une page de démonstration avec quelques exemples en action. ici .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
