Filter

1. Inledning

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.

2. Glöd/Glow

Glöd
Koden till ovanstående:

<style type="text/css">

<!--
.box {
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>

3. 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>

4. Droppskugga/Drop shadow

Droppskugga
Koden till ovanstående:

<style type="text/css">

<!--
.box {
font-size: 35px;
color: #004080;
filter: DropShadow(Color=cccccc, OffX=6, OffY=6, Positive=1);
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>

5. Suddigt/Blur

Suddigt
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

<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>

6. Flipp/Flip

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>

7. Toning/Alpha

Toning
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>

8. Vågor/Wave

Vågor
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>