Fügen Sie einen CSS-Lens-Flare zu Fotos hinzu für eine helle Note

Ich bin ein großer Fan von Filmen von J.J. Abrams. Ich genieße ihre straffen Handlungsstränge, pointierten Dialoge und natürlich: anamorphe Lens Flares. Filmemacher wie Abrams verwenden Lens Flares, um ihren Filmen einen Hauch von „hausgemachtem“ Realismus zu verleihen, eine Technik, die wir leicht in Tools wie Photoshop nachbilden und dann als Rasterbilder auf unseren Websites einfügen können.

Aber was, wenn wir denselben Lens-Flare-Look *ohne* die Verwendung von Bildbearbeitungswerkzeugen anwenden wollten? Wir können einen CSS-Lens-Flare erstellen, um unseren Galeriebildern, Hintergrundfotos oder Benutzerprofilen einen filmischen Touch zu verleihen.

Es gibt verschiedene Arten von Flares in der Fotografie. Diejenige, mit der wir arbeiten, ist als Artefakte bekannt, da sie kleine Lichtflecken hinterlassen, die die Form der Blende einer Kamera annehmen, wo das Licht eindringt und von der Linsenoberfläche reflektiert wird.

Hier ist ein gutes Beispiel für die Art von Lens Flare, die wir erstellen werden, direkt aus einem J.J. Abrams-Filmstill, natürlich

Der obige Lens Flare besteht aus mehreren Teilen. Listen wir sie auf, damit wir wissen, was wir anstreben

1. Die zentrale Lichtquelle erscheint als leuchtender Lichtball.
2. Es gibt einige horizontale elliptische Lichtstreifen – Lichtstrahlen, die verzerrt und verschwommen sind und zu länglichen Ellipsen führen.
3. Zufällige Lichtstrahlen schießen in verschiedenen Winkeln von der zentralen Lichtquelle weg.

Wir beginnen mit den unten aufgeführten HTML-Elementen, die unseren Flare-Komponenten entsprechen. Es gibt eine zentrale Lichtquelle und zwei zirkuläre Flares abseits der Diagonalen, drei horizontale Lens Flares und drei konische strahlenartige Flares.

<div class="lens-center"></div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="left-flare horizontal-flare"></div>
    <div class="right-flare horizontal-flare"></div>
    <div class="full-flare horizontal-flare"></div>
    <div class="conic-1"></div>
    <div class="conic-2"></div>
    <div class="conic-3"></div>
</div>

Schließlich muss die zentrale Lichtquelle unseres Lens Flares verstellbar sein, damit er glaubwürdig auf ein Bild überlagert werden kann. Auf diese Weise können wir ihn über eine glaubwürdige vorhandene Lichtquelle auf einem Bild platzieren und nicht über Gesichtern.

Der Hintergrund und die Lichtquelle eines CSS-Lens-Flares

Beginnen wir mit einem schwarzen Hintergrund und einer zentralen Lichtquelle für unseren CSS-Lens-Flare. Die meisten Farbverläufe im Web sind lineare Farbverläufe mit Volltonfarbübergängen, aber wir können ihnen Alphakanäle hinzufügen, was tatsächlich eine gute Möglichkeit ist, einen leuchtenden Effekt zu erzeugen. Ein kreisförmiger radialer Farbverlauf mit mehreren Schichten halbtransparenter Farben verleiht uns einen guten Kamera-Zentrums-Effekt.

background: radial-gradient(
  closest-side circle at center,
  hsl(4 5% 100% / 100%) 0%,
  hsl(4 5% 100% / 100%) 15%,
  hsl(4 10% 70% / 70%) 30%,
  hsl(4 0% 50% / 30%) 55%,
  hsl(4 0% 10% / 5%) 75%,
  transparent 99
);
filter: blur(4px);

Neugierig auf diese HSL-Syntax? Sie ist neu und scheint die zukünftige Richtung für die Definition von Alpha-Transparenz in allen CSS-Farbfunktionen zu sein.

Beachten Sie, dass wir hier einen CSS-Blur-Filter verwenden, um die Farbverläufe näher an Schichten von diffusem Licht zu bringen.

Jetzt, da wir wissen, wie man kreisförmige Flares hinzufügt, werden wir auch einen größeren, diffusen Flare hinter der Lichtquelle hinzufügen, sowie drei zusätzliche Flares im 45deg Winkel von der Mitte, um dem Effekt ein realistischeres Aussehen zu verleihen.

Einrichtung horizontaler Lichtstreifen

Beginnen wir mit horizontalen Flares. Es gibt ein paar Möglichkeiten, die wir wählen können, ein sehr längliches Ellipsen-Gradient wäre der einfachste Ansatz. Allerdings habe ich bemerkt, dass horizontale Lens Flares normalerweise weniger symmetrisch sind als die in meinen Referenzfotos, daher wollte ich meine auch etwas weniger symmetrisch gestalten.

