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.
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.