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] Pseudo-Spielchen

    19. Januar 2012 1 Webdesign css | demo | html | internet | tutorial

    Genau genommen ist die Überschrift nicht ganz korrekt. Es geht es hier nicht in erster Linie um CSS3, denn viele der Pseudoelemente bzw. -klassen gab es schon mit CSS2 oder früher. Dennoch wird es im Zusammenspiel mit den Möglichkeiten, die uns CSS3 bietet, erst richtig spannend. Jeder von uns, so hoffe ich zumindest, kennt die Pseudoklasse :hover. Auch :active oder :visited dürften dem ein oder anderem bekannt sein. Aber wie steht’s mit :first-letter, :before oder :after?

    Neugierig?

    Pseudoelemente oder -klassen sind, wie der Name schon sagt, keine eigenständigen Elemente oder Klassen. Sie benötigen und beziehen sich immer auf ein anderes Element oder eine andere Klasse.

    Es gibt eine ganze Reihe von Pseudoelementen und -klassen. Ich habe mal die interessantesten für euch zusammengetragen:

    • :link = für Verweise zu noch nicht besuchten Seiten
    • :visited = für Verweise zu bereits besuchten Seiten
    • :focus = für Elemente, die den Fokus erhalten, z.B. durch „Durchsteppen“ mit der Tabulator-Taste (CSS 2.0)
    • :hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
    • :active = für gerade angeklickte Elemente
    • :first-child (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften
    • :nth-child (Pseudoklasse) = das Element des Kindelements, das im Parameter aufgerufen wird, erhält die CSS-Eigenschaften
    • :first-line (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften
    • :first-letter (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften
    • :before = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll
    • :after = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll

    Schauen wir uns nun mal einige davon etwas genauer an.

    Mittels :first-child wird das erste „Kind“-Element eines „Eltern“-Elements angesprochen. So kann beispielsweise der erste Eintrag in einer Liste anders gestaltet werden:

    li {
    	color: #000;
    }
    
    li:first-child {
    	color: orange
    }

    Dementsprechend kann mit :nth-child gezielt ein bestimmtes (hier das zweite)

    li {
    	color: #000;
    }
    
    li:nth-child(2) {
    	color: orange
    }

    oder auch mehrere „Kind“-Elemente bestimmt werden (hier jedes zweite)

    li {
    	color: #000;
    }
    
    li:nth-child(2n) {
    	color: orange
    }

    Das Element :first-letter spricht das erste Zeichen eines Absatzes an. So können wir diesem beispielsweise eine größere Schrift zuweisen:

    p {
    	font-size:14px;
    }
    
    p:first-letter {
    	font-size:30px;
    }

    Kommen wir zu den heimlichen Stars der Pseudoelemente: :before und :after. Diese fügen vor oder nach einem Element einen beliebigen Inhalt ein, der mit content angegeben wird. Das können Zeichen, Text, Grafik und vieles mehr sein. Damit habt ihr ein Werkzeug zur Verfügung um per Style-Deklaration Inhalte zu definieren. Klasse, oder?

    Einfaches Beispiel:

    .box {
    	position: relative;
    	margin: 100px;
    	background: #000;
    	width: 200px;
    	height: 100px;
    	color: #fff;
    	font-size: 16px;
    	line-height: 100px;
    	text-align: center;
    }
    
    .box:before {
    	content:":before";
    	position: absolute;
    	top: -50px;
    	left: 0;
    	width: 200px;
    	height: 40px;
    	background: orange;
    	line-height: 40px;
    }
    
    .box:after {
    	content:":after";
    	position: absolute;
    	bottom: -50px;
    	left: 0;
    	width: 200px;
    	height: 40px;
    	background: red;
    	line-height: 40px;
    }

    Da :before und :after immer einen Inhalt erwarten, ist es wichtig, dass content definiert wird, auch wenn die Elemente gar keinen Inhalt ausgegeben. Habt ihr einen solchen Fall, definiert ihr dies mit Anführungszeichen ohne Inhalt:

    .box:before {
    	...
    	content: "";
    	...
    }

    Nun aber genug der Theorie. Lasst uns ein paar Beispiele ansehen. Ich habe da mal was für euch vorbereitet. Hier geht’s lang:

    Demo ansehen

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    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

    1 Kommentar

    1. manuel sagt:
      16. Februar 2012 um 19:34

      tausend dank für diese tolle webseite. hat mir echt weitergeholfen, es ist ne geile referenz.
      grüsse aus berlin

      Zum Antworten anmelden

    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