Filter och CSS.

Detta avsnitt kallas filter och fokuserar på vad man kan åstadkomma för filter-effekter på texten. Jag ger först ett exempel på filter-effekten och sedan vilken kod som krävs för att uppnå respektive effekt.

Glöd/Glow Glöd
Koden till ovanstående:
<style type=”text/css”>

<!–
{
font-family: Verdana, ’Times New Roman’, ’Sans-Serif’;
font-style: italic;
font-size: 10pt;
font-weight: bold;
color: #000000;
}
–>

</style>

Glöd
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
color: #ffffff;
filter: Glow(Color=ff6900, Strength=3);
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>

Skugga/Shadow Skugga
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
color: #ffffff;
filter: Glow(Color=ff6900, Strength=3);
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>

Droppskugga
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
color: #004080;
filter: DropShadow(Color=0099cc, OffX=4, OffY=4, Positive=0);
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>

Suddigt/Blur
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
font-weight: bold;
color: #004080;
filter: Blur(Add=1, Direction=130, Strength=8);
width: 300px;
height: 65px;
}
–>

</style>

Suddigt
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
font-weight: bold;
color: #004080;
filter: Blur(Add=1, Direction=0, Strength=13);
width: 300px;
height: 65px;
}
–>

</style>

Flipp/Flip
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 25px;
color: #004080;
filter: FlipV;
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>

Flip
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 25px;
color: #004080;
filter: FlipH;
width: 200px;
height: 65px;
font-weight: bold;
}
–>

</style>

Toning/Alpha
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
color: #004080;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50, StartY=50, FinishX=0, FinishY=100);
width: 300px;
height: 110px;
font-weight: bold;
}
–>

</style>

Toning
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
color: #004080;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=2);
width: 300px;
height: 100px;
font-weight: bold;
}
–>

</style>

Vågor/Wave
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
filter: Wave(Add=1, Freq=6, LightStrength=4, Phase=5, Strength=4);
color: #004080;
width: 300px;
height: 100px;
font-weight: bold;
}
–>

</style>

Vågor
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
filter: Wave(Add=0, Freq=6, LightStrength=3, Phase=7, Strength=4);
color: #004080;
width: 300px;
height: 100px;
font-weight: bold;
}
–>

</style>