Weniger Bilder durch CSS Icons
Vor langer Zeit gab es eine Arbeitsgruppe, die sich mit der Zukunft beschäftigte, die XHTML2 heißen sollte. In den Entwürfen war auch mal die Abschaffung des img-Tags angedacht. Zunächst mutet es skurril an, sich eine Website ohne Bilder auszudenken. Stellt man jedoch den Inhalt in den Vordergrund, dann ist es nicht mehr so absurd. Der Entwurf sah ja ohnehin vor, Medieninhalte über das object-Tag einzubinden, wozu dann auch ausgewählte Bilder gehören können. Schmuckbilder im Markup sollten der Vergangenheit angehören.
Die Zeiten haben sich geändert und jeder Gestalter nutzt Schmuckbilder nur innerhalb der CSS. Damit diese nicht zuviel Ladezeit kosten, werden sie fachgerecht in eine einzige Bilddatei zusammengesetzt und an verschiedenen Stellen mit verschieden Teilen eingeblendet. Diese sogenannten Sprites erleichtern die optische Hervorhebung von Zitaten, Aufzählungen, Loginfeldern usw. . Damit schienen alle Möglichkeiten des modernen Webdesigns ausgereizt, bis Nicolas Gallagher mit seinen CSS-GUI-Icons nachwies, dass moderne Seiten anscheinend doch ohne Bilder auskommen können, ohne nach digitaler Steinzeit anzumuten.
Nicolas Idee beruht darauf, dass er bis zu 4 Pseudoelemente erzeugt, die er innerhalb der Liste absolut positioniert. Hauptsächlich werden die Ränder der neuen Elemente gebogen und gedreht, um typische Icons damit zu erzeugen. Es geht nicht in alten Internet Explorern, funktioniert aber problemlos in der kommenden Version 9, die mittels -ms auch CSS-Transformationen beherrscht.
Bei der Konzeption einer heutigen Website muss noch berücksichtigt werden, dass mit Opera einer der wichtigsten Mobilbrowser border-radius noch nicht interpretiert. Wohl deshalb kennzeichnet der Erfinder seinem Vorschlag noch als experimentell.
Wer in der beeindruckenden Vielfalt noch etwas vermisst, findet genügend Anregungen für eigene Experimente:
/* PAGE CURL */
/* a rectangle, border-radius should hide the topright corner */
.page a:before {
left:5px;
width:8px;
height:12px;
border:2px solid #c55500;
-moz-border-radius-topright:7px
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
background:transparent;
}
/* a triangle with position on the top right corner of the rectangle */
.page a:after {
left:11px;
border-width:3.5px;
border-style:solid;
border-color:transparent transparent #c55500 #c55500 ;
margin-top:-10px;
background:transparent;
}
/* lines on the page*/
.page:after {
left:8px;
width:5px;
height:1px;
margin-top:-2px;
border-top:2px double;
border-bottom: 2px double;
border-color:#c55500;
background:transparent;
}
.page a:hover:before,
.page a:focus:before,
.page:hover:after,
.page a:active:before {
border-color:#730800;
background:transparent;
}
.page a:hover:after,
.page a:focus:after,
.page a:active:after {
border-color:transparent transparent #730800 #730800;
}
Mein Icon stellt ein stilisiertes Blatt mit umgeknickter Ecke dar. Nicolas Idee lässt sich auch auf andere HTML-Elemente übertragen, wie die
ohne Bilder zeigt. Seine Idee ist damit ein Meilenstein, der das Weblayout ähnlich voranbringen wird, wie 2003 die "Sliding Doors".
geschrieben von Pawel