Ruben Norgall – Webelemente Erklärt

CSS Flex

Scroll-Buttons

Automatisch Nummerierte Headlines

Die automatische Nummerierung von H2-Überschriften auf einer Webseite kann mit minimalem CSS erreicht werden. Der zentrale Mechanismus basiert auf der Nutzung eines Zählers (CSS-Counter), der bei jedem H2-Element hochgezählt wird. Dadurch können Überschriften automatisch und dynamisch nummeriert werden, ohne dass im HTML-Code explizit Nummern angegeben werden müssen.

Der CSS-Code verwendet die Eigenschaft counter-reset, um den Zähler auf der obersten Ebene zu initialisieren, und counter-increment, um den Zähler bei jedem H2-Element zu erhöhen. Die Pseudo-Elemente ::before erzeugen die Nummerierung und können mit zusätzlichen Stilen, wie einem farbigen Hintergrund oder Abstand, individuell angepasst werden.

Dieser Ansatz hat mehrere Vorteile: Erstens bleibt der HTML-Code sauber und wartungsfreundlich. Zweitens wird die Nummerierung automatisch aktualisiert, wenn neue H2-Überschriften hinzugefügt oder entfernt werden. Drittens bietet die visuelle Nummerierung eine klare Struktur und erleichtert den Nutzern die Navigation auf der Seite.

Scrollbuttons - Praktisch und Sinnvoll

Scrollbuttons zu den einzelnen Sectionen sind praktisch und sinnvoll, weil sie die Benutzerfreundlichkeit einer Webseite verbessern, indem sie eine schnelle Navigation zu wichtigen Inhalten ermöglichen. Erstens reduzieren sie die Zeit, die Nutzer benötigen, um relevante Informationen zu finden. Zweitens erleichtern sie die Bedienung, insbesondere auf langen Seiten, indem sie ein klar strukturiertes Navigationssystem bieten. Drittens tragen sie zur Barrierefreiheit bei, da sie Nutzern mit eingeschränkten Eingabemöglichkeiten eine komfortable Interaktion ermöglichen.

Die automatisch erstellten Scrollbuttons ermöglichen eine einfache Navigation zu den einzelnen H2-Überschriften auf der Seite. Das zugehörige JavaScript sucht nach allen H2-Elementen, entfernt Sonderzeichen aus deren Textinhalt und setzt diesen bereinigten Text als ID für die Überschriften. Für jede Überschrift wird ein passender Button erstellt und in den Container mit der ID "scrollbuttons" eingefügt. Beim Klick auf einen Button wird sanft zu der entsprechenden Überschrift gescrollt.

Glas Card

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Der Glascard-Effekt

Der Glascard-Effekt nutzt moderne CSS-Techniken, um einen halbtransparenten, gläsernen Look für Elemente zu erstellen. Dieser Effekt wird durch die CSS-Eigenschaft backdrop-filter erzielt, die es ermöglicht, einen Weichzeichner (Blur) oder andere Filter auf den Hintergrund eines Elements anzuwenden. Dies erzeugt ein stilvolles, durchscheinendes Design, das häufig in modernen Benutzeroberflächen verwendet wird.

Zusätzlich wird das Design durch eine stilisierte Umrandung und einen Schatten ergänzt. Die Kombination aus border und box-shadow hebt das Element visuell vom Hintergrund ab und verstärkt den 3D-Look. Der Effekt ist besonders geeignet für Card-Layouts, die wichtige Inhalte hervorheben oder in optisch ansprechenden Designs eingesetzt werden sollen.

Der Glascard-Effekt ist nicht nur ästhetisch ansprechend, sondern auch vielseitig einsetzbar, da er sich gut mit verschiedenen Farbschemata und Layouts kombinieren lässt. Durch die Flexibilität von CSS können Anpassungen wie die Intensität des Blurs oder die Farbe der Umrandung leicht vorgenommen werden, um den Effekt an individuelle Designvorgaben anzupassen.

Card Slider

