Paragraphe de texte en cercle à L'aide de CSS
j'ai cherché une solution décente et rapide pour placer un paragraphe de texte dans un cercle. J'ai trouvé il y a deux solutions.
Solution 1
Float plusieurs div 's de la même hauteur que le texte à gauche, un à droite du texte, et en changeant les divs largeur vous ajustez l'espace pour le texte.
Solution 2
utilisez le générateur pour la même chose, http://www.csstextwrap.com/index.php .
BONUS (et non une partie du problème, juste un conseil)
Je ne cherche pas cela, mais peut-être quelqu'un pourrait en avoir besoin, et je pense qu'il est agréable de l'avoir comme un lien > http://csswarp.eleqtriq.com / c'est un générateur basé sur le web qui vous aide à enrouler votre texte autour du cercle.
La Question?
est-il une solution plus simple de mettre le paragraphe de texte à l'intérieur d'un cercle sans avoir à ajouter div flottant et un supplément supplémentaire. Gifler une image qui contient le texte n'est pas une solution. Dans le meilleur des cas, la solution aurait un markup HTML propre avec peu de retouches dans le CSS.
5 réponses
le livre D'Eric Meyer "Eric Meyer sur CSS" parle de cela (projet 10) et les solutions d'enveloppe de texte que vous avez trouvé utilisent le même principe.
L'utilisation d'un simple border-radius: 50% n'affecte pas la forme de la boîte de contenu, qui sont rectangulaires pour le moment. Par exemple, voir la demo de Kyle Sevenoaks.
il y a un module CSS3 en développement qui traite de cette question:
http://dev.w3.org/csswg/css-shapes
cependant, cette spécification est toujours en projet et n'est pas encore prise en charge, probablement un an ou deux.
la réponse courte est non, mais nous espérons que les commentaires vous donneront un aperçu.
salut, je pense que sans js je pense que ce n'est pas possible, de sorte à utiliser js et css3
.badge {
position: relative;
width: 400px;
border-radius: 50%;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
}
.char1 {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.char2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/BlurredText/js/jquery.lettering.js"></script>
<script>
$(function() {
$("h1").lettering();
});
</script>
</head>
<body>
<div id="page-wrap">
<div class="badge">
<h1>Established 2012</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
var len = str.length, s;
context.save();
context.translate(centerX, centerY);
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / len) / 2);
for(var n = 0; n < len; n++) {
context.rotate(angle / len);
context.save();
context.translate(0, -1 * radius);
s = str[n];
context.fillText(s, 0, 0);
context.restore();
}
context.restore();
}
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
centerX = canvas.width / 2,
centerY = canvas.height - 30,
angle = Math.PI * 0.8,
radius = 150;
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.strokeStyle = 'blue';
context.lineWidth = 4;
drawTextAlongArc(context, 'Text along arc path', centerX, centerY, radius, angle);
// draw circle underneath text
context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);
context.stroke();
</script>
</body>
</html>
Cliquez ici pour une autre Solution (jsfiddle).
un orignal (?)...la couverture!
function writeInCircle(phrase, cx, cy, fontSize) {
var num = phrase.length
var r = num * fontSize / 6
var d = $("<div>").addClass("writeInCircle").appendTo("body")
$(d).css({position:"absolute",
width: (2*r) + "px",
height: (2*r) + "px",
left: (cx-r) + "px",
top: (cy-r) + "px"})
for (var i=0; i < num; i++) {
var s = $("<span>").html( phrase.charAt(i)).appendTo(d)
a = i/num *2*Math.PI
var x = cx + r*Math.cos(a)
var y = cy + r*Math.sin(a)
$(s).css({"position":"absolute",
left: x + "px", top: y + "px",
"fontSize": fontSize, "transform":"rotate(" + a + "rad)" })
console.log(z.charAt(i) + " " + x + "," + y)
}
}
voir http://jsfiddle.net/alemarch/42o8hqb7 / http://jsfiddle.net/alemarch/42o8hqb7/1 / http://jsfiddle.net/alemarch/42o8hqb7/2 / http://jsfiddle.net/alemarch/42o8hqb7/3 /
la réponse la plus pertinente que j'ai trouvée peut être trouvée ici:
il est plus facile d'utiliser cette méthode et puis juste cacher le débordement / utiliser le texte qui s'adapte plutôt que de déborder.
forme découpée (triangle) de div et montrer le fond derrière