Tutorials

Css verwischeffekt mit Schatten Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Css verwischeffekt mit Schatten


2520 - Sniper - 21.07.2006 20:06 Uhr - Version: 1 - - verlinken als BB-Code


Hierbei wird auf den Shadow Filter zurückgegriffen. Dieser macht den beliebig farbigen Schatten möglich. Mit folgender CSS Anweisung können Sie ihre Links mit einem solchem Effekt ausstatten.

1
2
3
4
5
6
7
8
<style type="text/css">
a:link {color:darkblue; text-decoration:none}
a:visited {color:darkblue; text-decoration:none}
a:active {color:darkblue; text-decoration:none}
a:hover {color:darkblue; text-decoration:none; width:100%;
filter:Shadow(color=#cccccc, direction=135)}
filter:Blur() (direction=130, strength=100)}
</style>


Der folgende CSS Codeteil definiert den Schattenfilter und Verwischeffekt.

1
filter:Shadow(color=#cccccc, direction=135)}

1
filter:Blur() (direction=130, strength=100)}


Mit "color" wird die Farbe des Schattens angegeben, mit direction die Richtung, in welcher der Schatten erscheinen soll.

Es gibt nur einige gültige Richtungsangaben. Bei direction = 0, geht der Verwischeffekt nach oben. Bei direction = 45 geht die Spur nach oben rechts, bei direction = 90 zeigt die Spur komplett nach rechts. Wie Sie sehen sind es immer 45iger Schritte, bis 315 können diese fortgeführt werden.

Die Links sollten Sie, wenn Sie einen solchen Effekt verwenden, in eine Ebene einpacken, damit der Inhalt aufgrund des verschmierens nicht hin-, und hergeschoben wird.


©2006 by www.snipers-page.de

Mitglieder-Kommentare


#3 von speedskankl
irgendwie funktioniert das bei mir nicht. ist das auf irgendwelche browser beschränkt?? oder funktioniert das nur bei links?
#2 von Sniper
Naja sorry :P Das sollte net sein^^

Liebe Grüße
Sniper

Bei Fragen oder Probleme PM me oder schreib in das Forum
#1 von skater
schönes tutorial, gut erklärt n1 Smily NR:2
du hast nur den gleichen fehler wie in meinem tutorial gemacht und bei blur die ´zwei überflüssigen klammern gelassen.

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)