Kategorie: CSS
SVG: das flexibelste Bildformat
Inline-SVGs sind wohl die flexibelste Möglichkeit, grafische Elemente aller Art in eine Website einzubinden. Dabei wird der Code direkt als svg
Element in das HTML eingebettet. Dadurch lassen sich sogar mit Javascript und CSS einzelne Elemente (zB g
der path
) ansteuern und manipulieren.
Ich habe ein paar Beispiele zusammengestellt.
Animationen mit SVG
Die SVG (Skalierbare Vektor-Grafik) besteht hier aus einem einzelnen mit animiertem Farb-Verlauf als
stroke
-Attribut direkt als SVG-Animation. Das d
-Attribut, das den Weg des Pfades beschreibt, wird dann erst mit Javascript eingefügt und dadurch in Schwingung gebracht. Mittels requestAnimationFrame
-Schleife wird das Attribut mit jedem Frame neu gesetzt.
Charakter-Animation mit SVG
Bei diesem Beispiel habe ich zuerst mit dem kostenlosen Open Source Vektor-Programm Inkscape eine Grafik erstellt.
Bereits in Inkscape habe ich zwei Ebenen erstellt für das verschiedene Aussehen der Augen und Augenbrauen. Das abgespeicherte SVG habe ich dann manuell noch etwas bereinigt und ins HTML eingefügt.
Die eigentliche Animation erfolgt dann rein durch CSS. Mit der :hover
-Pseudo-Klasse werden die benannten Ebenen dann ein- und ausgeblendet.
Bei diesem Beispiel ging es mir eher um ein Proof-Of-Concept als um umfassende Charakter-Erstellung, daher ist die Grafik eher simpel gehalten.
Layout mit SVG
Der wohl praktischste Nutzen von SVGs für Websiten sind allgemeine Layout-Elemente. Kurvige oder abgeschrägte Layouts waren früher nur mit Hintergrund-Grafiken lösbar. Mit SVG sind solche Elemente jetzt problemlos umsetzbar.
Durch die Flexibilität sind auch Media-Queries möglich. Damit kann die Grafik vollständig von den Eigenschaften des Anzeigegerätes abhängig gemacht werden.
Perspektive ändern beim Scrollen
Ich wollte einen Effekt erzielen, wo beim Scrollen sich die Perspektive ändern. Dafür muss man nur beim body
die CSS-Eigenschaft perspective
setzen und sicherstellen, dass auch in njedem Browser innerhalb des body
–
Elementes gescrollt wird.
Umsetzung
Folgender Code erzeugt den gewünschten Effekt:
html, body { width: 100%; height: 100%; overflow: hidden; } body { overflow: auto; perspective: 500px; }
Den vollständigen Code kann man sich bei Codepen ansehen.
FontAwesome: Pulsierendes Herz
FontAwesome ist klasse, wenn man mal schnell Icons haben möchte. Unkompliziert einzubinden und flexibel in der Anwendung. In den Stylesheets von FontAwesome sind bereits einige wenige nützliche Animationen mit dabei (fa-spin
, fa-pulse
), aber man kann sich sehr einfach weitere, sinnvolle Helfer-Klassen definieren, wie zum Beispiel hier:
Folgender zusätzlicher SCSS-Code wurde dafür verwendet:
.fa-beat { animation:fa-beat 5s ease infinite; } @keyframes fa-beat { 0% { transform:scale(1); } 5% { transform:scale(1.25); } 20% { transform:scale(1); } 30% { transform:scale(1); } 35% { transform:scale(1.25); } 50% { transform:scale(1); } 55% { transform:scale(1.25); } 70% { transform:scale(1); } }
Hinweis: Damit die CSS-Animation browser-übergreifend funktioniert braucht man in manchen Browsern immer noch Vendor-Prefixes: vgl. caniuse.com