3

I want to know how to draw a text like this style ( curved) using only CSS please help me enter image description here

Nose Programmer
  • 115
  • 1
  • 2
  • 11
  • You would set `transform: rotate(…) translateY(…);` very specifically for each letter. I’d recommend making an SVG instead and embedding it as an image as usual, though. (Or, if you were really going to make it look like that style… consider just not doing it. There are more readable header styles to choose from.) – Ry- Apr 05 '14 at 17:25
  • possible duplicate of [Is there a way to curve / arc text using CSS3 / Canvas](http://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas) – bjb568 Apr 05 '14 at 17:46
  • I already read the the answer but for me I must only use CSS – Nose Programmer Apr 05 '14 at 17:54

1 Answers1

7

It isn't super straightforward, but I suppose it could be done. Take a look at this article: Set Text on a Circle. Not the exact same thing, but same idea. You'd need to do it per character or section of words to do it.

A potentially easier solution would be to use Javascript/jQuery. But I know this doesn't meet your CSS only requirement. Consider looking at ArcText.js as an option if you feel CSS isn't doable for you.

There is also a tool that does this for you: CSS Warp - CSS Text to Path Generator. This would match exactly what you want, and generate the code for you for various browsers. I've never used it before, but seems nearly fool-proof.

Here is an example using CSS Warp. I spent about 5 minutes. It gets you pretty close to what you want, and you can polish it up more. Then just use CSS to add the rest of the styling. CSS Warp

EnigmaRM
  • 7,523
  • 11
  • 46
  • 72