Das neue Stile in CSS3 eingeführt gab Webprofis die Möglichkeit, ihren Seiten Photoshop-ähnliche Effekte hinzuzufügen. Ein visueller Effekt, den Sie hinzufügen können mit CSS3 besteht darin, Webseiten interaktiv zu gestalten, indem ausgeblendete Bereiche erstellt werden, die in den Fokus treten, wenn ein Site-Besucher etwas tut, wie beispielsweise den Mauszeiger über dieses Element. Dieser Effekt verwendet eine Kombination aus Opazität und Übergang.
Deckkraft bei Hover ändern
Ein interaktives Element besteht darin, die Deckkraft eines Bildes zu ändern, wenn ein Kunde mit der Maus über dieses Element fährt. Für dieses Beispiel (der HTML-Code wird unten gezeigt) verwenden wir ein Bild mit dem Klassenattribut von ausgegraut.
Um es ausgegraut zu machen, fügen Sie Ihrem CSS-Stylesheet die folgenden Stilregeln hinzu:
.greyout {
-Webkit-Opazität: 0,25;
-moz-Opazität: 0,25;
Opazität: 0,25;
}
Diese Deckkrafteinstellungen entsprechen 25 Prozent. Dies bedeutet, dass das Bild mit 1/4 seiner normalen Transparenz angezeigt wird. Vollständig undurchsichtig ohne Transparenz wäre 100 Prozent, während 0 Prozent vollständig transparent wäre.
Um das Bild klar zu machen (oder genauer gesagt, vollständig undurchsichtig zu werden), wenn die Maus darüber fährt, würden Sie Folgendes hinzufügen:
.greydout: schweben {
-webkit-opazität: 1;
-moz-Opazität: 1;
Opazität: 1;
}
Weitere Deckkraftanpassungen
Sie werden feststellen, dass wir für diese Beispiele die Versionen der Regel mit dem Herstellerpräfix verwenden, um die Abwärtskompatibilität für ältere Versionen dieser Browser sicherzustellen. Dies ist zwar eine gute Praxis, die Deckkraftregel wird von Browsern gut unterstützt, und es ist sicher, diese Zeilen mit Anbieter-Präfix zu löschen.
Es gibt jedoch keinen Grund, diese Präfixe nicht hinzuzufügen, wenn Sie die Unterstützung für ältere Browserversionen sicherstellen möchten. Achten Sie nur darauf, dass Sie die akzeptierte Best Practice befolgen, die Deklaration mit der normalen Version des Stils ohne Präfix zu beenden.
Bei der Bereitstellung auf einer Site ist diese Anpassung der Deckkraft eine abrupte Änderung. Zuerst ist es grau und dann nicht, ohne Zwischenzustände zwischen diesen beiden. Es ist wie ein Lichtschalter – an oder aus. Dies kann das sein, was Sie wollen, aber Sie können auch mit einer allmählicheren Änderung experimentieren.
Um einen schönen Effekt hinzuzufügen und dieses allmählich verblassen zu lassen, fügen Sie die Überleitung Eigentum:
.greyout
Klasse:.greydout {
-Webkit-Opazität: 0,25;
-moz-Opazität: 0,25;
Opazität: 0,25;
-Webkit-Übergang: alle 3er Leichtigkeit;
-moz-Übergang: alle 3er Leichtigkeit;
-ms-Übergang: alle 3s Leichtigkeit;
-o-Übergang: alle 3s Leichtigkeit;
Übergang: alle 3er Leichtigkeit;
}