Mit Hilfe der SVG-Technologie können interessante Interaktionen und Animationen auf einer Website realisiert werden. Leider ist der Browser-Support höchst unübersichtlich, denn ob etwas funktioniert oder nicht ist davon abhängig wie die SVG eingebunden wurde und welche Sprache (JavaScript, SMIL, CSS) zur Erzeugung der Animation verwendet wurde. Wir haben daher für die interne Nutzung eine Übersicht erstellt, die wir euch natürlich nicht vorenthalten wollen.
Mit Hilfe der CSS-Eigenschaft filter lassen sich zahlreiche interessante Effekte realisieren. Für die Eigenschaft backdrop-filter stehen die gleichen Effekte zur Verfügung, allerdings wirken sich die Filter nicht auf das Element selbst aus, sondern auf alles was optisch hinter dem Element liegt. Mit Backdrop Filtern ist es also beispielsweise möglich eine fixierte, halbtransparente Navigationsleiste zu erstellen, hinter der bei Scrollen alle Inhalte leicht unscharf dargestellt werden.
Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.
In komplexen Benutzeroberflächen kann es vorkommen, dass Elemente einander überlagern und die Interaktion mit verdeckten Schaltflächen erschwert wird. Mit der CSS-Eigenschaft pointer-events könnt ihr bewirken, dass Elemente vom Cursor ignoriert werden – ihr also durch ein Element hindurch klicken könnt.
SVG-Animationen mit Hilfe von CSS Keyframe-Animationen oder Transitions haben in der letzten Jahren stark an Beliebtheit gewonnen. Das Ein- und Ausblenden von Objekten, Drehungen, Verschiebungen und sonstige Transformationen stellen kein Problem dar. Doch für Morphing musste man auf Technologien wie SMIL oder JavaScript zurück greifen. Nun ist Morphing auch mit CSS möglich.
Das Hamburger-Icon hat sich als Kennzeichnung für Menüs und Navigationselemente durchgesetzt. Auch wenn das Icon kritisiert wird und nicht in allen Anwendungsfällen gut funktioniert ist es doch in den meisten responsiven Websites anzutreffen. Besonders beliebt sind animierte Hamburger-Icons die per Klick in ein Schließen-Icon überführt werden. In diesem Beitrag archivieren wir ein Code-Snippet das dieses Verhalten herstellt.
CSS Media Queries zur Definition von Breakpoints sind die entscheidende Technologie im Zusammenhang mit responsive Design. Bei komplexen Projekten stellt sich allerdings oft die Frage wie und wo im Stylesheet die Breakpoints notiert werden. Präprozessoren wie Sass bieten zahlreiche Möglichkeiten um Media Queries komfortabel zu organisieren. Doch auch CSS selbst biete die Möglichkeit mehrere Bereiche über einen Befehl anzusprechen.
Die nativen Formular-Elemente von HTML werden in verschiedenen Browsern und Betriebssystem sehr unterschiedlich dargestellt und bedient. Das widerspricht häufig der …
Moderne Web- bzw. Frontend-Entwicklung entwickelt sich rasend schnell weiter und umfasst zahlreiche Technologien und Tools. Es ist schwer den Überblick …
Ab der Version 77 unterstützt Chrome das Nachladen von Bildern und <iframes> ohne externe Hilfsmittel. Das Hinzufügen des HTML-Attributs loading=“lazy“ genügt, damit …
Webentwickler nutzen zahlreiche Tools um die Code-Qualität von Websites automatisch zu überprüfen. Neben Validatoren, Lintern und Google Page Speed sind …
Scrolling zählt zu den elementaren Bedienkonzepten im Web. Dennoch gibt es viele Probleme bei der Implementierung der gewünschten Scrolling-Funktion sowie beim …
