kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Frontend


SVG Browser-Support für Animationen und Interaktionen

SVG

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.

Beitrag zu Ende lesen

CSS backdrop-filter – Filter auf Objekte im Hintergrund anwenden

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.

Beitrag zu Ende lesen

SVG-Grafiken in Websites/HTML-Seiten einbinden

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.

Beitrag zu Ende lesen

CSS pointer-events – Click, Tap, Mouse-Over & Co. ignorieren

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.

Beitrag zu Ende lesen

SVG-Pfade mit CSS animieren (Path-Morphing/Shape-Morphing)

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.

Beitrag zu Ende lesen

Animiertes Hamburger-Icon mit HTML, CSS und JavaScript

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.

Beitrag zu Ende lesen

Media Queries zusammenfassen und in einer Zeile schreiben

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.

Beitrag zu Ende lesen