text effect transform

[davelf]

Hi, is it possible to make a text effect transform like we do in photoshop or power point.

Usually we display text in website like this one:
just flat, no style or curve.


i want to make my text display like this, but not image:


or



Just tell me your idea,
Thank in advanced

[djr33]

I don't believe there is a way to do that using CSS. You could use CSS and Javascript and/or PHP to generate the text in a complex way so that each letter was offset slightly. This would generate a lot of code (a <p> or <span> for each letter) and it won't not rotate the letters like that, but you could create a curved line on which the text appears to sit.

You could also use Flash.

[davelf]

hehe,
i'm avoiding flash, because i hope this text can run in iphone too.
hmm, so there's no other way to do this even with jquery.
How about HTML5?

[djr33]

The only possibility would be something like a canvas element where you can "draw", but I don't know if even that would do it. And in that case, you might as well use an image.

[davelf]

i hope there's someone here that have a crazy idea like mine, haha. I think like djr said, my last choice is flash / image...

[Nile]

Yes, I agree with djr33. You could use canvas but that would be just as good as using an image except for the fact that you could change the text.

If you did want to do this in CSS, though, you would need to use CSS3. Search google for "CSS Rotate"

[djr33]

The problem is that even with CSS3 (or browser-specific CSS properties) you would need to rotate every letter individually. If you just want diagonal text, that's much easier. But from everything I found (I did a quick search when answering earlier), it would mean splitting the letters and rotating individually to get anything resembling that.

[Nile]

Yeah, mite we(or just I) ask: what do you need this for?

[djr33]

And by the way, it's possible (but very difficult) to generate an image like that using any text you'd like using PHP's GD image function library. It might help if you need to do a lot of those graphics, but it will be slow if you do that every time the page loads. If you must have a solution to this and can't use flash, that's one way to approach it. It would be an image, but not just a static image.

[djr33]

Here's a script that looks similar to what you want. Remove the animation, and it might be very close:
http://www.dynamicdrive.com/dynamici...circletext.htm

It's basically the same as what I described by displaying every letter independently.