Glücklicherweise haben radiale Farbverläufe ein optionales Positionsargument in CSS. Wir können zwei leicht unterschiedlich große linke und rechte Teile desselben horizontalen Flares mit leicht unterschiedlichen Farben erstellen. Wir können auch einen Opazitätsfilter hinzufügen, um den Bereich zu verdunkeln, wo die horizontalen Flares auf das Zentrum treffen, um den Flare weniger scharf zu machen.

background: radial-gradient(
  closest-side circle at center,
  transparent 50%,
  hsl(4 10% 70% / 40%) 90%,
  transparent 100%
);
filter: blur(5px);

Während wir dabei sind, fügen wir auch einen einzelnen, großen, diffusen, untenliegenden elliptischen Flare hinzu, der sich drei Viertel des Weges nach unten im Viewport befindet, für eine weitere Note von „Realismus“.

Erstellung der diffusen Lichtstrahlen

Nachdem sowohl die radialen als auch die horizontalen Flares vorhanden sind, bleiben uns nur noch die gewinkelten Lichtstrahlen, die von der Lichtquelle ausgehen. Wir könnten zusätzliche elliptische radiale Farbverläufe hinzufügen und dann den Container verzerren und verschieben, um eine gute Annäherung zu erzielen. Aber wir haben auch einen CSS-Farbverlauf, der bereits für diesen Zweck erstellt wurde: den konischen Farbverlauf. Unten ist ein Beispiel, das uns einen 7deg konischen Farbverlauf mit einem 5deg Offset von der unteren rechten Ecke seines Containers gibt.

background: conic-gradient(
  from 5deg at 0% 100%,
  transparent 0deg,
  hsl(4 10% 70% / 30%) 7deg,
  transparent 15deg
);
transform-origin: bottom left;
transform: rotate(-45deg);

Wir werden einige konische Farbverläufe hinzufügen, die auf unserem Flare-Zentrum zentriert sind, mit verschiedenen Gradientenwinkeln von halbtransparenten Farben. Da konische Farbverläufe die Ecke des Container-divs anzeigen können, werden wir sie durch rotationale Transformation unter Verwendung unserer Lichtquelle als Ursprung drehen, was zu einem diffusen Strahlfiltereffekt mit Offset führt.

Verwendung von CSS-Custom-Properties für einen flexibleren Lens-Flare

Bisher haben wir einen responsiven, aber statisch positionierten Lens-Flare-Effekt an einer festen Position erstellt. Es wäre schwierig, das Zentrum des Lens Flares anzupassen, ohne auch die horizontalen und konischen Flares darum herum zu beeinträchtigen.

Um den CSS-Lens-Flare sowohl anpassbar als auch weniger zerbrechlich zu machen, werden wir die Position, Größe und den Farbton des Lichtquellen-Flares über eine Reihe von Custom-Properties freilegen.

:root {
  --hue: 4;
  --lens-center-size: 40%;
  --lens-spread-size: 80%;
  --lens-left: 55%;
  --lens-top: 15%;
}

Während wir dabei sind, werden wir auch den Flare-Farbton und die Größe der horizontalen Flare-Höhe anpassen. Für die horizontale Flare-Breite verwenden wir CSS-Variable-Überladung, um sie separat einstellbar zu machen; andernfalls greifen wir auf die Lichtquellen-Flare-Mitte oder die Bildmitte zurück.

.left-flare {
  width: var(--left-flare-width, var(--lens-left, 50%));
}

So sieht der fertige CSS-Lens-Flare-Effekt mit einem Fotohintergrund aus und der Lens Flare wurde nach oben verschoben, damit die Position der Lichtquelle glaubwürdig wirkt. Probieren Sie es aus, fügen Sie Ihr eigenes Foto hinzu, um zu sehen, wie es in verschiedenen Kontexten funktioniert!

Andere CSS- und Nicht-CSS-Lens-Flare-Beispiele

Dies ist natürlich nur eine Möglichkeit, einen CSS-Lens-Flare zu erstellen. Ich mag diesen Ansatz, weil er flexibel in Bezug auf Farbe, Größe und Positionierung des Flares und seiner Teile ist. Das macht ihn zu einer wiederverwendbaren Komponente, die in vielen Kontexten verwendet werden kann.

Hier ist ein Beispiel von Keith Grant, das einen linearen Farbverlauf sowie CSS-Custom-Properties verwendet. Dann streut er etwas JavaScript ein, um die HSLA-Werte zu randomisieren.

Nicholas Guest hat einen weiteren CSS-Lens-Flare, der einen Box-Shadow auf den `::before`- und `::after`-Pseudo-Elementen eines `.flare`-Elements anwendet, um den Effekt zu erzielen, plus eine Prise jQuery, die den Flare beim Hovern der Maus folgen lässt.

Dieses Beispiel ist mit Canvas erstellt und ist raffiniert darin, wie die Lichtquelle der Maus beim Hovern folgt, während es zeigt, wie sich die Lens-Flare-Artefakte mit der Position der Lichtquelle verändern.

Die gleiche Idee hier

Und ein lustiges Beispiel, das GSAP, Canvas und eine Bibliothek namens JS.LensFlare verwendet.

Wie würden Sie einen CSS-Lens-Flare-Effekt angehen? Teilen Sie es in den Kommentaren!