Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

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:

Screenshot der Balkengrafik

Link zur fertige Balkengrafik mit HTML

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:

Bild der Dreiecks

#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.

Perspektive

Seit 2013 liegt der Standard für CSS Transforms vor, er ist aber immer noch ein “Draft”. In den Browsern sind 3D Transforms aber längst implementiert

Bild

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.