Card 1

Hier ist der Text von dieser Karte!

Card 2

Hier ist der Text von dieser Karte!

Card 3

Hier ist der Text von dieser Karte!

Card 4

Hier ist der Text von dieser Karte!

Der Card-Swipper-Effekt

Der Card-Swipper-Effekt bietet eine einfache Möglichkeit, durch mehrere Karten zu scrollen, wobei jede Karte zentriert fixiert wird. Dieser Effekt wird mit der CSS-Eigenschaft scroll-snap-type realisiert, die eine automatische Ausrichtung beim Scrollen ermöglicht. Die Karten "snappen" so an vordefinierten Positionen ein und sorgen für ein benutzerfreundliches Navigieren durch die Inhalte.

Jede Karte nutzt die CSS-Eigenschaft scroll-snap-align, um sich beim Scrollen an der richtigen Position zu fixieren. Der Effekt eignet sich hervorragend für Anwendungen wie Produktgalerien, Testimonials oder andere Inhalte, die in einem horizontalen Layout präsentiert werden sollen.

Das Layout ist flexibel und reagiert dynamisch auf die Inhalte. Dank der Verwendung von flexbox wird eine gleichmäßige Verteilung der Karten gewährleistet, während overflow-x: scroll sicherstellt, dass der Benutzer durch die Karten blättern kann.

Responsive Gallery Layout

Bild aus der GalerieBild aus der GalerieBild aus der GalerieBild aus der GalerieBild aus der GalerieBild aus der Galerie
Bild aus der GalerieBild aus der GalerieBild aus der Galerie
Responsive Gallery Beschreibung

Die Responsive Gallery nutzt moderne CSS-Techniken, um eine flexible und dynamische Galerie zu erstellen. Sie passt sich automatisch an die verfügbare Breite an und sorgt dafür, dass Bilder in einem harmonischen Raster dargestellt werden.

Der Galerie-Container verwendet CSS-Spalten (`columns`), um die Bilder in einer definierten Anzahl von Spalten anzuordnen, wobei die Spaltenbreite bevorzugt bei 300px liegt. Sollte nicht genug Platz verfügbar sein, reduziert sich die Spaltenanzahl automatisch, um die Inhalte optimal anzuzeigen.

Jedes Bild wird so skaliert, dass es perfekt in die jeweilige Spalte passt. Zwischen den Spalten wird ein Abstand (`column-gap`) eingefügt, um die Lesbarkeit und Ästhetik zu verbessern. Der Galerie-Container ist zentriert und auf eine maximale Breite von 1000px begrenzt, um ein ansprechendes Layout sowohl auf großen als auch auf kleinen Bildschirmen zu gewährleisten.

Die Kombination aus Flexibilität, einfacher Erweiterbarkeit und Benutzerfreundlichkeit macht dieses Layout zu einer idealen Lösung für responsive Webseiten.

Css-animationen

CSS-Leuchteffekt-Animation

Diese Leuchteffekt-Animation wurde ausschließlich mit CSS erstellt. CSS-Animationen sind effizienter als GIFs oder Videos, da sie kleinere Dateigrößen haben, schneller laden und sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen.

Grafische Elemente und ihre Vorteile im Webdesign

Moderne grafische Elemente wie Glow-Effekte, Parallax-Scrolling oder animierte Übergänge bringen nicht nur eine ästhetische Note in Webseiten, sondern können auch funktional sein. Diese Effekte kombinieren visuelle Attraktivität mit interaktivem Design, um die Benutzererfahrung zu verbessern und einen bleibenden Eindruck zu hinterlassen.

