Glas mit CSS Filtern mattieren

Während Filter wie Kontrast, Sättigung und Weichzeichnung in Bildbearbeitungsprogrammen schon seit einiger Zeit existieren, erforderte deren Bereitstellung im Web historisch das Ausliefern von Bildern mit bereits angewendeten Filtern. Da Browser Filter als Teil der Webplattform zu integrieren beginnen, können wir komplexe visuelle Effekte in ihre Bestandteile zerlegen und sie im Web implementieren. Dieser Artikel untersucht einen solchen Effekt, den Milchglaseffekt, und wie CSS-Filter eine sauberere und flexiblere Lösung als statische Bilder bieten.

Old School: Milchglaseffekt mit Bildern

Der Milchglaseffekt ist im Internet schon seit einiger Zeit verbreitet; wir haben ihn hier auf CSS-Tricks bereits 2008 gesehen. Die Idee hinter dem Effekt ist relativ einfach: den Bereich hinter überlagertem Inhalt einfach weichzeichnen und aufhellen. Der Inhalt erhält einen höheren Kontrast zum Hintergrund, aber man behält trotzdem eine grobe Vorstellung davon, was dahinter vor sich geht. Der CSS-Tricks-Artikel verwendet zwei Bilder: eine Standardversion und eine mattierte Version (weichgezeichnet mit einem weißen Stich). In unserem Beispiel gleitet eine Karte hoch, um Inhalt freizugeben, während sie den Hintergrund mattiert.

Demo

Siehe den Pen Milchglaseffekt mit mehreren Bildern von betravis (@betravis) auf CodePen.

Das HTML

Das Markup ist relativ einfach. Wir haben nur einen einzigen Artikel, der Inhalt enthält.

<article class="glass down">
  <h1>Pelican</h1>
  <p>additional content...</p>
</article>

Das CSS

Wir dimensionieren zunächst alles auf das Viewport. Dann überlagern wir eine weichgezeichnete Version des Hintergrunds über dem ursprünglichen Hintergrund. Schließlich fügen wir einen weißen Stich hinzu. Der Überlauf wird versteckt, um Scrollen zu verhindern und den Effekt auf das .glass-Element zu beschneiden.

html, body, .glass {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background-image: url('pelican.jpg');
    background-size: cover;
}
.glass::before {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('pelican-blurry.jpg');
    background-size: cover;
    content: ' ';
    opacity: 0.4;
}
.glass {
    background-color: white;
}

Die obige CSS erstellt unsere weichgezeichnete und aufgehellte Überlagerung. Wir müssen die Überlagerung auch nach unten zum unteren Ende der Seite verschieben, sodass gerade genug Platz bleibt, um den Header-Text zu sehen. Da das weichgezeichnete Bild ein Kind der Überlagerung ist, müssen wir es auch um den entgegengesetzten Betrag nach oben verschieben, um es mit dem Body-Hintergrund ausgerichtet zu halten. Da die Demo Übergänge verwendet, habe ich mich entschieden, CSS-Transformationen anstelle der Eigenschaft background-attachment zu verwenden, da CSS-Transformationen Hardware-beschleunigt sein können.

.glass.down {
    transform: translateY(100%) translateY(-7rem);
}
.glass.down::before {
    transform: translateY(-100%) translateY(7rem);
}
.glass.up, .glass.up::before {
    transform: translateY(0);
}

Notizen

Die obige Technik ist unkompliziert und hat eine solide Browserunterstützung. Obwohl ich die Demo mit Übergängen etwas aufgepeppt habe, haben die anderen erforderlichen Funktionen – generierter Inhalt, Deckkraft, Transformationen und Hintergrundgröße – alle eine solide Browserunterstützung, die bis IE 9 zurückreicht (mit Ausnahme von Opera Mini).

New School: Milchglaseffekt mit Filtern

Die Technik mit dem doppelten Bild erfordert die Beibehaltung eines weichgezeichneten Bildes neben dem Original, was zu einer Qual werden kann, wenn man den Effekt für mehrere Bilder wiederverwenden muss. Responsive Designs erfordern beispielsweise möglicherweise den Austausch verschiedener Bilder bei unterschiedlichen Bildschirmgrößen. Oder Vorlagenlayouts können Bilder dynamisch einfügen (z. B. ein anderes Header-Bild für jeden Blogbeitrag). In diesen Fällen wäre es schön, den Effekt nur mit dem Quellbild zu generieren. Schließlich blenden wir es nur aus.

Hier kommen CSS-Filter ins Spiel. Sie erlauben uns, die Unschärfe im Browser anzuwenden, mithilfe von der CSS-Eigenschaft filter.

Das CSS

Wir können die CSS für die mattierte Glasüberlagerung so anpassen, dass sie das Originalbild mit einem angewendeten blur-Filter ist.

.glass::before {
    background-image: url('pelican-blurry.jpg');
}

.glass::before {
    background-image: url('pelican.jpg');
    filter: blur(5px);
}

Demo

Siehe den Pen Milchglaseffekt mit Filtereffekten von betravis (@betravis) auf CodePen.

Einschränkungen

Kinderleicht, oder? Leider sind CSS-Filter relativ neu. Das bedeutet, dass sie möglicherweise mit Vendor-Präfixen versehen sind und dass ihre Browserunterstützung noch nicht universell ist. Filter haben jedoch eine längere Geschichte in SVG, und das Anwenden von SVG-Filtern auf HTML-Inhalte über CSS hat eine breitere Browserunterstützung. Sie können sie leicht als Fallback für den Fall hinzufügen, dass CSS-Filter nicht unterstützt werden. Die obige Demo macht das tatsächlich.

Um einen SVG-Filter hinzuzufügen, fügen wir etwas Inline-SVG in unser HTML-Markup ein und referenzieren den Filter mit einer url(). Profi-Tipp: Eine Alternative ist, den SVG-Filter zu kodieren und als Daten-URL zu referenzieren, aber dieses Format ist in einem Artikel etwas schwieriger zu lesen.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

.glass::before {
    background-image: url('pelican.jpg');
    /* Fallback to SVG filters */
    filter: url('#blur');
    filter: blur(5px);
}

Es wird immer noch Fälle geben, in denen weder CSS- noch SVG-Filter von einem Browser unterstützt werden. In diesem Fall sieht der Benutzer Text auf einem aufgehellten (getönten, aber unscharfen) Hintergrund, was nicht schlecht ist.

Fazit

Filter ermöglichen es uns, Effekte im Browser zu verwenden, die zuvor nur in Bildbearbeitungsprogrammen verfügbar waren. Als Stil eines Elements, anstatt als gerendertes Bild, sind sie leichter zu ändern und wiederzuverwenden. Sie können CSS-Filter in aktuellen Versionen von Chrome, Safari und Opera verwenden, und sie werden aktiv in Firefox entwickelt (noch keine Nachricht für Internet Explorer). Mit etwas Sorgfalt für das Fallback-Verhalten können Sie sie noch heute verwenden.