SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [CSS3] Die Pseudo-Klasse :target im Detail

    12. April 2012 0 Webdesign css | demo | html | internet | tutorial

    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:

    #absatz {
    color: #fff;
    }
    
    #absatz:target {
    color: #000;
    }

    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:

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

    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

    #absatz {
    float: left;
    }
    
    #absatz:target {
    float: right;
    }

    und der HTML-Aufruf

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

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

    #zielelement:target {
    opacity: 0.5;
    }

    oder das Element gänzlich ausgeblendet werden

    #zielelement:target {
    display: none;
    }

    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
    Diese Artikel könnten dich ebenfalls interessieren
    • 1
      22. Mai 2012
      [WordPress] Theme „DREI“ steht bereit
    • 0
      19. Mai 2012
      [WordPress] Mehrere Sidebars nutzen
    • 1
      9. Mai 2012
      [WordPress] Mein neues Theme ‚ZWEI‘
    • 1
      23. April 2012
      [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 →
    • 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
    • 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

      • Oliver bei Willkommen zur Testfahrt
      • 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“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • 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

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast