Ein ruhiger CSS-Effekt mit gesprenkeltem Licht

Es gibt eine sanfte Wärme im frühen Abendlicht, das durch raschelnde Blätter dringt. Künstler nutzen gesprenkeltes Licht, um einen weichen, hypnotischen Effekt zu erzeugen.

Wir können die gleiche Art von gesprenkeltem Lichteffekt im Webdesign erstellen und ihn auf Fotos und Illustrationen anwenden, um ihnen einen magischen Touch zu verleihen, der ansonsten vielleicht trockene Inhaltswände wieder zum Leben erweckt.

Ich gebe Ihnen eine einfache, schnelle Möglichkeit, diesen Effekt hinzuzufügen… mit reinem CSS.

Bevor wir uns dem Code widmen, ist es wichtig, die Zusammensetzung von gesprenkeltem Licht zu kennen. Es besteht aus großen Flecken – kreisförmig oder elliptisch – von Licht, die von den Schatten der Blätter unterbrochen werden. Im Grunde ist es das Licht, das durch Blätter, Äste und dergleichen dringt. Manchmal erzeugen die Schatten scharfe Kanten, sind aber häufiger verschwommen, da wir von Licht sprechen, das durch viele, weniger definierte Räume dringt, die das Licht diffundieren und verzerren, wenn es Schatten aus größerer Entfernung wirft als beispielsweise Ihr eigener scharfer Schatten an einer nahegelegenen Wand bei direkter Sonneneinstrahlung.

Hier ist der Unterschied im Aussehen einer weißen Wand mit und ohne gesprenkeltes Licht

Ich werde den gesprenkelten Lichteffekt mit reinem Text und lustigen Emojis nachbilden, indem ich CSS-Schatten und -Überblendungen anwende, um die Natur zu imitieren. Ich werde auch alternative Methoden behandeln.

Die Szene setzen

Wir werden Text – Buchstaben des Alphabets, Sonderzeichen, Emojis usw. – verwenden, um die Formen des Lichts zu erstellen. Und mit Licht meine ich blasse, durchscheinende Farben. Wiederum streben wir nach einem gesprenkelten Lichteffekt und nicht nach etwas Scharfem, Klarem oder Starkem.

Es ist am besten, Zeichen zu wählen, die auf irgendeine Weise elliptisch oder länglich sind – die Flecken, die von gesprenkeltem Licht erzeugt werden, sind vielfältig. Hier müssen Sie nach bestem Urteilsvermögen vorgehen, um genau das zu erreichen, was Sie erzielen möchten. Ich? Ich verwende 🍃, 🍂, \, da sie elliptisch, länglich und schräg sind – ein wenig Chaos und Unvorhersehbarkeit für einen ansonsten ruhigen Effekt.

Ich packe diese in Absätze, die in einem .backdrop Elternelement enthalten sind.

<div class="backdrop">
  <p class="shapes">🍃</p>
  <p class="shapes">🍂</p>
  <p class="shapes">\</p>
</div>

Ich verwende das Elternelement als Oberfläche, auf der das gesprenkelte Licht und die Schatten geworfen werden, und wende ein Hintergrundbild für seine Textur an. Und ich gebe der Oberfläche nicht nur eine explizite width und height, sondern setze auch overflow auf hidden, damit ich Schatten werfen kann, die über die Oberfläche hinausgehen, ohne sie zu enthüllen. Die Objekte, die den gesprenkelten Lichteffekt erzeugen, sind dank CSS-Grid in der Mitte der Oberfläche des Backdrops ausgerichtet.

.backdrop {
  background: center / cover no-repeat url('image.jpeg');
  width: 400px; height: 240px;
  overflow: hidden;
  display: grid;
}
.backdrop > * {
  grid-area: 1/1;
}

Ich finde es in Ordnung, wenn die Formen nicht *exakt* übereinander liegen, solange sie sich so überlappen, dass der gewünschte gesprenkelte Lichteffekt erzielt wird. Daher gibt es keinen Druck, genau das zu tun, was ich hier tue, um Dinge in CSS zu positionieren. Tatsächlich ermutige ich Sie, mit den Werten zu spielen, um verschiedene Muster von gesprenkeltem Licht zu erhalten!

Den gesprenkelten Lichteffekt in CSS gestalten

Dies sind die wichtigsten Eigenschaften, die die Emojis haben sollten – transparent Farbe, ein schwarz halbtransparenter Hintergrund (unter Verwendung des Alphakanals in rgba()), ein verschwommener weißer text-shadow mit einer schönen großen font-size und schließlich ein mix-blend-mode, um die Dinge zu glätten.

