Intern ❘ Inhaltsverzeichnis ❘ Glossar ❘ Bausteine ❘ Linkliste ❘ Tutorials ❘ Kommentare

Thema: Glühende Neon Buchstaben ➧ Artikel anzeigen

Volker schrieb am Dienstag, den 19 Januar 2021 #1: Geil wie immer Werner!
Wenn ich ein Drive Inn hätte oder ne Bar..... würde ich sofort einbauen

Tommy ✶✶✶✶✶ schrieb am Mittwoch, den 20 Januar 2021 #2: immer wieder neue Ideen - sehr gut und sicher auch an vielen Stellen einsetzbar 👍

David ✶✶✶✶✶ schrieb am Sonntag, den 31 Januar 2021 #3: Supertoll gemacht 😀
Was ist, wenn ich jetzt alle Buchstaben "Flackern", "Brennen" oder "Rotieren" lassen möchte?

Werner schrieb am Sonntag, den 31 Januar 2021 #4: Hallo David,
Nachdem du die gewünschte Animation erstellt und kopiert hast, ersetze folgendes:

<div class="neon">
N
e
o
n
B
u
c
h
s
t
a
b
e
n
</div>

David ✶✶✶✶✶ schrieb am Montag, den 1 Februar 2021 #5: Vielen Dank Werner,
das funktioniert bestens 👍

Maic Reck ✶✶✶✶✶ schrieb am Sonntag, den 25 Juli 2021 #6: Hallo Werner, wieder mal eine sehr schöne Arbeit. Die Beispiele sind sehr schön responsive, wie bekommt man das denn mit dem aus dem Editor hin, der passt sich nicht an, leider.😉

Werner schrieb am Sonntag, den 25 Juli 2021 #7: Hallo Maic,
wenn man da genau hinschaut, dann sieht man das die Beispiele nur Bilder sind (animierte GIFs).
Erstellt mit dem Programm: ShareX ( getsharex.com/ , kostenlos).

Im CSS dann:

figure > img {
display: Inline;
max-width: 100%;
height: Auto;
}

Beim IMG-Tag muss die Breite und Höhe des Bildes angegeben werden damit das Bild (animiertes GIF) responsive wird:

<figure> <img src="bild.gif" width="1407" height="207"> </figure>

Abgesehen davon, könntest du auch mit Media-Querys ( developer.mozilla.org/en-U[…]SS/@media) arbeiten, je nach Fensterbreite des Browsers unterschiedliche Größenangaben der Schrift definieren.

@media screen and (max-width: 16rem) {
div.neon {
font-size: 10rem;
}
}

@media screen and (max-width: 30rem) {
div.neon {
font-size: 20rem;
}
}

Die Werte entsprechend anpassen.