CSS3 Osterei und HTML5 Audio mit Surround-Sound
Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.
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:
Kommentar hinzufügen
Die Felder Name und Kommentar sind Pflichtfelder.