Reading time:

Es wird bunt!

This article was published on 30th January 2014.
Please consider that some informations are not relevant anymore. Also, most old articles are in german.

Während sich die deutschen Wintersport-Athleten auf ihre neue Kleiderordnung einstellen, teste ich mal wieder ein paar CSS-Möglichkeiten um mich für die Umsetzung einer ziemlich bunten Seite zu wappnen.

CSS-Filter gibt es schon so einige, dass Filter “hue-rotate” war mir allerdings bisher neu. Ich erstelle also ein DIV mit einem komplementären Farbverlauf, diagonal über die komplette Seite. Ich habe den Verlauf entfernt und das ganze mit meinem Logo bei Codepen nachgebaut. Diesem SVG gebe ich eine CSS-Animation mit einem hue-rotate von 0-360deg und siehe da, die Drogen sind überflüssig!

See the Pen hue-rotator by Chris Jahn (@slcr) on CodePen.

@keyframes huerotator {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

svg {
  animation: huerotator 20s infinite alternate;
}

Um ein Colour-Banding des Verlaufs zu vermeiden, habe ich noch das praktische Noisy-Script eingebunden und ab geht die wilde Fahrt. Die Umsetzung der Seite, sollte sie denn diesen Teil noch beinhalten, gibt es dann bald auch zu sehen… Der Farbverlauf wurde entfernt und eine Codepen-Demo eingebunden.

Categories Development, Technik