CSS3 Transform dreht Sprite-Grafik des CSS3 Togglers - Tag 18 im CSS3 Adventskalender 2011

CSS3 Transform mit Sprite-GrafikIm Sinne einer guten Benutzerführung, sollte man als Webseitenbetreiber immer daran interessiert sein, Webseitenbesuchern jegliche Funktionen und das unter Umständen damit verbundene Verhalten von Elementen, intuitiv mittels des Designs zu vermitteln. Das heißt, der User weiß bzw. erahnt zumindest, worum es sich bei einem Element handelt und welche Funktion es erfüllt. Das erste Element einer Webseite auf dass diese Anforderung zutreffen sollte, ist die Navigation oder das Menü einer Webseite. Eine Möglichkeit dem User den hier vorgestern im Webstandard-Blog vorgestellten CSS3 Toggler noch intuitiver zu gestalten, ist die den Menüpunkten ein Icon via CSS zukommen zu lassen, welches den geöffneten (aktiven) und geschlossenen (inaktiven) Zustand der Menüpunkte zusätzlich verdeutlicht. Das kann man mit einer Sprite-Grafik bewerkstelligen, die sämtliche Ausrichtungen der Icons beinhaltet oder aber mit einem Icon und das mittels CSS3 drehen. Wie das mit wenigen Zeilen CSS zu erreicht ist, zeigt dieses CSS Tutorial.

Modernes Webdesign mit CSS - Das neue Buch!

Ideal für diesen Ansatz sind Icons die identisch sind und sich lediglich durch ihre (Aus)Richtung voneinander unterscheiden. Das kann für sogenannte Arkkordeon-Menüs wie in unserem Beispiel gelten oder aber auch für Spalten von Tabellen die zum Sortieren dienen.

Akkordeon- bzw. Toggler-Menu - Die HTML-Struktur

Das HTML-Grundgerüst dieses Navigationsmenüs basiert 1:1 auf dem Quellcode des CSS3 Togglers, der hier vorgestern veröffentlicht wurde.

CSS3 Toggler - HTML-Code
<ul class="tutorialMenu">
    <li id="coffeecards">
        <h2><a href="#coffeecards">CoffeeCards</a></h2>
        <p>
            <span>CSS3 Eigenschaften: Transform ...</span>
        </p>
    </li>
    <li id="blogcomments">
        <h2><a href="#blogcomments">BlogComments</a></h2>
        <p>
            <span>CSS3 Eigenschaften: Border-Radius, ...</span>
        </p>
    </li>
    <li id="onlineform">
        <h2><a href="#onlineform">OnlineForm</a></h2>
        <p>
            <span>CSS3 Eigenschaften: MediaQueries, ...</span>
        </p>
    </li>
</ul>

Das am Ende dieses Tutorials mit den Icons doch noch eine andere individuelle Darstellung möglich ist, basiert in erster Linie auf dem Pseudo-Element :before. Zuerst wird im folgenden Schritt allerdings erst einmal ein wenig Platz für das Icon im Menüpunkt geschaffen.

Anklickbare Elemente (Überschriften) gestalten

Die verlinkten und somit auf- und zuklappbaren Überschriftenelemente besitzen auf Basis des Ausgangswertes, wie die folgende Abbildung zeigt, noch nicht genügend Platz um das Icon vor den verlinkten Text der Menüpunkte auszurichten.

CSS3 Toggler - geschlossene ElementeBisherige initiale Darstellung des CSS3 Togglers (geschlossen)

Nun soll daher für das Icon etwas Platz geschaffen werden, so dass dieses Icon dem Besucher den jeweiligen Zustand (geöffnet bzw. geschlossen) über die Ausrichtung mitteilen kann. Dafür wird der in der Überschrift h2 enthaltene verlinkte Text mittels eines größeren Innenabstandes für die linke Seite, von 40px, eingerückt (siehe Zeile 10).

Überschriften für Icon einrücken
.tutorialMenu h2 a {
    font-size: 18px;
    display: block;
    font-weight: normal;
    color:#FFF;
    text-decoration:none;
    margin:0;
    background:rgb(144,144,144); /* Fallback */
    background:rgba(255,255,255,.3);
    padding:10px 10px 10px 40px;
    position:relative;
}

Da später nicht das gesamte Überschriftenelement gedreht werden soll, sondern lediglich das Icon, muss sich dieses in einem separaten Element befinden. Aber wie, ohne dabei den HTML-Code anfassen zu dürfen? Ganz einfach, man greift in diesem Fall auf das Pseudo-Element :before zurück. Darin wird dann das Icon als Hintergrundgrafik entsprechend ausgerichtet. Da dieses aber exakt ausgerichtet werden soll, muss auch ein Bereich definiert werden an dem sich das Icon ausrichten kann, dazu wird die verlinkte Überschrift mit position:relative als Bezugspunkt für das Icon gesetzt (siehe Zeile 11).

CSS3 Toggler - geschlossene eingerückte ElementeEingerückte initiale Darstellung des CSS3 Togglers (geschlossen)