.shapes {
  color:  transparent;
  background-color: rgba(0, 0, 0, 0.3); // Use alpha transparency
  text-shadow: 0 0 40px #fff; // Blurry white shadow
  font: bolder 320pt/320pt monospace;
  mix-blend-mode: multiply;
}

mix-blend-mode bestimmt, wie die Farben eines Elements mit denen des Inhalts seines Container-Elements verschmelzen. Der Wert multiply bewirkt, dass der Hintergrund eines Elements durch die hellen Farben des Elements hindurchscheint und dunkle Farben gleich bleiben, was zu einem schöneren und natürlicheren gesprenkelten Lichteffekt führt.

Farben und Kontrast verfeinern

Ich wollte das background-image auf dem Backdrop etwas heller machen, daher habe ich auch filter: brightness(1.6) hinzugefügt. Eine andere Möglichkeit, dies zu tun, ist stattdessen background-blend-mode, wobei alle verschiedenen Hintergründe eines Elements gemischt werden und anstatt die Emojis als separate Elemente hinzuzufügen, fügen wir sie als Hintergrundbilder hinzu.

Beachten Sie, dass ich im letzten Beispiel ein anderes Emoji sowie floralwhite für eine Farbe verwendet habe, die weniger intensiv ist als reines Weiß für das Licht. Hier ist eines der Emoji-Hintergrundbilder ausgepackt.

<svg xmlns='http://www.w3.org/2000/svg'> 
  <foreignObject width='400px' height='240px'> 
    <div xmlns='http://www.w3.org/1999/xhtml' style=
      'font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);'
    >
      🌾
    </div> 
  </foreignObject> 
</svg>

Wenn Sie eigene Bilder für die Formen verwenden möchten, stellen Sie sicher, dass die Ränder unscharf sind, um ein weiches Licht zu erzeugen. Der CSS-blur() filter kann für dasselbe nützlich sein. Ich habe auch CSS @supports verwendet, um den Schatten-Unschärfewert für bestimmte Browser als Fallback anzupassen.

Nun kehren wir zum ersten Beispiel zurück und fügen ein paar Dinge hinzu.

<div class="backdrop">
  <p class="shapes">🍃</p>
  <p class="shapes">🍂</p>
  <p class="shapes">\</p>
</div>

<p class="content">
  <img width="70px" style="float: left; margin-right: 10px;" src="image.jpeg" alt="">
  Top ten tourists spots for the summer vacation <br><br><i style="font-weight: normal;">Here are the most popular places...</i>
</p>

.backdrop und .shapes haben im Grunde die gleichen Stile wie zuvor. Was .content betrifft, das ebenfalls über dem .backdrop liegt, habe ich isolation: isolate hinzugefügt, um einen neuen Stapelkontext zu bilden und das Element als verfeinernden Touch vom Mischen auszuschließen.

Die Lichtquelle animieren

Ich habe auch beschlossen, eine einfache CSS-Animation mit @keyframes hinzuzufügen, die auf den .backdrop bei :hover angewendet wird.

.backdrop:hover > .shapes:nth-of-type(1){
  animation: 2s ease-in-out infinite alternate move;
}
.backdrop:hover > .shapes:nth-of-type(2):hover{
  animation: 4s ease-in-out infinite alternate move-1;
}

@keyframes move {
  from {
    text-indent: -20px;
  }
  to {
    text-indent: 20px;
  }
}
@keyframes move-1 {
  from {
    text-indent: -60px;
  }
  to {
    text-indent: 40px;
  }
}

Die Animation der text-indent Eigenschaft auf den Emojis erzeugt eine sehr subtile Bewegung – die Art, die man von vorbeiziehenden Wolken erwarten könnte, die die Richtung des Lichts ändern. Nur ein Hauch von Klasse, wissen Sie.

Zusammenfassung

Da haben wir es! Wir haben uns von Natur und Kunst inspirieren lassen, um einen dieser teilweise bewölkten Tage nachzuahmen, an denen die Sonne durch Bäume und Büsche scheint und gesprenkelte Licht- und Schattenflecken auf eine Oberfläche projiziert. Und das alles haben wir mit einer kleinen Handvoll CSS und ein paar Emojis geschafft.

Der Schlüssel war, wie wir Farbe auf die Emojis angewendet haben. Die Verwendung eines zusätzlichen verschwommenen text-shadow in einer hellen Farbe setzt das Licht, und eine halbtransparente background-color definiert die Schattenflecken. Von dort aus mussten wir nur noch sicherstellen, dass der Backdrop für Licht und Schatten eine realistische Textur mit genügend Kontrast verwendete, um den gesprenkelten Lichteffekt in Aktion zu sehen.