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.
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3734&stc=1&d=1296810335

i want to make my text display like this, but not image:
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3735&stc=1&d=1296810380

or

http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3736&stc=1&d=1296810404

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,:p
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?:cool:

[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/dynamicindex13/circletext.htm

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

[davelf]

Thank a lot for your advice nile and djr

@nile, this is my plan why i need that curve script on my font:
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3772&stc=1&d=1298371859

That's the game design, if i can make curve on the font.
So when the user hover at one button, it will rotate the wheel, bring it to the front and when the user click, it will change the background color and trigerring another multiple choice.

The problem is there's a lot of combination that i design for this game, it's about 1000 choice / button. So it's not possible to use 1000 button for my website.

Any crazy idea? haha.

[djr33]

You need to at least think about using flash for that kind of thing.

[davelf]

ya about flash, i already assign one of my team to make that with flash.
But still if you or the other senior here have any thought or idea, please don't hesitate to tell me, hehe.
so may be i can use it on another project.

Thank you for your recommendation.

[davelf]

hi djr, after a few days searching, haha.
i found this Jquery SVG:
http://keith-wood.name/svg.html

have you ever heard of that?? Jquery SVG?? Vector?
This's seems complicated but there's a hope, haha.

[davelf]

sorry cyberdesignz, this is totally not about CSS.
This's talk about Scalable Vector Graphics with JS.:)