So erstellst du Neon-Text mit CSS

Neon-Text kann jedem Website ein schönes, futuristisches Flair verleihen. Ich habe schon immer die Magie von Neonschildern geliebt und wollte sie mit CSS nachbilden. Ich dachte, ich teile ein paar Tipps, wie das geht! In diesem Artikel werden wir uns ansehen, wie man Texteffekte hinzufügt. Wir werden uns auch verschiedene Möglichkeiten ansehen, Neonschilder zu animieren, alles mit CSS und Keyframes.

Das werden wir erstellen

Einen Glüheffekt zu Text hinzufügen

Zuerst lassen wir den Text leuchten. Dies kann in CSS mit der Eigenschaft text-shadow geschehen. Das Coole an text-shadow ist, dass wir mehrere Schatten anwenden können, indem wir sie einfach durch Kommas trennen.

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

text-shadow erfordert vier Werte, von denen die ersten beiden die horizontale bzw. vertikale Position des Schattens darstellen. Der dritte Wert gibt die Größe des Weichzeichnungsradius an, während der letzte Wert die Farbe des Schattens angibt. Um die Größe des Glüheffekts zu erhöhen, würden wir den dritten Wert, der den Weichzeichnungsradius darstellt, erhöhen. Oder anders ausgedrückt:

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

Das ist es, was wir mit diesem kleinen bisschen CSS erhalten

Das Nächste, was Sie sich vielleicht fragen, ist, was es mit all diesen Werten auf sich hat? Wie habe ich diese bekommen und warum sind es so viele? Zuerst haben wir weiße Glüheffekte zu den äußeren Rändern der Textbuchstaben mit einem kleinen Weichzeichnungsradius hinzugefügt.

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
}

Die letzten fünf Werte sind breitere Textschatten mit einem größeren Weichzeichnungsradius, die die grüne Glühung bilden.

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    /* Green glow */
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

Es wäre großartig, wenn wir das mit weniger als fünf Schatten erreichen könnten, aber wir brauchen all diese Schatten, damit sie übereinander gestapelt werden können, um dem Glühen mehr Tiefe zu verleihen. Wenn wir stattdessen nur einen einzigen text-shadow verwendet hätten, hätte der Effekt nicht die nötige Tiefe, um realistisch auszusehen.

Experimentieren Sie mit verschiedenen Farbtönen und Farben sowie mit verschiedenen Weichzeichnungsradien! Es gibt eine riesige Vielfalt an coolen Glüheffekten, die Sie erstellen können, also probieren Sie verschiedene Variationen aus – Sie können sogar Farben mischen und kombinieren, wo eine Farbe in eine andere übergeht.

Der "Flimmer"-Effekt

Eines, das Ihnen bei Neonschildern vielleicht auffällt, ist, dass einige von ihnen – besonders ältere – zum Flimmern neigen. Das Licht geht irgendwie an und aus. Das Gleiche können wir mit CSS-Animationen machen! Greifen wir zu @keyframes, um eine Animation zu erstellen, die das Licht in schnellen, scheinbar zufälligen Blitzen ein- und ausschaltet.

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

Das ist eigentlich schon alles! Wir haben dieselbe text-shadow-Eigenschaft und dieselben Werte, die wir zuvor hatten, in eine @keyframes-Animation namens flicker verpackt und Zeitpunkte auf der Zeitleiste gewählt, um die Schatten anzuwenden, sowie Zeitpunkte, die die Schatten vollständig entfernen.

Alles, was noch übrig ist, ist, die Animation dort aufzurufen, wo wir wollen, dass das Licht flimmert. In diesem speziellen Fall fügen wir sie nur dem <h1>-Element hinzu. Wenn ein Teil des gesamten Schildes flimmert, wirkt das etwas realistischer, als wenn wir das Flimmern auf den gesamten Text anwenden würden.

h1 {
  animation: flicker 1.5s infinite alternate;     
}

Beachten Sie, dass, wenn wir das gesamte Schild flimmern lassen wollten, wir technisch gesehen die text-shadow-Werte in der .neonText-Klasse entfernen, die Animation darauf anwenden und die @keyframes die Schatten anwenden lassen könnten.

Es ist ein ziemlich cooler Effekt und verleiht unserem Neon-Text mehr Realismus! Natürlich gibt es auch andere Effekte, die Sie ausprobieren könnten, die in diesem Artikel weiter untersucht werden. Wie wäre es zum Beispiel mit einer pulsierenderen Animation oder einem subtileren Flimmern?

Lass uns diese und andere Effekte untersuchen!

Pulsierendes Glühen

Dies haben wir gerade kurz gesehen. Es verwendet Keyframes, genau wie das vorherige Beispiel, bei dem wir die Größe des Weichzeichnungsradius am Anfang und Ende der Animation festlegen.

Wir möchten, dass die Größe des Weichzeichnungsradius am Ende der Animation am kleinsten ist, daher verringern wir einfach die Weichzeichnungsradiuswerte für jeden text-shadow-Wert im 0%-Keyframe. So ebb und fließt die Größe des Weichzeichnungsradius allmählich und erzeugt einen pulsierenden Effekt.

@keyframes pulsate {
  100% {
    /* Larger blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  0% {
    /* Smaller blur radius */
    text-shadow:
      0 0 2px #fff,
      0 0 4px #fff,
      0 0 6px #fff,
      0 0 10px #0fa,
      0 0 45px #0fa,
      0 0 55px #0fa,
      0 0 70px #0fa,
      0 0 80px #0fa;
  }
}

