HTML+CSS für Grafik

vorige Präsentation: Grafik im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Pixel-Bilder

Mit HTML und CSS kann man grafisch arbeiten, sogar in 3d.

Rechtecke und Balkengrafik

Block-Bildende Tags in HTML werden als Rechtecke dargestellt. Das alleine reicht schon aus um z.B. eine einfache Balkengrafik zu gestalten.

Im Artikel Accessible Data Visualization with Web Standards beschreibt Wilson Miner die Entwicklung solch einer Grafik:

CSS und Formen

Mit etwas CSS kann man von den Rechtecken zu anderen Formen gelangen. Auf der Webseite CSS Tricks: The Shapes of CSS beschreibt Chris Coyier wie man mit border-radius und transparenten rahmen Kreise, Ellipsen, Dreiecke und so weiter bauen kann:

#triangle-up {
   width: 0; height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}

An einem Standard für CSS Shapes wird gearbeitet, es gibt aber noch keine Implementierungen, siehe Draft: CSS Shapes.

Animation

Mit Keyframes kann man Animationen definieren:

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
}

@keyframes move {
  0% {
    offset-distance: 0%;
    background: blue;
  }
  100% {
    offset-distance: 100%;
    background: cyan;
  }
}

Perspektive

Mit Transforms kann man ein bisschen 3d in HTML und CSS bringen: In den Browsern sind 3D Transforms seit 2013 implementiert.

Von David DeSandro gibt es ein ausführliches Tutorial dazu.

Resume

Im Zweifelsfall sollten Sie immer die einfachste technische Lösung für ihr Problem wählen. Bei Grafik kann das ganz oft einfaches HTML + CSS sein.

Siehe auch

• Animation mit CSS von Tobias Ahlin

HTML+CSS für Grafik

vorige Präsentation: Grafik im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Pixel-Bilder