Drei Vorteile solcher grafischen Umsetzungen:

  1. Erhöhte Aufmerksamkeit: Bewegungen und visuelle Reize ziehen die Aufmerksamkeit der Besucher auf sich. Dies hilft, wichtige Inhalte hervorzuheben und die Benutzer dazu zu bringen, sich länger mit der Seite zu beschäftigen.
  2. Stärkere Markenbindung: Grafische Elemente können dazu beitragen, eine einzigartige und unverwechselbare Markenidentität zu schaffen. Ein durchdachtes Design wirkt professionell und einprägsam.
  3. Bessere Nutzerführung: Mit gezielt eingesetzten Animationen und Effekten können Nutzer durch die Seite geleitet werden, wodurch Inhalte intuitiv erfassbar werden und die Navigation verbessert wird.

Wo solche Effekte eingesetzt werden können:

  • Auf Landingpages, um Produkte oder Dienstleistungen eindrucksvoll zu präsentieren.
  • In Portfolio-Seiten, um Kreativität und technische Fähigkeiten hervorzuheben.
  • In Storytelling-Seiten, um Inhalte visuell zu unterstützen und Emotionen zu wecken.

Warum sie sinnvoll sein können:

Gut platzierte grafische Umsetzungen verleihen einer Webseite Charakter und Individualität. Sie schaffen ein Erlebnis, das sich von der Masse abhebt, und können die Conversion-Rate verbessern, indem sie Besucher dazu motivieren, länger auf der Seite zu bleiben oder bestimmte Aktionen durchzuführen. Wichtig ist dabei jedoch, die Performance und Zugänglichkeit im Auge zu behalten, um allen Nutzern ein positives Erlebnis zu bieten.

Formular

Formular Beschreibung

Formulare sind ein effizientes Mittel, um strukturierte Informationen zu sammeln. Sie ermöglichen es Nutzern, spezifische Daten in einer organisierten Weise einzugeben, die direkt in ein Backend-System integriert werden können. Im Vergleich zu einem "E-Mail senden"-Button bieten Formulare mehrere Vorteile:

Tipps, um möglichst viele Einträge zu erhalten:

  • Nur das Nötigste abfragen: Vermeide es, unnötige Informationen zu verlangen. Weniger Felder führen zu höheren Ausfüllraten. Frage nur die Informationen ab, die du wirklich benötigst.
  • Einfache Bedienbarkeit: Gestalte das Formular übersichtlich und intuitiv. Verwende klare Beschriftungen und eine gut strukturierte Anordnung der Felder, um Verwirrung zu vermeiden.
  • Klare Fragen: Stelle klare und präzise Fragen. Vermeide Mehrdeutigkeiten und unnötig komplizierte Formulierungen.
  • Visuelle Unterstützung: Verwende Platzhaltertexte und Tooltips, um den Nutzern zu zeigen, wie sie das Formular ausfüllen sollen. Dies reduziert Fehler und macht das Formular benutzerfreundlicher.
  • Fortschrittsanzeige: Bei langen Formularen ist es hilfreich, einen Fortschrittsbalken oder Schritt-für-Schritt-Anleitungen zu verwenden. Dies sorgt dafür, dass die Nutzer wissen, wie viele Felder noch auszufüllen sind.

Warum ist ein Formular besser als ein "E-Mail senden"-Button?

Ein Formular ist strukturierter und ermöglicht eine einfachere, automatische Verarbeitung der Daten. Während bei einem "E-Mail senden"-Button die Eingaben möglicherweise unübersichtlich sind und manuelle Nachbearbeitung erfordern, sind die Daten bei einem Formular direkt und sauber formatiert. Dies spart Zeit und minimiert Fehler. Zudem kann das Formular sofort auf serverseitige Validierung zugreifen, was bei einer E-Mail manuell und zeitintensiv wäre.

Paralax-effekt

Was ist der Parallax-Effekt?

Der Parallax-Effekt ist eine visuelle Technik, bei der verschiedene Ebenen eines Designs mit unterschiedlichen Geschwindigkeiten bewegt werden, um eine Illusion von Tiefe und Räumlichkeit zu erzeugen. Ursprünglich stammt diese Methode aus der Welt der Animation und Videospiele, wo sie genutzt wurde, um zweidimensionale Grafiken dynamischer wirken zu lassen. Heutzutage wird der Parallax-Effekt oft im Webdesign eingesetzt, insbesondere für moderne und ansprechende Webseiten.

