CSS3 Osterei und HTML5 Audio mit Surround-Sound

Montag, 2. April, 2012

Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.

2012-04-02-css3-osterei.jpg

Demo-Seite: https://www.axel-hah … -ei-und-html5-audio/

Divs sind per Default bekanntlich eckig. Und lassen sich seit CSS Version 3 mit border-radius abrunden. Zudem kann man für jede Ecke einen individuellen Radius bestimmen. Mit etwas Geschick kann man tolle Dinge “zaubern” - auch (mal dem nahestehenden Anlass entsprechend) Ostereier. Weitere Formen unter [1].

Weil ich keine einfarbigen Ostereier will, kann man sich einer weiteren CSS-Eigenschaft bedienen: Gradienten. Es lassen sich damit lineare Verläufe erzeugen als auch radiale. Damit haben wir den Hintergrund und radial gefärbte Eier.
Von Hand wirds kompliziert, die komplexere Verläufe zu definieren - mit [2] lassen sich die Verläufe zusammenklicken und der CSS-Code lässt sich übernehmen.

Teil 2 ist ein akustischer Bastel-Part - es entstand als Test für die Wiedergabe von Surround-Audio mit 2 Audio Tags, die mit Cross-Fading zwischen Stereo- und Surround-Varianten ein und desselben Songs umschalten (sollten).

weiterführende Links:

  1. cssportal.com - CSS3 Shapes
  2. colorzilla.com - Gradient Editor