Mit der absoluten Positionierung könnt ihr das Icon dann an einer gewünschten Stelle positionieren. Neben dieser absoluten Ausrichtung des Icons innerhalb dieses Elementes, ist die Angabe der Eigenschaft transform und des Wertes rotate(0deg). Man könnte meinen, dass dieser Wert nicht notwendig sei, da an dieser Stelle das Icon noch nicht gedreht wird. Tatsache ist aber das ohne diesen Wert, die geschlossenen Menüpunkte mit dem Icon für den geöffneten Zustand versehen werden würden und die Reihenfolge der CSS-Blöcke wie hier im im Tutorial eingehalten werden müssen.

inaktives Icon zuweisen (closed)
.tutorialMenu h2 a:before,
.tutorialMenu :not(:target) h2 a:before {
    content:"";
    position:absolute;
    width:16px;
    height:9px;
    left:15px;
    top:17px;
    background-image: url(css3-transform-transition-bg_sprite.png);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}
...

Diese soeben angelegten Eigenschaften mit den dazugehörigen Werten, haben das in einem Pseudo-Element befindliche Icon, dass dem Betrachter einen inaktiven geschlossenen Zustand suggeriert, nun optimal gedreht und ausgerichtet.

CSS3 Toggler - geschlossene Elemente mit IconEingerückte initiale Darstellung des CSS3 Togglers (geschlossen) mit Icon

Der Initiale Aufruf dieses Menüs ist somit bereits vielversprechend, allerdings soll sich die Ausrichtung dieser Hintergrundgrafik ändern. Dazu wird der vorher in Höhe und Breite vordefinierte Bereich in dem sich das Icon befindet, um 180Grad gedreht, damit nach dem Aufklappen des Menüpnktes "CoffeeCards", das Pfeil-Icon nicht mehr nach unten, sondern nach oben zeigt.

aktives Icon zuweisen = drehen (open)
.tutorialMenu h2 a:before {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}
...

Die folgende Abbildung verdeutlicht hierzu noch einmal, dass lediglich eine Abbildung des Icons notwendig ist. Alle anderen möglichen Ausrichtungen könnte man lediglich auf Basis des Transform Moduls und der Eigenschaft rotate realisieren.

Darstellung des RichtungswechselsDarstellung des Icons und der Eigenschaften die zum Richtungswechsel führen

Um das in der nun folgenden Abbildung gewünschte Ziel erreichen zu können, muss man das Icon nicht um 180 Grad im Uhrzeigersinn drehen, man könnte das Icon mit -180 Grad gegen den Uhrzeigersinn drehen. Aber man muss ja nicht unnötiger Weise Verwirrung stiften ;o)

CSS3 Toggler - aufgeklapptes aktives ElementDarstellung des CSS3 Togglers bei geöffnetem Element mit gedrehtem Icon am Beispiel des Menüpunktes "CoffeeCard"

Zusammen mit der Implementierung dieses Icons, welches über eine Sprite-Grafik zur Verfügung gestellt werden könnte (hier besteht die Sprite nur aus einer Abbdilung ;o) ) und dem verzögerten Einblend-Effekt, wurde in den letzten beiden Tutorials hier ein CSS3 Toggler geschaffen, der nicht nur ohne JavaScript auskommt, sondern zudem auch noch von allen aktuellen relevanten Browserversionen unterstützt wird.

View Sprite Transform Demo

CSS3 Toggler & Transform - Browser-Support

Wer von euch also in dem Besitz einer dieser aktuellen Versionen von Google Chrome, Safari, Firefox, Opera und dem Internet Explorer (Version 9) ist, kann die Demo-Version dieses CSS3 Tutorials auch im Browser nachvollziehen.

CSS3 Toggler - Browser-SupportBrowser-Support des CSS3 Togglers (betrifft die jeweils letzte aktuelle Version)

Dieser Artikel hat hoffentlich dazu beigetragen, dass man nicht immer nur die Elemente im HTML-Code als Basis der Möglichkeiten der Gestaltung sieht, sondern das auch Pseudo-Elemente die eine bereits recht beachtliche Verbreitung unter den Browsern genieszlig;en, berücksichtigt werden.

Viel Spaß mit CSS3!

  1. Ingo Anlauff 18 Dez 2011, 10:46

    Schönes Beispiel zum Thema CSS3! Ein kleiner Haken finde ich in der fehlenden History.back() Unterstützung. Wenn man auf die seite mit dem toggler kommt und diesen ein paar mal auf und zu klappt, danach möchte man mit dem Browser-back Button zur vorherigen Seite springen, muss man auch diesen ein paar mal betätigen. Darum bleib ich noch bei einer JavaScript Lösung wie bei einem Kunden von mir umgesetzt ...


  2. Mark 18 Dez 2011, 11:37

    Wirklich klasse Tutorial! Das mit dem drehen von Elementen habe ich bisher noch gar nicht eingesetzt. Bei dem Browsersupport sollte ich mich wohl mal damit beschäftigen. Danke für diese Inspiration!


  3. Pawel
    18 Dez 2011, 11:48

    Nette Idee, wobei man für ein Dreieck gar keine Grafik braucht, sondern mit Pseudoelementen und border-radius das Dreieck erzeugt.


  4. Webstandard-Team
    18 Dez 2011, 12:04

    @Pawel: Das ist mir natürlich bewusst und wird im meinem Buch im übrigen auch ausführlich beschrieben, aber hier ging es um das Drehen einer Sprite-Grafik ;o)


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage