This is basic prototype of a Javascript Audio Synthesizer. I’m considering to extend this early version with further features, maybe it becomes a “full-fledged” synthesizer one day.

Currently its features are Low-Pass and High-Pass Filter and as well as a delay effect with certain settings.

Update: there is also a newer version with a different effect which offers nicer sound (probably due to my improper usage of audiolet)

FontAwesome is awesome if you need some quick icons somewhere. It’s easy to integrate and very flexible in usage. FontAwesome comes shipped with some CSS animations pre-defined (fa-spin, fa-pulse), but you can very easily extend it to have other helper classes, like this:

The following CSS Code was used for this:

.fa-beat {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}

Attention: For cross-browser CSS animations you still need some vendor prefixes for older browsers. Check caniuse.com for detailed information.

Funktionsweise

Neben den entsprechenden Akkordion-Buttons befindet sich eine versteckte Checkbox.
Mithilfe des General sibling selectors (Allgemeiner Geschwister-Selektor) kann der Akkordion-Inhalt entsprechend dem Status der Checkbox verändert werden.

Also zum Beispiel:

.accordion-content {
  display:none;
}
input:checked ~ .accordion-content {
  display:block;
}