Der Hauptvorteil des Parallax-Effekts liegt in seiner Fähigkeit, eine Webseite interaktiver und beeindruckender zu gestalten. Durch die unterschiedliche Bewegung von Vordergrund und Hintergrund entsteht ein optischer Reiz, der die Aufmerksamkeit der Besucher auf sich zieht. Dies kann die Verweildauer auf einer Seite erhöhen und das Markenerlebnis verbessern.

Allerdings gibt es auch einige Nachteile. Parallax-Designs können die Ladezeit einer Webseite verlängern, da oft größere Bilder und komplexere Layouts verwendet werden. Zudem kann der Effekt auf älteren Geräten oder bei schwacher Internetverbindung ruckeln, was die Benutzererfahrung beeinträchtigen könnte. Ebenso ist es wichtig, den Effekt sparsam einzusetzen, da übermäßiger Einsatz von Bewegung für manche Nutzer ablenkend oder sogar unangenehm wirken kann.

Trotz dieser Herausforderungen bleibt der Parallax-Effekt eine beliebte Methode, um Webseiten einzigartig und ansprechend zu gestalten, wenn er mit Bedacht eingesetzt wird.

Wendekarten

Vorderseite

Das ist die Vorderseite.

Rückseite

Das ist die Rückseite.

Vorderseite

Das ist die Vorderseite.

Rückseite

Das ist die Rückseite.

Vorderseite

Das ist die Vorderseite.

Rückseite

Das ist die Rückseite.

Wendekarten Beschreibung

Die Wendekarten nutzen CSS-3D-Transformationen, um eine visuelle Darstellung mit Vorder- und Rückseite zu erzeugen. Beim Hovern über eine Karte dreht sich diese sanft um die Y-Achse und zeigt die Rückseite an. Diese Animation wird mit `transform` und `perspective` erreicht.

Jede Karte besteht aus einem Container (`flip-card`), der die Perspektive definiert, und einem inneren Element (`flip-card-inner`), das die tatsächliche Drehung durchführt. Vorder- und Rückseite der Karten werden mit `backface-visibility` versteckt, um sicherzustellen, dass nur eine Seite gleichzeitig sichtbar ist.

Der gesamte Kartenbereich (`cardsection`) ist responsiv gestaltet und passt sich durch `flex-wrap` automatisch an die verfügbare Breite an. Die Karten sind somit ideal für interaktive Benutzeroberflächen und dynamische Inhalte geeignet.

Vorteile gegenüber altmodischen Lösungen:

  • Interaktivität: Wendekarten ermöglichen eine ansprechende und interaktive Präsentation von Informationen, ohne zusätzliche Klicks oder Seitenwechsel. Dies verbessert die Benutzererfahrung erheblich.
  • Platzersparnis: Mit Vorder- und Rückseite bieten die Karten die Möglichkeit, doppelt so viele Inhalte auf begrenztem Platz darzustellen, wodurch der verfügbare Bildschirmplatz effizient genutzt wird.
  • Ästhetik: Die sanften 3D-Animationen schaffen einen modernen und professionellen Look, der das Design optisch aufwertet und den Eindruck von Innovation vermittelt.
  • Performance: Im Gegensatz zu Bildern oder externen Animationen werden Wendekarten mit reinem CSS umgesetzt, was die Ladezeit der Webseite minimiert und für eine bessere Performance sorgt.
  • Anpassungsfähigkeit: Dank responsivem Design passen sich die Karten flexibel an verschiedene Bildschirmgrößen und Geräte an, wodurch sie sowohl auf Desktop- als auch auf Mobilgeräten optimal funktionieren.

Wendekarten eignen sich hervorragend für Bereiche wie Produktpräsentationen, Quizkarten, Teamseiten oder jede andere Anwendung, bei der kompakt viele Informationen dargestellt werden sollen.

Weiterer Spaß folgt