Welche magischen Anwendungen haben CSS-Filter?

Hintergrund

Grundlegende Konzepte

CSS filter wendet grafische Effekte wie Unschärfe oder Farbverschiebung auf ein Element an, um einen Filter zu bilden. Filter werden häufig verwendet, um die Darstellung von Bildern, Hintergründen und Rahmen anzupassen. Sein Wert kann eine filter <filter-function> oder ein mithilfe url hinzugefügter SVG-Filter sein.

filter: <filter-funktion> [<filter-funktion>]* | keine
Filter: URL (Datei.svg#Filterelement-ID)

<filter-function> kann mit filter und backdrop-filter verwendet werden. Sein Datentyp wird durch eine der folgenden Filterfunktionen festgelegt. Jede Funktion erfordert einen Parameter. Wenn der Parameter ungültig ist, wird der Filter nicht wirksam. Nachfolgend eine Erläuterung zur Bedeutung der Filterfunktion:

• blur() : verwischt das Bild
• brightness() : Macht ein Bild heller oder dunkler
• contrast() : Erhöht oder verringert den Kontrast eines Bildes
• drop-shadow() : Wendet einen Schlagschatten hinter einem Bild an
• grayscale() : Wandelt ein Bild in Graustufen um
• hue-rotate() : Ändert den Gesamtfarbton eines Bildes
• invert() : Invertiert die Bildfarben
• opacity() : Die Transparenz eines Bildes ändern
• saturate() : Übersättigt oder entsättigt das Eingabebild
• sepia() : Wandelt das Bild in Sepia um

Anwendungsbeispiele

/* SVG-Filter verwenden */
Filter: URL("filters.svg#filter-id");
/* Filterfunktion verwenden */
Filter: Unschärfe (5px);
Filter: Helligkeit (0,4);
Filter: Kontrast (200 %);
Filter: Schlagschatten (16px 16px 20px blau);
Filter: Graustufen (50 %);
Filter: Farbton-Drehung (90 Grad);
Filter: invertieren (75 %);
Filter: Deckkraft (25 %);
Filter: sättigen (30 %);
Filter: Sepia (60 %);
/* Mehrere Filter */
Filter: Kontrast (175 %), Helligkeit (3 %);
/* Keinen Filter verwenden */
Filter: keiner;
/* Globale Variablen */
Filter: erben;
Filter: Initiale;
Filter: nicht gesetzt; 

Anwendungsfälle

Intelligentere Schatten

Wenn wir Elementen Schatten hinzufügen, verwenden wir im Allgemeinen die box-shadow Eigenschaft. Mit der box-shadow(x偏移, y偏移, 模糊大小, 陰影大小, 色值, inset) box-shadow hat jedoch auch einen Nachteil: Wenn wir transparenten Bildern Schatteneffekte hinzufügen, können sie nicht in die Elemente eindringen und nur dem Boxmodell transparenter Bildelemente hinzugefügt werden. Zu diesem Zeitpunkt kann die drop-shadow des filter dieses Problem sehr gut lösen. Der von ihr hinzugefügte Schatten kann das Element durchdringen, anstatt dem Rahmen des Boxmodells des Elements hinzugefügt zu werden.

Der durch drop-shadow hinzugefügte Schatten kann nicht nur transparente Elemente durchdringen, sondern hat auch den gleichen Schatteneffekt wie box-shadow . Wenn der Browser Hardwarebeschleunigung unterstützt, ist der durch die Verwendung filter hinzugefügte Schatteneffekt realistischer.

Die Syntax drop-shadow lautet wie folgt (sie ist exakt die gleiche wie für box-shadow außer dass sie das Setzen inset nicht unterstützt):

Filter: Schlagschatten (X-Versatz, Y-Versatz, Unschärfegröße, Farbwert);

wie:

Filter: Schlagschatten (1px 1px 15px rgba(0, 0, 0, .5));

Die folgende Abbildung vergleicht die Verwendung von box-shadow und filter: drop-shadow um transparenten Elementen Schatten hinzuzufügen:

<img class="box-shadow" src="futurama.jpg" />
<img Klasse="Schlagschatten" src="futurama.jpg" />

.box-shadow {
  Kastenschatten: 1px 1px 15px rgba (0, 0, 0, .5);
}
.Schlagschatten {
  Filter: Schlagschatten (1px 1px 15px rgba(0, 0, 0, .5));
}

Elemente und Webseiten ausgrauen

Bei einer größeren Katastrophe oder einem anderen Trauerereignis müssen auf den Websites staatlicher Unternehmen und Behörden häufig alle Seiten ausgegraut werden. Oder viele Webseiten verfügen über einen Style-Effekt, bei dem sich ein graues Element in ein farbiges Element verwandelt, wenn man mit der Maus hover . Zu diesem Zeitpunkt können Sie die grayscale des filter verwenden, mit der Sie die Graustufen des Elements anpassen können. Durch Festlegen filter: grayscale(100%) für das Seitenelement können Sie das Seitenelement ausgrauen. Im folgenden Beispiel gibt es unter body -Tag h1 und img -Tags, die vor dem Hinzufügen filter so aussehen.

<Text>
  <h1 Klasse="Titel">FUTURAMA</h1>
  <img class="img" width="500" src="./images/futurama.jpg" />
</body>

Jetzt fügen wir body Element eine .gray Klasse hinzu, und <body> kann der Graueffekt der gesamten Webseite erzielt werden.

.grau {
  Filter: Graustufen (100 %);
}

Um die Kompatibilität mit anderen Browsern niedrigerer Versionen wie IE8 zu gewährleisten, können wir Browserpräfixe und svg -Filter hinzufügen. 😤

.grau {
  -webkit-filter: Graustufen(1);
  -Webkit-Filter: Graustufen (100 %);
  -moz-filter: Graustufen (100 %);
  -ms-filter: Graustufen (100 %);
  -o-Filter: Graustufen (100 %);
  Filter: URL ("data:image/svg+xml;utf8, <svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'Graustufen\'><feColorMatrix Typ=\'Matrix\' Werte=\'0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0 0 0 0 0 1 0\'/></filter></svg>#Graustufen");
  Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
  Filter: Graustufen (100 %);
}

Wenn eine Webseite dringend ausgegraut werden muss, ist es oft notwendig, diese Funktion zu entfernen, nachdem sie eine Zeit lang online war. Wir können auch beim ersten Start die folgenden ähnlichen Methoden hinzufügen, um die automatische Online- und Offline-Zeit des Graueffekts zu steuern, sodass er automatisch entfernt werden kann, wenn die geplante Zeit erreicht ist, ohne den Erstellungsprozess zweimal durchlaufen zu müssen. 🤣

(Funktion setGray() {
  var endTime = Date.parse("6. April 2077 00:00:01");
  var Zeitstempel = Datum.parse(neues Datum());
  wenn (Zeitstempel <= Endzeit) {
    document.querySelector('html').classList.add('grau');
  }
})();

Elementbetonung, Hervorhebung

Mit brightness wird der Effekt erzielt, Elemente hervorzuheben. Sie kann auf die hover Effekte der Menüleiste und der Bildliste angewendet werden, um den Inhalt hervorzuheben, über dem aktuell mit der Maus schwebt oder der ausgewählt wird. Nachfolgend finden Sie zwei Methoden zum Hinzufügen von brightness und saturate zu einer Gruppe von Schaltflächenmenüleisten, um Elemente durch Ändern der Helligkeit und Sättigung hervorzuheben.

<div Klasse="Container">
  <a class="button">🍋</a>
  <a class="button">🍎</a>
  <a class="button">🍐</a>
  <a class="button dark">🥑</a>
  🍄
  🌽
  <a class="button deaktiviert">🍒</a>
  <a class="button deaktiviert">🍅</a>
  <a class="button deaktiviert">🥔</a>
</div>

.container {
  Rand: 40px;
}
.Taste {
  Polsterung: 0,5em 0,5em;
  Hintergrund: #E0E0E0;
  Rahmenradius: 3px;
}
.button.dunkel {
  Hintergrund: #333;
}
.button:hover:nicht(.deaktiviert) {
  Cursor: Zeiger;
  Rahmenradius: 3px;
  Filter: Helligkeit (110 %), Sättigung (140 %);
}
.button.deaktiviert {
  Filter: Graustufen (100 %);
}

Milchglaseffekt

Der Frosted glass ähnelt, wie der Name schon sagt, dem Effekt von durchscheinendem Milchglas. Er wird häufig in System UI wie iOS und Windows 10 verwendet. Die Verwendung des Milchglaseffekts kann das visuelle Erlebnis verbessern. Es gibt auch systematische Erklärungen in Büchern wie 《CSS揭秘》 . Hier ist meine Zusammenfassung, wie Sie diesen Effekt mit filter: blur bzw. backdrop-filter: blur erzielen.

Es gibt zwei div Elemente mit demselben Klassennamen glass , und ihnen werden zwei Klassen glass-by-filter und glass-by-backdrop-filter hinzugefügt, um die beiden Methoden zu unterscheiden.

<div Klasse = "Glas Glas-nach-Filter" </div>
<div Klasse = "Glas Glas-durch-Hintergrund-Filter"></div>

Allgemeiner Stil, Größeneinstellung, abgerundete Ecken und andere grundlegende Stile von Milchglaselementen:

.Glas {
  Höhe: 300px;
  Breite: 300px;
  Rand: 1px Rille #EFEFEF;
  Rahmenradius: 12px;
  Hintergrund: rgba(242, 242, 242, 0,5);
  Kastenschatten: 0 0,3px 0,7px rgba (0, 0, 0, 0,126),
    0 0,9px 1,7px rgba(0, 0, 0, 0,179), 0 1,8px 3,5px rgba(0, 0, 0, 0,224),
    0 3,7px 7,3px rgba(0, 0, 0, 0,277), 0 10px 20px rgba(0, 0, 0, 0,4);
}

filter: blur , fügt dem Element eine ::before -Pseudoklasse hinzu, um die blur festzulegen, und platziert sie in der untersten Ebene, um den Milchglaseffekt zu erzielen.

.Glas-nach-Filter {
  Z-Index: 1;
  Box-Größe: Rahmenbox;
  Position: relativ;
}
.glass-by-filter::vor {
  Inhalt: "";
  Position: absolut;
  oben: 0; rechts: 0; unten: 0; links: 0;
  z-Index: -1;
  Hintergrund: erben;
  Filter: Unschärfe (10px);
}

backdrop-filter: blur fügt dem Element direkt die blur hinzu, um den Milchglaseffekt zu erzielen.

.Glas-durch-Hintergrund-Filter {
  Hintergrundfilter: Unschärfe (10px);
}

Der Effekt ist in der folgenden Abbildung dargestellt (links: filter , rechts: backdrop-filter ):

Erweiterung lesen: Unscharfer Glasrandeffekt: https://css-tricks.com/blurred-borders-in-css

Künstlerisches Foto! Auch eine vereinfachte Version insatagram ist realisierbar

Retro, Druckgrafik, Ölmalerei, Comics, Verflüssigung, alte Fotos, minimalistischer Stil, Morandi, Cyberpunk und WandaVision sind alle realisierbar!

Durch die Kombination aller filter können Sie jeden gewünschten Effekt erzielen. Nachfolgend finden Sie einen einfachen filter , mit dem Sie den Wert jeder Methode anpassen und den Filtereffekt des Bildes in Echtzeit anzeigen können. Wie in der Abbildung unten gezeigt.

Der Hauptcode der Seite ist wie folgt. Der Kontrollbereich #imageEditor ist ein form . Jede Zeile des Formulars kontrolliert den Wert einer Filtermethode. Der Anzeigebereich #imageContainer enthält ein img Element und der generierte filter wirkt auf dieses Element.

<form id="imageEditor">
  <p>
    <label for="gs">Graustufen</label>
    <Eingabe-ID="gs" Name="gs" Typ="Bereich" min="0" max="100" Wert="0">
  </p>
  <p>
    <label for="blur">Unschärfe</label>
    <input id="Unschärfe" name="Unschärfe" type="Bereich" min="0" max="10" value="0">
  </p>
  <p>
    <label for="br">Belichtung</label>
    <input id="br" name="br" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="ct">Kontrast</label>
    <Eingabe-ID="ct" Name="ct" Typ="Bereich" min="0" max="200" Wert="100">
  </p>
  <p>
    <label for="huer">Farbton drehen</label>
    <input id="Huer" name="Huer" type="Bereich" min="0" max="360" value="0">
  </p>
  <p>
    <label for="opacity">Deckkraft</label>
    <Eingabe-ID="Deckkraft" Name="Deckkraft" Typ="Bereich" min="0" max="100" Wert="100">
  </p>
  <p>
    <label for="invert">Umkehren</label>
    <input id="invertieren" name="invertieren" type="Bereich" min="0" max="100" value="0">
  </p>
  <p>
    <label for="saturate">Sättigen</label>
    <input id="sättigen" name="sättigen" type="Bereich" min="0" max="500" value="100">
  </p>
  <p>
    <label for="sepia">Sepia</label>
    <Eingabe-ID="sepia" Name="sepia" Typ="Bereich" min="0" max="100" Wert="0">
  </p>
  <input type="reset" form="imageEditor" id="reset" value="Zurücksetzen" />
</form>
<div id="BildContainer" Klasse="Mitte">
  <img src="futurama.jpg">
</div>

Funktion Bild bearbeiten() {
  var gs = $("#gs").val(); // Graustufen
  var Unschärfe = $("#Unschärfe").val(); // Unschärfe
  var br = $("#br").val(); // Helligkeit
  var ct = $("#ct").val(); // Kontrast
  var huer = $("#huer").val(); // Farbton rotieren
  var opacity = $("#opacity").val(); // Opazität
  var invert = $("#invert").val(); // invert
  var saturate = $("#saturate").val(); // sättigen
  var sepia = $("#sepia").val(); // sepia
  $("#imageContainer img").css(
    "Filter", 'Graustufen(' + gs+
    '%) Unschärfe(' + Unschärfe +
    'px) Helligkeit(' + br +
    '%) Kontrast(' + ct +
    '%) Farbton-Drehung(' + huer +
    'Grad) Deckkraft(' + Deckkraft +
    '%) invertieren(' + invertieren +
    '%) sättigen(' + sättigen +
    '%) sepia(' + sepia + '%)'
  );
  $("#imageContainer img").css(
    "-webkit-filter", 'Graustufen(' + gs+
    '%) Unschärfe(' + Unschärfe +
    'px) Helligkeit(' + br +
    '%) Kontrast(' + ct +
    '%) Farbton-Rotation(' + huer +
    'Grad) Deckkraft(' + Deckkraft +
    '%) invertieren(' + invertieren +
    '%) sättigen(' + sättigen +
    '%) sepia(' + sepia + '%)'
  );
}
// Filter anwenden, wenn sich der Eingabewert ändert $("input[type=range]").change(editImage).mousemove(editImage);

Derzeit haben wir nur die Echtzeitvorschau des Filters realisiert. Zu den nachfolgenden Funktionen, die realisiert werden sollen, gehören die Unterstützung komplexer svg -Filtervorlagen, Exportieren und Herunterladen usw. Nach Abschluss dieser Schritte müssen Sie keine anderen APP😅 mehr herunterladen, um Ihren Fotos Filter hinzuzufügen. Vollständiger Beispielcode: https://codepen.io/dragonir/pen/abJmqxM

Sparen Sie Platz und erhöhen Sie die Ladegeschwindigkeit von Webseiten

Die Praxis hat gezeigt, dass das Volumen desselben Bildes nach Reduzierung von Helligkeit, Kontrast und Farbsättigung im Vergleich zum Originalbild erheblich reduziert werden kann. Ein Bild von etwa 2M kann nach der Schwächung und Speicherung auf etwa 1M komprimiert werden. Wir können弱化Bilder auf Webseiten verwenden und sie dann durch CSS filter wiederherstellen. Auf diese Weise können die Ziele der Ressourcenkomprimierung, der Erhöhung der Webseiten-Ladegeschwindigkeit und der Verbesserung des Benutzererlebnisses erreicht werden.

Um detaillierte Informationen zur Vorgehensweise zu erhalten, lesen Sie bitte die folgenden Tutorials:

Kontrast-Swap-Technik: Verbesserte Bildleistung durch CSS filter https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters

Kompatibilität

Aus den Ergebnissen der caniuse -Abfrage können wir ersehen, dass css filter in modernen Browsern gut unterstützt wird. Mit Ausnahme des IE Browsers kann es in den meisten anderen Browsern normal verwendet werden. Bei Bedarf können Sie ein Browser-Kernelpräfix hinzufügen. Auf der offiziellen Website gibt es jedoch auch die folgenden 3 Problemaufforderungen. Ich glaube, dass diese Probleme mit der Aktualisierung des Browsers nach und nach behoben werden:

• Wenn das untergeordnete Element in Safari animiert ist, wird der Filter nicht angewendet.
• Derzeit unterstützt kein Browser die spread-radius -Methode des drop-shadow .
• Wenn im Edge Browser das Element oder Unterelement mit負值z-index festgelegt ist, kann der Filter nicht angewendet werden.

Zusammenfassen

Dieser Artikel listet einfach einige häufig verwendete Seiteneffekte mit CSS filter auf. Tatsächlich kann jede integrierte Methode filter unendlich viele Erweiterungs- und Anwendungsmöglichkeiten bieten. Beispielsweise kann invert Farbe auch auf hover -Effekte angewendet werden, und durch Anpassen sepia Sepiabraunwerts der Webseite können Augenschutzeffekte erzielt werden. Solange Sie Ihre Vorstellungskraft und Kreativität einsetzen, können filter in der Praxis gut angewendet werden.

Die folgenden Beispiele sind gute Anwendungsbeispiele. Bei Interesse können Sie hier weiterlesen:

Milchglaseffekt https://codepen.io/KazuyoshiGoto/pen/nhstF

Zerbrochener Glaseffekt https://codepen.io/bajjy/pen/vwrKk

Hover-Effekt mit Filter https://codepen.io/nxworld/details/ZYNOBZ

Schaltfläche mit invertierter Farbe https://codepen.io/monkey-company/pen/zZZvRp

Altes Foto https://codepen.io/dudleystorey/pen/pKoqa

Erweiterter Filtereditor: https://codepen.io/stoumann/pen/MWeNmyb

Abschließend ist noch ein Bild復古莫蘭迪色性冷淡油畫效果angehängt, der mit dem oben stehenden Filter-Editor angepasst wurde. (Wow, das ist zu geil, CSS einfach geil, yyds🤣 )

Oben sind die Details der magischen Verwendung von CSS-Filtern aufgeführt. Weitere Informationen zur magischen Verwendung von CSS-Filtern finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!