vorige Präsentation: Grafik im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation SVG - Vektor Grafik
Mit HTML und CSS kann man grafisch arbeiten, sogar in 3d.
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:
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.
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
Von David DeSandro gibt es ein ausführliches Tutorial dazu.
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.
vorige Präsentation: Grafik im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation SVG - Vektor Grafik
/
#