201027Apr

Webentwicklung: 30 CSS-Alternativen zu JavaScript

Es muss nicht immer JavaScript sein — beim "Speckyboy Design Magazine" hat man 30 reine CSS-Lösungen gesammelt, die als Alternative zu JavaScript-Funktionen eingesetzt werden können. Dazu zählen Lightboxes, erweiterte Image Maps, Hintergrundbild-Effekte, Sprechblasen oder gar Accordions. Die aufgezählten Beispiele funktionieren unterschiedlich gut und nicht immer in allen Browsern (Internet Explorer wird in manchen Fällen nicht beachtet). Dennoch dürften bei den CSS-Kunstwerken interessante Snippets dabei sein, die auch anderweitig eingesetzt werden können.

Speckyboy Design Magazine - 30 Pure CSS Alternatives to Javascript

Während bei vielen Beispielen das CSS3-Attribut ":target" für besondere Effekte genutzt wird, kommt beispielsweise die "CSS Image Maps"-Demonstartion auch ohne CSS3 aus. Hier wird ein Container mit Zusatzinformationen bei Maus-Ereignissen ein- und ausgeblendet. Dies wird durch folgenden CSS-Code erreicht:

  • ul#continents3 li a span {
  • display:none;
  • }
  •  
  • ul#continents3 li a:hover span {
  • display:block;
  • }

Ein weiteres Tool stellt "SlickMap CSS" dar, mit dem sich CSS-Sitemaps erstellen lassen. Die Auflistung des Magazins ist also sehr gelungen und gehört in die Lesezeichen.