Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Text Directions

  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text Directions

    This is a very general question (by this I mean that the answer doesn't have to fit like a glove):

    Once, on WebFX or JSFx (I can't remember which), I saw a
    string of text--not an image--that otherwise was just that,
    except for the fact that it was positioned lenghtwise (think 90
    degree rotation).

    Needless to say, this shocked me, but it also got me thinking:
    What if this could be done with images and scrolling text? What
    if you could rotate it at angles under 90 degrees?
    (Sounds interesting--Redundant yes--but nonetheless, interesting).

    Which brings around my question:
    How was it done?

    I checked the source code, but there wasn't anything
    unusual, because I don't actually remember a link to a
    Stylesheet, and the text was highlightable......

    Thanks,
    Guardian23

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    <div style="position:absolute;height:20px;width:20px;left:0;top:0">T</div>
    <div style="position:absolute;height:20px;width:20px;left:0;top:25">E</div>
    <div style="position:absolute;height:20px;width:20px;left:0;top:50">X</div>
    <div style="position:absolute;height:20px;width:20px;left:0;top:75">T</div>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, it's close, but the text actually is rotated.

    Guardian23
    PS.
    If (possible)
    {flip screen sideways}
    else
    {rotate head}
    I meant that to be humorous *frowns*


    as such:

    "---"
    from==>into
    |
    |
    |
    Last edited by Guardian23; 08-06-2002 at 10:57 AM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    of course, i just put up an example, you could change (programmatically) the top and left properties to any coordinates
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This effect is done at WebFX. They used IE-only filters to accomplish the efffect. Here is the code segment from their CSS file:

    Code:
    #webfx-about {
    	position:		absolute;
    	background:		white;
    	top:			102px;
    	right:			10px;
    	width:			20px;
    	writing-mode:	tb-rl;
    	filter:			flipH() flipV() alpha(opacity=50);
    }
    There is no copyright notice on their page I can find, but I suggest you add it to your stylesheet regardless.

    Hope that helps!

    Happy coding!

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I must of overlooked it!

    Thanks,
    Guardian

    PS: I'll be sure to add a note that it came from WebFx until I
    figure out the exact principle and figure out how to do it myself,
    at which point I'll merely add a reference to it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •