Css verwischeffekt mit Schatten Tutorial - Kostenlose Homepage Tools für deine Homepage auf ntmb.de

Css verwischeffekt mit Schatten

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

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. :-)