5202

ein Blog über technische Fragen zu Blogger

CSS3 Farbverlauf für ein Seiten-Gadget

von
Jaja, die CSS-Spielereien - gestern habe ich noch geschrieben "seit kreativ" und heute bin ich selber am ausprobieren, nämlich ein 'regenbogenfarbenes' Seiten-Gadget mittels CSS3 Gradienten zu erzeugen. Hier das Ergebnis:





Mit CSS3 sind selbst einfache Farbverläufe für einen Hintergrund ziemliche Schreibarbeit - Webkit [Safari, Chrome], Mozilla [Firefox] und Presto [Opera] haben jeweils eine eigene Syntax und der zukünftige W3C-Standard muss natürlich auch berücksichtigt werden. Hier die CSS für den Regenbogen-Farbverlauf für vier 'Oberpunkte' im Blogger Seiten-Gadget:
.tabs-inner .widget li:first-child a  {
  background: -moz-linear-gradient(left, #f61911, #c69d3a);
  background: -webkit-linear-gradient(left, #f61911, #c69d3a);
  background: -o-linear-gradient(left, #f61911, #c69d3a);
  background: linear-gradient(left, #f61911, #c69d3a);
}
.tabs-inner .widget li:nth-child(2) a {
  background: -moz-linear-gradient(left, #c69d3a,  #59ba64);
  background: -webkit-linear-gradient(left, #c69d3a, #59ba64);
  background: -o-linear-gradient(left, #c69d3a,  #59ba64);
  background: linear-gradient(left, #c69d3a,  #59ba64);
}
.tabs-inner .widget li:nth-child(3) a {
  background: -moz-linear-gradient(left, #59ba64, #4bdab3);
  background: -webkit-linear-gradient(left, #59ba64, #4bdab3);
  background: -o-linear-gradient(left, #59ba64, #4bdab3);
  background: linear-gradient(left, #59ba64, #4bdab3);
}
.tabs-inner .widget li:last-child a {
  background: -moz-linear-gradient(left, #4bdab3, #114bea);
  background: -webkit-linear-gradient(left, #4bdab3, #114bea);
  background: -o-linear-gradient(left, #4bdab3, #114bea);
  background: linear-gradient(left, #4bdab3, #114bea);
}
Yeah, ich erinnere mich wie jemand mal behauptet hat, "CSS sei die einfache Möglichkeit das Aussehen einer Website zu kontrollieren“. Betonung lag auf 'einfach'. SCNR