[CSS] Filter

      [CSS] Filter

      so
      nachdem ich Nobodys Thread mit Mouseover gelesen habe, hab ich mich dazu entschlossen dieses Tut zu schreiben,
      ich hab ja auf Nobodys Frage geantwotret dass es auch eine Methode mit CSS gibt ein bild zu verändern.
      Das sind die Filter:

      Es gibt verschiedene Filter in css ich stell aber heute erstmal 2 vor (einen Text und einen Grafik Filter) die anderen kann man ja noch ergänzen:

      1.) Text

      Ich hab den filter glow ausgewählt.
      Damit bringt man einen Satz oder ein Wort zum glühen.

      PHP-Quellcode

      1. <div style="color:blue;
      2. filter:Glow(color=#000000, strength=12)">Text</div>


      Mit Style=" style " wird immer ein Style definiert, dieser STyle bezieht sich dann auf alles zwischen <div> und </div>
      Dem Text wird gesagt, dass er Blau ist (color: blue;)
      und dann wird der Filter Glow angewandt.
      In den Klammern steht, dass der Glühende Rand schwarz ist.
      Und der Rand die Stärke 12 hat.
      Je höher die Zahl ist, desto dicker der Rand.


      2.) Bild

      hier hab ich mich für einen Schwarz weiß filter entschieden ich benutz den selber auf die-ferienprofis.de
      Der filter heißt Gray()

      PHP-Quellcode

      1. <img src="bild.jpg" class="sw">


      Hier schreibe ich den Filter nicht mit style="", sondern rufe eine vordefinierte Klasse auf.
      Die Klasse muss im head zwischen

      PHP-Quellcode

      1. <style stype="text/css">
      2. <!--

      und

      PHP-Quellcode

      1. -->
      2. </style>



      definiert werden.

      Und lautet bei mir:

      PHP-Quellcode

      1. <style stype="text/css">
      2. <!--
      3. .sw
      4. {
      5. filter:Gray()
      6. }
      7. -->
      8. </style>


      das .sw bedeutet, dass eine Klasse erstellt wird die den Namen sw hat.
      . steht für Klasse.

      Nun zum Mouseover

      Um einen Mousover effekt zu erziehlen muss man die Klasse noch etwas erweitern:

      PHP-Quellcode

      1. <style stype="text/css">
      2. <!--
      3. .sw a:hover
      4. {
      5. filter:Gray()
      6. }
      7. -->
      8. </style>



      ich habe hier das a:hover ergänzt.
      Das bedeutet, dass das, was zwischen { und } steht, dann ausgeführt werden soll wenn man mit der maus über einem Link ist der sich auf diese Klasse bezieht.

      Um das zu erreichen müssen wir aber auch unseren Bild Tag noch etwas abändern, wir müssen ihn nämlich um einen Link erweitern:

      PHP-Quellcode

      1. <a href="#"> <img src="bild.jpg" class="sw"> </a>


      wenn nun jemand mit der maus über das Bild geht, ist der Link aktiv und der Filter wird eingesetz, das Bild wird also Schwarz-Weiß angezeigt.
      Wenn jemand auf das Bild klickt passiert garnichts weil ja href="#" ist.


      Ich hoffe ihr habt alles verstanden, Fragen könnt ihr, wie immer gerne posten :)
      Mein Blog
      Facebook
      Twitter

      Ich freue mich immer über Nachrichten. Falls ihr über einen Facebookaccount verfügt, ist ratsamer mich darüber zu kontaktieren, weil ich diese Nachrichten i.d.R. schneller beantworte.
      ich find die filter zwar schön - aber ich halt ehrlich gesagt net viel von ihnen
      außer dem ie kann sie kaum ein browser richtig anzeigen ;(

      gib übrigens noch weitere - kann ich dir zukommen lassen wenn du willst ;)
      Write this on my gravestone, write this right on my grave, "To whisky and women, here lies a poor slave".



      Computer- und Mediensicherheit - FH Hagenberg
      Hagenberger Kreis zur Förderung der digitalen Sicherheit
      Security Forum