Glühende Neon Buchstaben - Generator

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Werner-Zenk.de »

Von der Idee zu einem fertigen Generator ist es ein weiter und spannender Weg (wenigstens für Programmierer).
Hier möchte ich meinen neusten Generator vorstellen: https://werner-zenk.de/tools/neon.php

neon.png

Damit lassen sich leuchtend animierte Buchstaben mit CSS erstellen.
Es können diverse (leuchtende) Farben ausgewählt werden, außerdem kann man einen (Google) Webfont einbinden.
Die Größe und die Leuchtkraft der Buchstaben sind einstellbar. Die Dauer der Animation kann auch angepasst werden.

Ich weiß, das ist vielleicht nichts für Mobirise (weil, das kann man nicht per D&D einbinden ;) )
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Volker »

Werner-Zenk.de hat geschrieben: Di 19. Jan 2021, 22:35 Ich weiß, das ist vielleicht nichts für Mobirise (weil, das kann man nicht per D&D einbinden ;) )
Aber mit dem Code Editor :D

https://360p.eu/360_grad_bilder.html

OK, da geht der Neon Effekt flöten, durch die CSS Matsche denk ich :D
Hätte ich einen Drive inn oder eine Bar... ich hätte da schon Ideen ;)
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

ich finde alles was zusätzliche Möglichkeiten bietet natürlich Klasse und bei so etwas ist die CSS ja schon ziemlich aufwändig und da ist ein Generator immer sehr gut.

Große Klasse das Teil :tu:

Vielleicht sollte der generierte Text den statischen Text oben ersetzen, denn an meinem Laptop habe ich eine ganze Weile gedrückt und nichts ist passiert, bis ich den generierten Text darunter entdeckt habe :D

... das geht einwandfrei im Mobirise "Code Editor" mit der CSS im "CSS Editor", dadurch wird also diese CSS auch sogleich im Block auf der Mobirise-Arbeitsseite animiert sichtbar.

Hier auch noch mein Test

Neon Buchstaben.JPG
Benutzeravatar
Rancher
Moderator
Moderator
Beiträge: 466
Registriert: Di 8. Dez 2020, 18:37
Wohnort: Elsass

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Rancher »

Affengeil :tu: :tu: :tu:
Wenn Dein Pferd tot ist, steig ab.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Werner-Zenk.de »

Ich hatte da noch einen Fehler drin, in der URL zu den Google-Webfonts fehlte das "s" in https:// die Folge war, das die Schriften nicht dargestellt wurden :verlegen:

Es ist nun möglich, eine individuelle Schriftfarbe auszuwählen.
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Volker »

Ja jetzt macht es Sinn :D
Gruß Volker
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Werner-Zenk.de »

Jetzt ist es sogar möglich, einen Buchstaben auszuwählen der ein flackern oder brennen simuliert, so als wäre das Neon-Licht defekt.

Bild
und
Bild

Hier können Bilder nur bis zu 1MB hoch geladen werden :confused:
Habe diese jetzt über imgur.com verlinkt.
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Volker »

Wie hast Du daraus ein Bild gemacht ?
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Tommy Herrmann »

Moin,

das sind .gif geworden mit je über 2 MB und über 3 MB.

Klasse Werner :tu:

... ich lasse hier bis zu 1MB Datei-Upload zu - das ist schon gigantisch viel und ich bitte auch um möglichst reduzierte Bildgrößen beim Upload.

In den meisten Foren werden maximal 300 KB pro Bild zugelassen oder auch oft gar kein Upload sondern nur Links, wie z.B. auch im Forum von dieser Forum-Software phpBB.de hier.

Ich habe schon in den ersten 4 Wochen hier Bilder-Uploads von insgesamt 50 MB. Wie soll das denn nach 10 Jahren aussehen. Ich habe ja nicht unendlich großen Webspace bei 1und1.

Ich bitte diesbezüglich also um Verständnis ...
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Werner-Zenk.de »

Volker hat geschrieben: Fr 22. Jan 2021, 19:42 Wie hast Du daraus ein Bild gemacht ?
Ich benutze die Freeware: Ocam - https://ohsoft.net/eng/ocam/intro.php?cate=1002
das sind .gif geworden mit je über 2 MB und über 3 MB.
Ja, ich kenne die Dateigröße. Das war auch keine Kritik, sondern nur ein Vorschlag.
In Zukunft soll es möglich sein, direkt mit Windows ein Gif aufzunehmen mit dem "Ausschneiden und skizzieren"-Tool.
Bereits jetzt funktioniert das mit dem "Screen Recorder" - Hier ist eine Anleitung: https://www.netzwelt.de/tutorial/169849 ... order.html
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

ja - das mit den Videos ist schon toll (danke für den Hinweis), jedoch entstehen da ja in wenigen Sekunden riesen .mp4 Dateien. So etwas ist natürlich zum Upload in einem Forum oder überhaupt auf einen privaten Server vollkommen undenkbar.

Vielleicht sollte man (bei Bedarf) dann eine Cloud wie die "Dropbox" oder eben auch "YouTube" verwenden.

Aufzeichnungen vom Desktop oder dem Datei-Explorer sind aber, z.B. für Demos, nicht möglich.

Das ist wohl eher zum Aufzeichnen von Spielen und Aktionen im Netz gedacht mit der Tastenkombination

Windows-Taste " :windows: + G " kann das ja jeder selbst mal probieren.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Werner-Zenk.de »

Tommy Herrmann hat geschrieben: Mi 20. Jan 2021, 05:57 Vielleicht sollte der generierte Text den statischen Text oben ersetzen, denn an meinem Laptop habe ich eine ganze Weile gedrückt und nichts ist passiert, bis ich den generierten Text darunter entdeckt habe :D
Das Formular wurde nun in zwei Blöcke aufgeteilt, so das bei einem breiten Browser-Fenster, die Blöcke nebeneinander liegen. Zusätzlich gibt es noch jede Menge neue Optionen.
https://werner-zenk.de/tools/neon.php
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Glühende Neon Buchstaben - Generator

Ungelesener Beitrag von Tommy Herrmann »

Na - da bleibt ja kein Wunsch offen :tu:
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 9 Gäste