Wir fügen die Animation wieder einem Element hinzu. Wir entscheiden uns wieder für <h1>.

h1 {
  animation: pulsate 2.5s infinite alternate;     
}

Hier ist es, wenn alles zusammengefügt ist

Subtiles Flimmern

Wir können die Dinge etwas abmildern und die Flimmeraktion sehr subtil gestalten. Alles, was wir tun müssen, ist, die Größe des Weichzeichnungsradius im 0%-Keyframe leicht zu verringern, nur nicht in dem Maße wie im vorherigen Beispiel.

@keyframes pulsate {
  100% {
    /* Larger blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #f09,
      0 0 80px #f09,
      0 0 90px #f09,
      0 0 100px #f09,
      0 0 150px #f09;
  }
 0% {
    /* A slightly smaller blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 18px #fff,
      0 0 38px #f09,
      0 0 73px #f09,
      0 0 80px #f09,
      0 0 94px #f09,
      0 0 140px #f09;
  }
}

Da das Flimmern subtiler ist und die Verringerung des Weichzeichnungsradius nicht so groß ist, sollten wir die Anzahl der Wiederholungen dieser Animation pro Sekunde erhöhen, um häufigeres Flimmern zu emulieren. Dies kann durch Verringerung der Animationsdauer geschehen, sagen wir auf nur 0,11s.

h1 {
  animation: pulsate 0.11s ease-in-out infinite alternate;    
}

Verwendung eines Hintergrundbildes

Es wäre wirklich schön, wenn unser Schild an einer Wand hängen würde und nicht im leeren Raum. Holen wir uns dafür ein Hintergrundbild, vielleicht eine Art Ziegeltextur von Unsplash oder so etwas.

body {
  background-image: url(wall.jpg);
}

Hinzufügen eines Rahmens

Ein letztes Detail, das wir hinzufügen können, ist eine Art runder oder rechteckiger Rahmen um das Schild. Es ist nur eine nette Möglichkeit, den Text einzurahmen und ihn wie ein echtes Schild aussehen zu lassen. Indem wir dem Rahmen einen Schatten hinzufügen, können wir ihm den gleichen Neoneffekt wie dem Text verleihen!

Das Element, das den Container für den Text bildet, benötigt einen Rahmen. Nehmen wir an, wir arbeiten nur mit einem <h1>-Element. Dieses bekommt den Rahmen. Wir rufen die border-Kurzform-Eigenschaft auf, um einen durchgezogenen weißen Rahmen um die Überschrift zu erstellen, plus etwas Polsterung, um dem Text etwas Platz zum Atmen zu geben.

h1 {
  border: 0.2rem solid #fff;
  padding: 0.4em;
}

Wir können die Ecken des Rahmens etwas abrunden, damit die Dinge nicht so scharf sind, indem wir einen border-radius auf die Überschrift anwenden. Sie können jeden Wert verwenden, der für Sie am besten geeignet ist, um die gewünschte Rundung zu erzielen.

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
}

Das Letzte ist der Glanz! Nun, text-shadow funktioniert hier nicht für den Rahmen, aber das macht nichts, denn dafür ist die Eigenschaft box-shadow gedacht. Die Syntax ist extrem ähnlich, sodass wir sogar genau das verwenden können, was wir für text-shadow haben, und die Werte leicht anpassen.

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #bc13fe,
              0 0 0.8rem #bc13fe,
              0 0 2.8rem #bc13fe,
              inset 0 0 1.3rem #bc13fe;
}

Bemerken Sie das Schlüsselwort inset? Das ist etwas, was text-shadow nicht kann, aber wenn wir es zum box-shadow des Rahmens hinzufügen, können wir einen Teil des Glanzes auf beiden Seiten des Rahmens für eine realistische Tiefe erzielen.

Was ist mit Barrierefreiheit?

Wenn Benutzer eine Präferenz für reduzierte Bewegung haben, müssen wir dies mit der Media Query prefers-reduced-motion berücksichtigen. Dies ermöglicht es uns, unsere Animationseffekte zu entfernen, um unseren Text für Personen, die reduzierte Bewegung bevorzugen, zugänglicher zu machen.

Zum Beispiel könnten wir die flackernde Animation aus dem obigen Pen modifizieren, sodass Benutzer, die prefers-reduced-motion aktiviert haben, die Animation nicht sehen. Erinnern Sie sich, dass wir den flimmernden Effekt nur auf das <h1>-Element angewendet haben, also werden wir die Animation für dieses Element ausschalten.

@media screen and (prefers-reduced-motion) { 
  h1 {
    animation: none;
  }
}

Es ist unglaublich wichtig sicherzustellen, dass die Präferenzen der Benutzer berücksichtigt werden, und die Verwendung dieser Media Query ist eine großartige Möglichkeit, den Effekt für Menschen mit einer Vorliebe für reduzierte Bewegung zugänglicher zu machen.

Fazit

Hoffentlich hat Ihnen das gezeigt, wie Sie coolen Neon-Text für Ihr nächstes Projekt erstellen können! Stellen Sie sicher, dass Sie mit verschiedenen Schriftarten, Weichzeichnungsradien und Farben experimentieren und vergessen Sie nicht, auch verschiedene Animationen auszuprobieren – es gibt eine Welt voller Möglichkeiten. Und hinterlassen Sie einen Kommentar, wenn Sie einen interessanten Schatteneffekt erstellt haben, den Sie teilen möchten. Danke fürs Lesen!