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

Question

I am looking to see if the following effect can be done with purely css / jquery. I already know how to bend text in a circle, but this bends the entire element, and I cannot figure out how easy it is to bend the bottom of the text into a circle. I guess I distort the text more, but I don’t know how best to ask a question.

The goal is to use elements such as animated live text in banners.

I would appreciate any help you guys can be. Fiddle would be very grateful.

Answer 1

, .. , SVG.

SVG. SMIL SVG CSS SVG.

Answer 2

! CSS .

, , , .

Edit

markE , , . CSS , , , JS , : http://jsfiddle.net/AbdiasSoftware/e8hZy/

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>

Run code

---

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>

Run code