Hey guys with the new updates of CSS we now, which some of you have heard, is CSS3. CSS3 has made life much simpler in the coding world. Many options to go through, so today I am going to list ways to make your text transition to many different styles. This is available for all forum versions and I will make a list of some of the most common selectors you can use!

  With the new CSS3 declarations such as transition and transform we can do a lot more than you ever thought that CSS would be capable of doing. The declarations are a little easy to do and just take a moment to learn.

  Since this is new we need to add the browser prefix which these are simple and I want to show you these first before I go into the actual coding.

 -moz- :this is moz for mozilla firefox
 -webkit- :this is webkit which is for smartphones, google chrome , and safari
 -o- :this is o for Opera browsers
 -ms- :this is ms for MicroSoft IE, this technically will not work until support is added to IE.


 Ok great now lets look at a few other things.

  We are going to show you the basics of adding the transition and how to change it back and forth. If we wanted to do a font color change with every link possible we would do this

Code:

a:link {
transition:1s;
-moz-transition:1s;
-o-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
}

That code above is so when we move our mouse out of the element it will slowly change back, if you wanted it to jump back you would not add that one piece and instead just do it for hover alone. 

Code:

a:hover{
transition:1s;
-moz-transition:1s;
-o-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
}

So those two codes above will make all your links transition from one style to the other with ease. We do this as a selector for all links, without any changes, if you just add this it wouldn't really do anything we have to add changes. We do this to save ourselves space in our sheet so then we will add changes to our links ok.

Code:

.mainmenu{
font-size:12px;
color:#000;
}
.mainmenu:hover{
font-size:13px;
color:#FF0000;
}

  These two above are for punBB navigational links, since we styled them like that, the transition will go from being a black color until we hover then it will slowly change to a red color and a little bit bigger font. 

Basically what we did was add a universal transition to all links, then we added the other style just to save our selves space, why? Because we always want to use our style sheets correctly and never want to fill it with useless things if we don't need to. 

  Another way to save ourselves space with doing this is if we don't want all links but say we want three selector links to work. We can do this.
[hc = See The Content]

Code:

.mainmenu , .nav , .otherlink {
transition:1s;
-moz-transition:1s;
-o-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
}
.mainmenu:hover , .nav:hover , .otherlink:hover {
transition:1s;
-moz-transition:1s;
-o-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
}


[/hc]

As you can see it is smaller than adding the transition to each of the three links above, it saves us space. Now to style these we can add three different colors, sizes, positions, and whatever else we want to do. Or we can chain them link the above as well. You always have to change the default style to get this nice effect. 

If anyone has any questions please go a head and ask. If anyone makes any valid questions I will add it to this post so new/other members can see it from the get go.


phpBB2 Editable Selectors:(These are just small list, if anyone has any more common selectors please feel free to add to them.)
[hc = See The List]
.gen
.genmed
.gensmall
.hierarchy
.row1
.row2
.row3
[/hc]

PunBB Editable Selectors:
[hc = See The List]
.mainmenu
.entry-contry
.main-head
.main-foot
.table
.nav
[/hc]

phpBB3 Editable Selectors:
[hc = See The List]

[/hc]

Invision Editable Selectors:
[hc = See The List]

[/hc]