Tel's Code Breakdowns

[telrean]

These are a few text tricks I use frequently, along with ways in which I've used them. Please note, however, that these breakdowns are provided as is and are intended to show you how to build up code effects and as such I am under no obligations to explain the quirks of my coding. Such questions may be answered if you catch me in the Cbox or via pm, depending on my mood.

Just a little trick that works wonders in removing dead space, which is something of a personal annoyance....

[div style="width: 400px; font: normal 11/10px kartika;"]Just a little trick that works wonders in removing dead space, which is something of a personal annoyance....[/div]

Pretty much the same code, only without the /10 so you can see the difference.

Closing the gap
♢ Between lines

[div style="font: normal 11/1px kartika; text-transform: uppercase; line-height:75%;"]Closing the gap
♢      Between lines[/div]
You can use px or the percentage to control the above effect, but the percentage requires less guesswork.

Changing the spacing of a font to seemingly create a new one and no I don't understand why the text-align is needed, but it doesn't work correctly without it.

[div style="width: 400px; font: normal 11px kartika; letter-spacing: -1px; text-align: color: #960018; text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87;"]Changing the spacing of a font to seemingly create a new one and no I don't understand why the text-align is needed, but it doesn't work correctly without it.[/div]

Without the text-align

Of course hand in hand with letter-spacing is word-spacing....

[div style="width: 400px; font: normal 11px kartika; letter-spacing: -1px; word-spacing: -3px; text-align: color: #960018; text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87;"]Of course hand in hand with letter-spacing is word-spacing....[/div]

Just for the fun of it here's a bit of text with all of the above tricks utilised, just to show the kind of uses you can get by mixing those codes with others.

[telrean]

These are a couple of the more advanced tricks I use.

[attr="class","grow"]Expanding Header


So here we have the expanding I utilised to create the tracker, which is actually easier than it looks. This version can be broken into three parts which are the header, expansion and content.

[newclass=.grow]transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s; overflow: hidden;height: 50px; width: 400px; background-color: #f1f1f1; color: #808080; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5;[/newclass][newclass=.grow:hover]height: 120px; transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; -o-transition: 0.7s; opacity: 0.8;-moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; color: #808080; text-align: center; font-family: kartika; font-size: 13px;-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: #F3A204; color: #f1f1f1;[/newclass]

[attr="class","H2"]First we have the header & it's hover effect, which is just using the :hover effect class to change colours.

[newclass=.H2]-moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; width: 400px; background-color: #f1f1f1; color: #808080; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;[/newclass][newclass=.H2:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: #F3A204; color: #f1f1f1;[/newclass]
{div}{attr="class","header"}First we have the header & it's hover effect, which is just using the :hover effect class to change colours.{/div}
{newclass=.header}-moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; width: 400px; background-color: f1f1f1; color: #808080; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;{/newclass}{newclass=.header:hover}-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: #F3A204; color: #f1f1f1;{/newclass}

[attr="class","plus"]Next up we have the expansion trick (move your mouse over this line)
Which is again easier than it looks.

[newclass=.plus]height: 16px; overflow: hidden; opacity: 0.6; transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s;[/newclass][newclass=.plus:hover]height: 32px; opacity: 0.8; transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; -o-transition: 0.7s;[/newclass]
{div}{attr="class","header"}First we have the header & it's hover effect, which is just using the :hover effect class to change colours.{/div}
{newclass=.header}-moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; width: 400px; background-color: f1f1f1; color: #808080; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;{/newclass}{newclass=.header:hover}-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: #F3A204; color: #f1f1f1;{/newclass}{div}{attr="class","grow1"}Next up we have the expansion trick (move your mouse over this line)
Which is again easier than it looks.{/div}
{newclass=.grow1}height: 16px; overflow: hidden; opacity: 0.6; transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s;{/newclass}{newclass=.grow1:hover}height: 32px; opacity: 0.8; transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; -o-transition: 0.7s;{/newclass}