Is there a way to curve / arc / bend only the bottom or top of text using CSS3

Question

I'm looking to see if it's possible to make the following effect with purely css / jquery. I already know how to bend text in a circle, but that bends the entire element and I can't figure out how to just bend the bottom portion of the text to a circle. I guess I'm looking more to distort the text but I don't know how to best ask the question..

The purpose is to allow for elements such as these to be used as animated live text across banners.

I'd appreciate any help you guys can be. Fiddle's would be greatly appreciated.

Answer 1

Nope! CSS can't actually warp text like that.

You could conceivably use different sizes for each letter and then have them aligned at the top, but that's not quite the same thing, and it wouldn't be dynamic.

Edit

markE proposed a canvas-based solution that is potentially useful to you. It's not really a CSS solution as you asked for, but perhaps the JS manipulation will get what you want: http://jsfiddle.net/AbdiasSoftware/e8hZy/

Answer 2

If you don't care about browser support, ie if this only need to work in modern browser, then you may be able to do this by using SVG.

First, you'll need to create the curved text in SVG . Then you SMIL animate the individual SVG element or CSS animate the individual SVG element .

Answer 3

 div i { font-family: sans; position: relative; } div i:nth-child(1) { font-size:.75em; top:-10px; } div i:nth-child(2) { font-size:1.25em; top:-8px; } div i:nth-child(3) { font-size:1.75em; } div i:nth-child(4) { font-size:2.25em; top: 6px; } div i:nth-child(5) { font-size:1.75em; } div i:nth-child(6) { font-size:1.25em; top: -6px; } div i:nth-child(7) { font-size:.75em; top: -10px; } 

 <div><i>E</i><i>s</i><i>t.</i><i>1</i><i>9</i><i>7</i><i>0</i></div> 

---

 div i { font-family: sans; } div i:nth-child(1) { font-size:.75em; } div i:nth-child(2) { font-size:1.25em; } div i:nth-child(3) { font-size:1.75em; } div i:nth-child(4) { font-size:2.25em; } div i:nth-child(5) { font-size:1.75em; } div i:nth-child(6) { font-size:1.25em; } div i:nth-child(7) { font-size:.75em; } 

 <div><i>E</i><i>s</i><i>t.</i><i>1</i><i>9</i><i>7</i><i>0</i></div>