CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rob
Rob

Reputation: 953

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

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.

Curved Text css3

Upvotes: 4

Views: 1232

Answers (3)

Lie Ryan
Lie Ryan

Reputation: 64913

If you don't care about browser support, i.e. 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.

Upvotes: 1

Tyler
Tyler

Reputation: 11499

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/

Upvotes: 6

guest271314
guest271314

Reputation: 1

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>

Upvotes: 0

Related Questions