Texteffekte für alle Browser

Nach dem ich bereits auf den text-shadow beim Firefox und anderen Nicht-Microsoft-Browsern sowie auf die Filter-Einstellungen beim Internet-Explorer eingegangen bin hier eine Zusammenfassung, die darauf ausgerichtet ist, möglichst ähnliche Effekte zu erzielen.

Vorbemerkung zum CSS-Teil

Der CSS-Teil besteht aus drei Bereichen

Allgemeiner Bereich für alle Browser

<!--Allgemein-->
<style type="text/css">
/* hier können Anweisungen stehen, die fuer alle Browser gelten
sollen, z.B. zur Schriftart */
</style>

Bereich für Firefox und andere Browser, die nicht Internet-Exlporer sind

<!--[if !IE]>
<style type="text/css">
/* hier die einzelnen Anweisungen für FF & Co*/
</style>
<![endif]-->

Bereich Internet-Exlporer

<!--[if IE]>
<style type="text/css">
/* hier die einzelnen Anweisungen für IE*/
</style>
<![endif]-->

Beispiele

Unter den angezeigten Beispielen steht jeweils der CSS-Code, und zwar zusammengefasst für IE und Firefox (und übrige Bowser)

Dropshadow

.dropshadow {
text-shadow: #ff0000 2px 2px 0px;
}
.dropshadow{
filter:dropshadow(color:#ff0000, offx=2, offy=2);
}

Shadow

.shadow {
text-shadow: #ff0000 1px 1px 5px, #dd0000 3px 3px, #aa0000 5px 5px;
}
.shadow{
filter:shadow(color:#ff0000, direction=135);
}

Glow

.glow {
text-shadow: #ff0000 1px 1px 2px, #ff0000 -1px 1px 2px, #ff0000 1px -1px 2px, #ff0000 -1px -1px 2px;
}
.glow{
filter:glow(color: #ff0000, strength: 2);
}

Shadow Glow

.shadowglow {
text-shadow: #aa0000 3px 3px 1px, #ff0000 -2px 2px 2px, #ff0000 2px -2px 2px, #ff0000 -1px -1px 2px;
}
.shadowglow{
filter:shadow(color:#ff0000, direction=135)
glow(color: #ff0000, strength: 4);
}

Dropshadow Glow

.dropshadowglow {
text-shadow: #ff0000 3px 3px 2px, #ff0000 -2px 2px 2px, #ff0000 2px -2px 2px, #ff0000 -1px -1px 2px;
}
.dropshadowglow{
filter:glow(color: #ff0000, strength: 4)
dropshadow(color:#ff0000, offx=2, offy=2);
}