CSS3-Filter (Filter) zum Erreichen des Beispielcodes für den Grau- oder Schwarzmodus einer Webseite

Frontend

css3.filter kann nicht nur den Graueffekt von Webseiten erzielen, sondern hilft auch dabei, den Nachtmodus-Effekt zu erzielen. Mal sehen, wie es umgesetzt wird!

Einführung in Filtereigenschaften

Filter: keine | Unschärfe() | Helligkeit() | Kontrast() | Schlagschatten() | Graustufen() | Farbton-Drehung() | Invertieren() | Deckkraft() | Sättigung() | Sepia() | URL();

Tipp: Verwenden Sie Leerzeichen, um mehrere Filter zu trennen.

Grauer Effekt auf der Website

Dieser Effekte-Blog wurde ursprünglich erstellt, als ich die häufig verwendeten CSS-Effekte zusammenfasste.

Dies lässt sich ganz einfach mit dem folgenden Code erreichen!

Der Code lautet wie folgt:

html {
   Filter: Graustufen (100 %); //IE-Browser-WebKit-Filter: Graustufen (100 %); //Google-Browser-Moz-Filter: Graustufen (100 %); //Firefox-MS-Filter: Graustufen (100 %);
  -o-Filter: Graustufen (100 %);
  Filter:progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
  -webkit-filter: Graustufen(1); // Google Chrome}

Im Vergleich zum Graueffekt ist der Nachtmodus etwas schwieriger zu erreichen!

Beurteilung des Nachtmodus

Wenn es sich um reines Web handelt, können Sie in modernen Browsern die Abfrageanweisung „prefers-color-scheme“ verwenden.

Die Syntax lautet wie folgt:

keine Präferenz. Das System informiert den Benutzer nicht über das zu verwendende Farbschema.
Licht zeigt an, dass das System ein helles Design bevorzugt.
„dunkel“ bedeutet, dass das System ein dunkles Design bevorzugt.

Zum Beispiel:

/* Dunkler Modus */
@media (bevorzugtes Farbschema: dunkel) {
    Körper { Hintergrund: #333; Farbe: weiß; }
}
/* Lichtmodus */
@media (bevorzugtes Farbschema: hell) {
    Körper { Hintergrund: weiß; Farbe: #333; }
}

Wenn Sie das dunkle oder helle Design des Systems im JavaScript-Code bestimmen müssen, können Sie beispielsweise die native Methode window.matchMedia() verwenden:

// Ob der Dunkelmodus unterstützt werden soll // Gibt „true“ oder „false“ zurück
window.matchMedia("(bevorzugtes Farbschema: dunkel)").matches;

Nachtmodus-Code

html {
    Filter: invertieren(1) Farbton-Drehung(.5turn);
}

Danach wird das Bild umgekehrt, was sehr hässlich ist.

img {
    Filter: invertieren(1) Farbton-Drehung(.5turn);
}

Fügen Sie dem Bild eine weitere Ebene hinzu, und es wird richtig herum sein, so dass das reine Bild in Ordnung ist

Daher kann die Kombination wie folgt eingerichtet werden:

html, img {
    Filter: invertieren(1) Farbton-Drehung(.5turn);
}
img {
    Deckkraft: 0,75;    
}

Es gibt jedoch ein Problem mit dem Hintergrundbild und dem schwarzen Schatten. Für das Hintergrundbild können Sie es wie folgt einstellen:

@media (bevorzugtes Farbschema: dunkel) {
    html, img { 
        Filter: invertieren(1) Farbton-Drehung(180 Grad);
    }
   .bgfilter{
    Filter: invertieren(1) Farbton-Drehung(180 Grad);
  }
    .einige-ele-box {
        Kastenschatten: keiner;
    }
}

Frage

Die obigen Einstellungen gelten nur für helle Hintergründe und funktionieren nicht, wenn kein Hintergrund vorhanden ist oder es sich um transparente Hintergründe handelt.

Darüber hinaus ist für jeden Stil eine spezielle Verarbeitung erforderlich. So lässt sich beispielsweise der Filter als globale Variable nutzen, um ihn optimal an den Nachtmodus anzupassen. Zum Beispiel:

@media (bevorzugtes Farbschema: dunkel) {
    html {
        Filter: invertieren (1) Farbton drehen (180 Grad)
    }

    .dark-img,img {
        Filter: invertieren(1) Farbton drehen(180 Grad)
    }
   // Spezielle Verarbeitung für Hintergrundbilder // Spezielle Verarbeitung für globale Farben // background-color: var(--darkColor)
}

Damit ist dieser Artikel über die Verwendung von CSS3-Filtern zum Erstellen eines Grau- oder Schwarzmodus auf einer Webseite abgeschlossen. Weitere Informationen zu CSS3-Filtern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!