Logo

FÜNF – WordPress-Theme | Olli's Theme-Testblog

Navigation anzeigen ↓
  • Herzlich willkommen
  • Über mich
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
↑ Navigation schließen
  • ↑ Oben
  • 12
    Apr
    2012
    0

    [CSS3] Die Pseudo-Klasse :target im Detail

    Ich habe vor kurzem in diesem Artikel einige Pseudo-Elemente vorgestellt und auch Beispiele für den praktischen Einsatz aufgezeigt. Ein Element habe ich dabei bewusst ausgelassen, da es sich definitiv lohnt, es genauer vorzustellen: die Pseudo-Klasse :target.

    Wie der Name schon verrät (target (englisch) = Ziel), wird die Klasse aktiv, wenn das dazugehörige Element aufgerufen oder Ziel einer Aktion ist. Mittels :target können bestimmte Elemente oder Bereiche auf der Webseite angesprochen und formatiert werden.

    So lässt sich beispielsweise die Schriftfarbe ändern, wenn das entsprechende Element aufgerufen wird. Die simple Style-Deklaration dafür wäre wie folgt:

    [css]#absatz {
    color: #fff;
    }

    #absatz:target {
    color: #000;
    }[/css]

    Stellt sich nur die Frage, wie die ID absatz als Ziel aufgerufen werden kann. Vielleicht ist bekannt, dass IDs als Ankerpunkt genutzt werden können. Beispielsweise kann ich mit dem Link

    http://www.olivergast.de/gb/#comments

    direkt zum Kommentarformular des Gästebuchs springen, ohne das Gästebuch aufrufen und zum Kommentarformular scrollen zu müssen.

    Und so können wir im obigen Beispiel durch einen direkten Link auf das Element dessen Schriftfarbe ändern:

    [html]<a class="button" href="http://www.einbeispiel.de/seite/#absatz">Schriftfarbe ändern</a>[/html]

    Klar soweit?

    Das Zielelement kann beliebig formatiert werden. Gerade im Zusammenspiel mit transition und keyframe bietet das unzählige Möglichkeiten.

    Noch ein Beispiel? Auf Knopfdruck soll der Fluss eines Elements von links nach rechts verschoben werden.

    Die Style-Deklaration

    [css]#absatz {
    float: left;
    }

    #absatz:target {
    float: right;
    }[/css]

    und der HTML-Aufruf

    [html]<a class="button" href="#absatz">Float nach rechts</a>[/html]

    Denkbar sind viele Möglichkeiten das Zielelement zu formatieren. So kann die Sichtbarkeit von Elementen verändert werden

    [css]#zielelement:target {
    opacity: 0.5;
    }[/css]

    oder das Element gänzlich ausgeblendet werden

    [css]#zielelement:target {
    display: none;
    }[/css]

    und vieles mehr.

    Die Kehrseite der Medaille

    Die Idee ist sicher großartig, allerdings gibt es ein Problem: der Ankerpunkt, also das ID-Element, wird immer am oberen Rand des Browser-Fensters angezeigt, wenn der Webseiteninhalt größer als das Browserfenster ist. Klickt ihr bei folgendem Beispiel auf einen Button,

    wird das Element an den oberen Rand des Browserfensters verschoben.

    Das ist leider sehr unschön; die Beispiele auf der Demo-Seite machen das deutlich. Abhilfe gibt es nach meiner Kenntnis bisher nicht.

    Auf der Demo-Seite gibt es weitere Beispiele. Dort findet ihr unter anderem eine einfache Bildergalerie, bei der die Bilder auf Knopfdruck vergrößert werden.

    Demo ansehen
    Veröffentlicht von olga am 12. April 2012 | Keine Kommentare
    Kategorien: Webdesign
    Schlagworte: css | demo | html | internet | tutorial
    Diese Artikel könnten dich ebenfalls interessieren
    • [WordPress] Theme "DREI" steht bereit
    • [WordPress] Mehrere Sidebars nutzen
    • [WordPress] Mein neues Theme 'ZWEI'
    • [WordPress] 'EINS' – Mein erstes WordPress-Theme

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Seitenanfang ↑
    • 239 Artikel
    • 292 Kommentare
    • Artikel RSS-Feed
    • Kommentar RSS-Feed
    • © FÜNF – WordPress-Theme angetrieben von Wordpress
    • Theme 'FUENF' von Oliver Gast
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme "DREI" steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit "transform"
      • Ronny Reicher bei [Word 2010] Sprungliste (zuletzt verwendete Dokumente) unter Windows 7 funktioniert nicht mehr
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360