Drifting links/text

[Incompetent Egoist]

How do I get the drifting to the right effect and sorta separating at the same time effect? Can someone give me the code?

[Incompetent Egoist]

bump

[Former Member]

Can you please give an example? That description is rather vague. Sorta to the right and sorta drifting apart? Do you mean

like this?

[Incompetent Egoist]

Yes, thank you.

[Former Member]

Just in case you didn't quote that to grab the styling, it's

[div style="float: RIGHT;letter-spacing: 6px;"]TEXT HERE[/div]

Note that you can change RIGHT to LEFT if you want it on the other side and you can change the number before the PX in Letter-Spacing to get a different gap width between letters. The higher the number, the larger the gap, obviously smaller is narrower.

If you're not putting it in a post--for example, if you're putting it into a Sidetable, Plugin, Layout Template, whatever--then it's the exact same thing but change the [] brackets into <> brackets. =)

Hope that helped!

[Incompetent Egoist]

I was really thinking of a mouseover, actually.

[Former Member]

Ah, ohkay. Is this going to be located in a sidetable or where? First, go to Admin > Themes > Advanced Styles & CSS > Style Sheet. Scroll to the very, very bottom of this and make a new line.

Add the following code:

/* drifting text mouseover */
.driftingtext {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
AND WHATEVER CSS YOU WANT WITHOUT MOUSEOVER
}

.driftingtext:hover {
letter-spacing: 6px;
float: right;
AND ANY OTHER CSS YOU WANT ON MOUSEOVER
}

Remove the sentences in all-caps, those are just letting you know where you can put your CSS. In the first one, that's what it looks like before you put your cursor over it. You can put things like padding, font size, color, background colors, borders, etc. If there's anything specifically you want, just let me know. In the second one, that's what it looks like when you mouse over the text. I added the drifting and separating effect but, again, if you want something added, let me know. The "transition" codes you see in the first set there will make the effect "fade in" instead of abruptly appearing.

Then, to apply these, surround the text you want with <div class="driftingtext">TEXT</div>.

Let me know if you have any questions

[Incompetent Egoist]

Thank you!

[Former Member]

No problem!