Beispiele für benutzerdefinierte Syntaxelemente 3.0

[Fischi]

Liebe mozilo-Gemeinde,
Bildlink_Overlaytext.zip
wir möchten hier ein neues Thema zu eigenen Syntax-Elementen eröffnen. Hier können Lösungen zur Nachnutzung vorgestellt werden. Ohne viele Worte gleich zum Thema:
Es wird ein Link afu ein Bild erzeugt. Bei Hover über das Bild erfolgt eine Einblendung eines Textes, Klick führt zum Linkziel. Das Ziel kann eine Inhaltsseite oder eine andere Website sein.

Die ZIP-Datei enthält alles für die Integration in die eigene Website.
1. Kleine Dokumentationen
2. CSS-Datei
3. JavaScript-Datei (falls erforderlich)
4. Evtl. notwendige Einträge in template.html oder style.css

Einen Eindruck zur Funktion gibt es hier: https://spielwiese.fischer-ehdorf.de/Benutzersyntax/OverlayBild.html

Das war es kurz und bündig.
Läuft getestet ab PHP 8.0 - sicher auch früher.
Der Code ist robust gestaltet; sollte in unterschiedlichen Umgebungen funktionieren.

Viel Spaß beim Testen

[Fischi]

Ich habe noch 3 weitere Benutzerelemente fertig; Overlaytext hat sich geringfügig verändert. Stelle ich nochmal rein.
Hätte gar nicht gedacht, was die nutzbare Aufbereitung und Dokumentation für Arbeit macht!
Was machen die Syntaxelemente im Einzelnen:
1. Overlaytext_ueber_Bild
- Bild als Link erhält bei Hover erklärenden Text
2. Newsbox
- Blendet kleine Hinweisbox mit wichtigen Infos ein
3. Infobox_mit_flag
- Unsichtbare Infobox wird bei Klick auf Fahne am Bildchirmrand eingeblendet
4. Link_auf_Box_ausdehnen
- Bei größeren Blockelementen wird der klickbare LINK auf die gesamte Größe ausgeweitet.

Mehr Informationen gibt es hier:
https://spielwiese.fischer-ehdorf.de/Benutzersyntax.html

Hinweis!
Besonderes Augenmerk wurde auf Robustheit, Sicherheit und Barrierefreiheit gelegt.
Habe es auch unter PHP 8.0 mozilo 2 Rev. 55 getestet - funktioniert prinzipiell.

Ich bin auch auf kreative Anwendungen gespannt.

Gruß

[Fischi]

Guten Morgen an die mozilo-Gemeinde.
Die oben aufgeführten Benutzer-Syntayx-Elemente habe ich z.T. überarbeitet bzw. bin noch dabei.
Es sollen noch weitere dazukommen.
Heute stelle ich den ersten Versuch eines 'Akkordeons' vor. DEMO untr folgendem LINK:
https://spielwiese.fischer-ehdorf.de/Benutzersyntax/Akkordeon.html

Funktioniert als reine CSS-Lösung mit 2 Benutzerelementen. Mit zusätzlich JS erfolgt das Einblenden des Inhaltes besser - JS ist aber nicht unbedingt nötig.

Ich arbeite noch an Gestaltungsvarianten für das Akkordeon und eine kleine Anleitung. Werde das Ganze demnächst hier einstellen.

Gruß

[harry60]

Hallo Fischi,

Das "Akkordeon" auf deiner Spielwiese sieht gut aus. Läßt sich aber nicht schließen, außer ich wechsele zum neuen "Akkordeon".

Schöne Grüße

[Fischi]

Guten Morgen harry60, das ist so.
Ich bin noch ein wenig am Basteln.
Aber - ich wollte das bewußt einfach halten; möglichst nur CSS, ohne JS.

Ich habe noch weitere Gestaltungselemente in Arbeit:
- universelles Grid für flexible Anordnung der Inhalte auf der Seite
- Rasterelement, um viele kleine Inhaltsboxen (z.B. LOGOS) perfekt fließend zu präsentieren

Bis bald

PS Ich habe zu diesem Thema aktiviert: "EMPFANGE E-MAILS UND ALARME" - aber es kommt nichts!?