CSS Grid Garden: Die Karotten wässern
CSS Grid Garden ist ein Onlinespiel aus der digitalen Feder von Thomas Park. Park ist in Entwicklerkreisen nicht zuletzt durch sein Spiel Flexbox Froggy bekannt. Mittels des letzterem brachte er uns die Grundkenntnisse der Verwendung von CSS Flexbox nahe. In „CSS Grid Garden” befasst sich Park mit dem Eigenschaftenpaket des CSS Grid.
Natürlich darf man nicht erwarten, der CSS Grid Zenmeister zu sein, bloß weil man unfallfrei durch das Spiel gekommen bist. Aber für den Einstieg ist der Grid Garden bestens geeignet. Man wird gar nicht merken, dass man etwas lernst.
Park leitet dich durch 28 Level, in denen man auf unterschiedliche Weise Gartenpflege betreiben musst. Zunächst geht es darum, einzelne Pflanzen, die im Grid angeordnet sind, gezielt mit Wasser, welches sich an einer anderen Stelle im Grid befindet zu versorgen.
Hierzu schreibt man passende CSS-Anweisungen, die dann hoffentlich das gewünschte Ergebnis zeitigen. Park nimmt dich dabei an die Hand und steigert den Schwierigkeitsgrad nur ganz behutsam. Das Ergebnis des von Ihnen eingetippten CSS sieht man direkt im rechts angeordneten Grid. Das Prinzip entspricht exakt jenem des Vorgängers „Flexbox Froggy”.
Polyglott und quelloffen
„CSS Grid Garden” steht in englischer, spanischer, polnischer, russischer, französischer und portugiesischer Sprache zur Verfügung. Park stellt das Spiel via Github unter der MIT-Lizenz öffentlich bereit, so dass man unkompliziert etwa weitere Übersetzungen hinzufügen könntest. Park selber arbeitet stets an neuen Leveln. Immerhin fehlen dem Spiel bisher noch einige Aspekte des CSS Grid-Konzepts.
In diesem Beitrag stellt Park seinen Ansatz ausführlicher vor.
Wenn man sich bislang noch nicht mit CSS Grid auseinandergesetzt hat, dann ist das Onlinespiel „CSS Grid Garden” der perfekte Einstieg. Dabei lernt man auch gleich die Unterschiede zu Flexbox richtig einschätzen. Gerade um diesen Punkt gibt es offenbar in Entwicklerkreisen noch einige Verwirrung.
Zu guter Letzt sei noch dieses Cheatsheet zu CSS Grid empfohlen. Viel Erfolg!
CSS-Background-Blends: Überblendungseffekte wie mit Photoshop
Seit CSS3 ist es möglich, mehrere Hintergründe auf ein Element anzuwenden. Dabei werden diese Hintergrundbilder oder -farben einfach übereinander gelegt. Sind Transparenzen innerhalb der Hintergründe vorhanden, sorgen sie dafür, dass der darunter liegende Hintergrund hindurchscheint. Mit den neuen CSS3-Überblendungseffekten gibt es nun weitere Möglichkeiten, mehrere Hintergründe miteinander zu kombinieren.
Hintergründe anlegen und Effekt auswählen
Zunächst einmal müssen mehrere Hintergründe per „background“-Eigenschaft angelegt werden. Sollen mehrere Hintergrundgrafiken und beziehungsweise oder -farben verwendet werden, werden diese einfach per Komma voneinander getrennt hintereinander aufgelistet. Anschließend gibt man über die Eigenschaft „background-blend-mode“ die Art der Überblendung an.
body { background: url("wolken.jpg"), url("burg.jpg"); background-blend-mode: multiplay;}
Original-Grafiken und per „multiply“ übereinander gelegte Grafiken
Im Beispiel werden zwei JPEG-Dateien als Hintergrundgrafiken verwendet. Da JPEG-Dateien keine Transparenz besitzen, wird ohne Überblendungeffekt nur die erste der beiden angegebenen Dateien angezeigt. Durch die Angabe der Eigenschaft „background-blend-mode“ mit dem Wert „multiply“ werden beide Grafiken miteinander multipliziert.
Überblendungseffekte wie in Photoshop
Neben dem „Multiplizieren“-Effekt gibt es weitere Überblendungseffekte. Sie alle erinnern an die Überblendungseffekte für Ebenen aus Photoshop. Das überrascht nicht, da Adobe an der Entwicklung dieser Effekte für CSS3 mitgewirkt hat. So lassen sich Hintergründe mit den Effekten „Weiches Licht“ („soft-light“) und „Hartes Licht“ („hard-light“), „Abdunkeln“ („darken“) und „Aufhellen“ („lighten“), „Negativ muliplizieren“ („screen“), „Ineinanderkopieren“ („overlay“), „Farbig abwedeln“ („color-dodge“) und „Farbig nachbelichten“ („color-burn“), „Differenz“ („difference“), „Ausschluss“ („esclusion“), „Farbwert“ („hue“), „Farbe“ („color“), „Sättigung“ („saturation“) und „Luminanz“ („luminosity“) anwenden.
Damit sind fast alle Überblendungseffekte aus Photoshop abgedeckt. Wer die CSS3-Effekte mit denen aus Photoshop im Einsatz miteinander vergleicht, wird exakte Übereinstimmungen feststellen.
Beim Einsatz von „background-blending-mode“ ist zu beachten, dass der Effekt sich immer auf alle Hintergründe auswirkt.
body { background: url("wolken.jpg"), url("burg.jpg"); background-blend-mode: lighten;}
Original-Grafiken und per „lighten“ übereinander gelegte Grafiken
Im Beispiel wird der „Aufhellen“-Effekt auf beide JPEG-Grafiken angewendet. Dies führt dazu, dass der Hintergrund insgesamt nur weiß ist. Um den Effekt nur auf den ersten definierten Hintergrund anzuwenden, muss angegeben werden, dass der zweite Hintergrund ohne Effekt dargestellt werden soll.
body { background: url("wolken.jpg"), url("burg.jpg"); background-blend-mode: lighten, normal;}Im zweiten Beispiel wird für jeden der beiden Hintergründe ein eigener Effekt definiert, wobei der Wert „normal“ dafür sorgt, dass kein Überblendungseffekt angewendet wird. Es ist natürlich auch möglich, für jeden Hintergrund einen ganz anderen Effekt anzuwenden.
body { background: url("wolken.jpg"), url("burg.jpg"), url("sonstwas.jpg"); background-blend-mode: lighten, multiply, normal;}Der letzte Hintergrund sollte jedoch immer auf „normal“ gesetzt sein, da kein weitere Hintergrund folgt, auf den der Überblendungseffekt dafür angewendet werden könnte. Für einfache Hintergründe ist es in der Regel nicht nötig, die Überblendungseffekte per CSS3 zu definieren, da sie sinnvoller direkt in Photoshop angelegt und die Grafiken entsprechend exportiert werden. Aber für animierte Übergänge („transition“-Eigenschaft) können damit schöne Effekte erzielt werden.
Ob nur Hintergrundgrafiken oder auch -farben verwendet werden, spielt keine Rolle. Jeder definierte Hintergrund wird als eine Ebene betrachtet, auf der ein Effekt angewendet wird. Auch CSS3-Verläufe werden berücksichtigt.
body { background: url("wolken.jpg"), red; background-blend-mode: lighten, normal;}Browserunterstützung
Derzeit unterstützen Chrome ab Version 35, Firefox ab Version 30 und Opera ab Version 22 die Eigenschaft „background-blend-mode“. Dies sind die derzeit aktuellen Versionen der drei Browser. Für Safari ist eine Unterstützung ab Version 8 angekündigt.
CSS-Klassen sinnvoll benennen
Klar ist es klasse, dass man Klassen in CSS frei benennen kann. Aber mit großer Macht kommt große Verantwortung, um es mal mit Stan Lee zu sagen. Benennt man Klassen nun also so, dass man es klasse findet, könnte es sein, dass man die Klassen alsbald doch nicht mehr so klasse finden kann. Klar soweit?
Denn das grundlegende Prinzip der Anwendung von Stylesheets wird bisweilen falsch verstanden. Damit ist nicht die Definition der Klassen gemeint, sondern deren Benennung.
Sehen wir uns einen Auszug einer typischen CSS-Datei an:
h1.blau { font-size: 18px; color:blue;}h1.rot { font-size:18px; color:red;} Hier werden zwei Varianten eines H1-Tags definiert. Die dazugehörige HTML-Datei könnte jetzt so aussehen:
<h1 class="blau">Erste Überschrift</h1><h1 class="rot">Noch eine Überschrift</h1> Fast alles in Ordnung, aber auch nur fast. Was passiert wenn der verantwortliche Designer einem sagt, dass die blauen Überschriften jetzt in Schwarz dargestellt werden sollen? Eigentlich ganz einfach: Man ändert einfach im Stylesheet die entsprechende Angabe wie folgt:
h1.blau { font-size:18px; color:black;} Diese Änderung genügt, damit alle Überschriften die Anfangs noch blau waren, nun schwarz dargestellt werden. Alle sind glücklich, nur man wahrscheinlich nicht. Denn die Bezeichnung der ersten H1-Klasse ist immer noch h1.blau. Man müsste, eigentlich sollte, aber an und für sich schon müsste, im Stylesheet und in allen HTML-Dateien die Bezeichnung ändern. Gerade bei vielen HTML-Dateien eine mühselige Angelegenheit und auch nicht im Sinne der Benutzung von Stylesheets, die ja schließlich Arbeit sparen sollen.
Was kann man also tun? Benenne die Klassen nicht nach ihrer Formatierung, sondern nach deren Sinn. Hier einige Beispiel für die richtige Anwendung:
h1.first { font-size:18px; color:blue;}h1.foo { font-size:18px; color:red;}span.important { font-weight: bold;}span.unimportant { font-size: 14px;}a.nolink { text-decoration:none;} Somit können die Stylesheets in Zukunft geändert werden, ohne dass die HTML-Dateien angefasst werden müssten.
Vier CSS-Eigenschaften, die man kennen und nutzen sollte
Mit der Einführung von CSS3 haben sich die Gestaltungsmöglichkeiten für Websites sehr verändert. Vor allem Animationen und Transparenzen werden seitdem häufig eingesetzt. Doch es gibt auch eine Reihe von Eigenschaften, die nur selten Verwendung finden. Dabei ist mangelnde Browserunterstützung meist kein Grund mehr, auf diese Möglichkeiten zu verzichten. Vier solcher zu Unrecht vernachlässigter CSS3-Eigenschaften solltet ihr bei eurem nächsten Projekt daher unbedingt mal ausprobieren.
CSS3-Tipp 1: Individuelle Rahmen mit „border-image“
Die individuelle Gestaltung von Rahmen war in den Zeiten vor CSS3 faktisch gar nicht möglich. Zwar gab es eine Auswahl vordefinierter Rahmen – zum Beispiel einfache, doppelte und gepunktete –, aber sehr viel mehr war nicht machbar.
Mit der CSS3-Eigenschaft „border-image“ hingegen lassen sich Rahmen ganz individuell über eine Grafik gestalten. Dazu wird die Grafik in neun Bereiche eingeteilt. Die acht äußeren Bereiche stellen dabei den Rahmen beziehungsweise die Rahmenecken dar.
p { border: 30px solid transparent; border-image: url("rahmen.png") 30 round;}Das Beispiel zeigt, wie ein Rahmen definiert wird. Zunächst wird per “url()” die Webadresse der Grafik angegeben. Der zweite Wert definiert, wie die Grafik in ihre neun Bestandteile zerlegt werden soll. Im Normalfall sind alle neun Flächen gleich groß (also eine Drittelteilung). Man kann aber auch andere absolute Werte in Pixel (ohne Angabe einer Einheit) oder prozentuale Werte (dann mit Prozentzeichen) angeben.
Der letzte Wert gibt an, ob die Linien einfach nur wiederholt (repeat“), wiederholt und dabei gerundet („round“), oder ob sie nicht wiederholt und dafür einfach auf die gesamte Breite beziehungsweise Höhe gezogen werden sollen („stretch“).
Die Breite des Rahmens wird nach wie vor per „border“ beziehungsweise „border-width“ definiert. Um den Standardrahmen zu verbergen, solltet man die Rahmenfarbe wie im Beispiel auf „transparent“ setzen.
„border-image“ wird von allen gängigen Browsern wie dem Internet Explorer, Chrome, Firefox und Safari unterstützt.
CSS3-Tipp 2: Nummerierung mit „counter-reset“ und „counter-increment“
Nummerierte Listen mit dem „<ol>“-Element sind seit jeher kein Problem. Schwieriger wird es jedoch, wenn man jenseits dieses Elementes zum Beispiel Überschriften innerhalb eines Dokumentes automatisch nummerieren möchte. Hier kommen die verschiedenen „counter“-Eigenschaften zum Einsatz.
Zunächst definiert man einen Counter für dein Dokument, indem man der Eigenschaft „counter-reset“ einen beliebigen Namen vergibst. Diese Eigenschaft setzt den definierten Counter also wieder auf Anfang. Man kann beliebig viele unabhängige Counter definieren.
body { counter-reset: kapitel;}Anschließend wählt man ein Element, auf welches man den Counter anwenden möchtest und weist ihm die Eigenschaft „counter-increment“ mit dem Counternamen zu. Über die Funktion „counter()“ kannt man anschließend per „::before“ oder „::after“ die Nummerierung ausgeben lassen.
h2::before { counter-increment: kapitel; content: "Kapitel " counter(kapitel) ": ";}„counter-reset“ und „counter-increment“ werden von allen gängigen Browsern unterstützt.
CSS3-Tipp 3: Bilder einpassen mit „object-fit“
Statische Webdesigns findet man immer seltener. Zunehmend sind Layouts responsiv oder fluid, sodass sich Elemente immer dem zur Verfügung stehenden Platz anpassen.
Bei Bildern ist dies immer ein wenig problematisch. Häufig werden sie bei unzureichendem Platz einfach herunterskaliert. Mit der Eigenschaft „object-fit“ gibt es jedoch verschiedene Möglichkeiten, wie man sie anpasst. Dazu definiert man zunächst eine Breite und Höhe für das Bild. Wenn diese ein abweichendes Seitenverhältnis besitzen, kommt „object-fit“ zum Einsatz.
Mit dem Wert „cover“ sorgt die Eigenschaft dafür, dass das Bild immer sein Seitenverhältnis beibehält und die gesamte Fläche der „“-Elementes ausfüllt. Dabei werden allerdings rechts und links beziehungsweise oben und unten Bereiche abgeschnitten, damit das Bild die gesamte Fläche ausfüllen kann.
Alternativ besteht mit dem Wert „contain“ die Möglichkeit, das Bild so zu skalieren, dass bei Beibehaltung des Seitenverhältnisses immer das gesamte Bild sichtbar ist. Im Gegensatz zu „cover“ entstehen Ränder am linken und rechten beziehungsweise oberen und unteren Rand.
Bis auf den Internet Explorer unterstützen alle gängigen Browser diese Eigenschaft.
CSS3-Tipp 4: Texte beschneiden mit „text-overflow“
Nicht nur Bilder müssen bei besonders kleinen Auflösungen beschnitten werden. Manchmal sind auch Texte zu lang. Bei Fließtext ist dies in der Regel kein Problem. Dieser wird einfach umbrochen. Aber gerade bei Überschriften mit langen Wörtern oder Texten, die ausschließlich einzeilig dargestellt werden, kann es problematisch werden.
Die CSS3-Eigenschaft „text-overflow“ verhindert, dass Texte einfach über den zur Verfügung stehenden Platz hinausragen, indem sie abgeschnitten und mit Auslassungspunkten versehen werden.
Die Eigenschaft funktioniert aber nicht alleine, sondern in Kombination mit der Eigenschaft „overflow“ und dem Wert „hidden“.
h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}Im Beispiel wird der Text eines „<h2>“-Elementes per „text-overflow“ beschnitten. Der Wert „ellipsis“ sorgt dafür, dass der beschnittene Text mit Auslassungspunkten versehen wird. Per „white-space“ wird zudem verhindert, dass der Text mehrzeilig wird.
Wird statt „ellipsis“ der Wert „clip“ verwendet, erfolgt die Beschneidung ohne Auslassungspunkte.
Alle gängigen Browser unterstützen diese Eigenschaft.
So einfach hübscht man Tabellen auf
Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie man solche Tabellen mit CSS3 ansprechend und dynamisch gestaltet, zeige ich Ihnen in einem zweiteiligen Tutorial, dessen ersten Teil man gerade liest.
Mein Beispiel ist eine Bundesliga-Tabelle, die ich in einem Projekt vor einigen Jahren tatsächlich baruchte und die gut geeignet ist, Ihnen die Tabellengestaltung näher zu bringen. Beachte bitte Platzierungen und Teilnehmer nicht. Das ist alles Schnee von gestern. Hier geht es nur ums Coding.
In diesem Tutorial werden wir verschiedene CSS2-/CSS3-Selektoren anwenden, die uns Eingriffe in das HTML ersparen. Auch das Einbinden von Grafiken wird überflüssig, denn Verläufe und Schatten erzeugen wir kurzerhand mit CSS. Dazu kommen weitere kleine CSS3-Schnipsel, die unsere Tabelle für moderne Browser bereichern. Hier ist ein Ausschnitt, wie unsere Tabelle nachher im Safari oder Firefox aussehen wird:
Wir starten mit einer HTML-Basis ohne IDs und Klassen
Wir werden unsere Tabelle sehr einfach halten, nämlich ganz ohne Klassen, IDs oder gar zusätzliche Div-Container. Warum? Weil es mehrere Vorteile bietet:
- übersichtlicherer Code
- kürzere Ladezeiten
- weniger Wartungsbedarf.
Legen wir also los:
Unsere Tabelle enthält ein caption-Element, in dem ein kurzer Titel zur Erläuterung des Inhalts enthalten ist. Es folgt der Tabellenkopf (thead) mit den Spaltenüberschriften sowie der Tabellenrumpf (tbody) mit den Inhalten der Tabelle. scope="col" wird zudem verwendet, um deutlich zu machen, dass sich die Tabellenköpfe auf die gesamte Spalte beziehen.
Nachdem wir unser Grundgerüst erstellt haben, können wir uns direkt an die Gestaltung machen. Zurzeit sieht unsere Tabelle noch so aus:
Zuerst nehmen wir noch ein paar grundsätzliche Einstellungen vor:
* { margin:0; padding:0;}body { font: 13px/1.5 Arial, sans-serif; margin:50px;}h1 { font-size:20px; margin-bottom:10px;}Damit setzen wir alle Innen- und Außenabstände auf 0 und definieren die Grundeinstellung der Schrift und Abstände für body und h1.
Die Grundgestaltung der Tabelle
/* Tabelle */table { background:#e9eae8; background:rgba(105,115,100,.15); -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; border-collapse:collapse; border-spacing:0; text-align:left; width:660px;}Den Hintergrund geben wir in RGBA (RGB plus Alpha-Kanal) an. Das ist deshalb sinnvoll, weil wir später noch verschiedene Grauabstufungen des Farbwerts verwenden und dann nur den Alpha-Kanal ändern müssen. Als Fallback-Lösung können wir in der Zeile davor den Hexadezimal-Wert für unseren Freund den Internet Explorer notieren, der bis einschließlich Version 8 kein RGBA versteht.
Dann folgt die Anweisung für abgerundete Ecken in der Kurzschreibweise, wobei die Werte ähnlich wie zum Beispiel bei margin im Uhrzeigersinn angegeben werden, hier also oben links, oben rechts, unten rechts, unten links. Dann weisen wir noch an, dass die Zellenrahmen übereinander liegen sollen und der Text linksbündig ist. Zum Schluss erhält die Tabelle eine Breite, die verhindert, dass sie bei einem kleineren Browserfenster unschön zusammengeschoben wird.
Die Tabellenüberschrift (»caption«)
caption { background:#656e70; background:-webkit-gradient(linear, left top, left bottom, from(#656e70),color-stop(50%, #515b5c), color-stop(50.1%, #465153), to(#323e40)); background:-moz-linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40); background:linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40); -webkit-border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; color:#fff; font-size:15px; font-weight:bold; padding:10px 0 10px 10px; text-align:left; text-shadow:0 -1px 1px rgba(0,0,0,.5);}small { color:#a3a8a9;}Hier schlägt uns einiges an CSS entgegen, was in diesem Fall an den Farbverläufen liegt, die wir rein mit CSS erstellen. Diese werden über die bekannte CSS-Eigenschaft background realisiert, allerdings müssen wir der Wert für Safari und Firefox unterschiedlich angeben. Aber der Reihe nach. Zunächst definieren wir die Fallback-Lösung für Browser, die keine Verläufe darstellen können. Anschließend folgt der Verlauf für Webkit-Browser, der wie folgt entsteht: Zunächst kommt der Typ, hier ein linearer Verlauf, dann folgt der Startpunkt left top, sowie der Endpunkt left bottom, wir erhalten also einen senkrechten Verlauf.
Es folgt die Farbe für den Verlaufsstart. Bei einem einfachen Verlauf würde nun die Farbe für das Verlaufsende folgen. In unserem Fall möchten wir aber einen leichten Spiegelungseffekt erzielen und brauchen dafür zwei Farben mehr. Dazu gibt man einen color-stop an, der bei der Hälfte der Box einsetzt, angegeben durch einen Prozentwert. Es folgt ein zweiter color-stop, der direkt an den vorherigen anschließt, deshalb ein Wert von 50.1%, sowie die Schlussfarbe, mit der der Verlauf endet. Puh, geschafft.
Die nun folgende Firefox-Anweisung liest sich dagegen wesentlich leichter, ist intuitiver und drückt das gerade beschriebene in wesentlich weniger Code aus. Zuletzt wird die offizielle W3C-Deklaration geschrieben, die aber glücklicherweise genau der von Firefox entspricht, sodass wir sie einfach ohne Browserpräfix übernehmen können.
Es folgen wieder abgerundete Ecken, kennen wir ja, sowie weitere Einstellungen bzgl. der Schriftanzeige, unter anderem ein text-shadow, der nach oben gerichtet für einen leichten Einstanz-Effekt sorgt. Die vier Werte, die angegeben werden, sind der Abstand nach links, der Abstand nach oben (in diese Fall ist der Wert negativ, so dass der Schatten nach oben zeigt), die Unschärfe (je höher der Wert, desto weicher wird der Schatten) und die Farbe. Hier hilft RGBA, den Schatten noch realistischer zu machen.
Zuletzt wird noch mit small unser Datum gestylt.
Das war jetzt eine Menge Holz, mündet aber schon in einem schönen Effekt. So sieht unsere Tabelle jetzt aus:
Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten, wie das mit Illustrator oder Excel und Co. möglich ist. Mit CSS3 kannt man deine Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Im heutigen Teil 2 des Beitrags zur Tabellenaufhübschung mit CSS3 erläutere ich, wie man Spalten aufpeppen und bestimmten Zeilen automatisch ein anderes Aussehen gibst als dem Rest der Tabelle.
Zellen aufpeppen
Es folgen ein paar Anweisungen, die unsere Tabelle weiter verschönern. Da sind zum einen die Zellen des Tabellenkopfes, die einen Hintergrund und einen inneren Schatten erhalten. Streng genommen ist das in unserem Fall kein Schatten, sondern eine Aufhellung. Weil dazu aber die CSS-Eigenschaft box-shadow verwendet wird, sprechen wir der Einfachheit halber trotzdem von Schatten.
th { background:#7aae5e; border-bottom:1px solid rgba(255,255,255,.7); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2); -o-box-shadow:inset 0 1px 0 rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); padding:6px 10px;}td { border-bottom:1px solid #fafafa; border-bottom:1px solid rgba(255,255,255,.5); padding:6px 10px; color:rgba(0,0,0,.7);}tr:last-child td { border-bottom:none;}In unserem Fall missbrauchen wir die Schatten-Eigenschaft, um die obere Kante des Tabellenkopfes etwas aufzuhellen. Das erhöht den Kontrast und sorgt für einen ganz leichten 3D-Effekt. Dabei geben wir zunächst den Wert inset an, weil der Schatten nach innen gehen soll. Dann folgen die vier Werte, die bereits weiter oben erklärt wurden.
Zuletzt bekommen die Zellen des Tabellenrumpfes eine untere Linie, etwas mehr Raum mittels padding sowie eine Farbe für die Schrift. Mit der Pseudoklasse :last-child wird für die letzte Zeile die Linie wieder aufgehoben.
Spalten anhübschen
Unsere Tabelle sieht nun schon ganz passabel aus, braucht aber noch etwas Feinschliff, weshalb wir uns jetzt um die einzelnen Spalten kümmern. Bei Spalte 1 möchten wir die Zahlen rechtbündig haben. Da wir im Quelltext keine Klassen vergeben haben, müssen wir das td-Element über den Pseudoklasse :first-child ansprechen.
Es folgt die wichtigste Spalte, die des Vereins. Diese ist über das a-Element leicht anzusprechen, da wir sonst in der gesamten Tabelle keinen Link vergeben haben.
/* 1. Spalte: Platz */td:first-child { text-align:right; padding-right:24px;}/* 2. Spalte: Verein */td a { background:transparent url(vereine.png) 0 0 no-repeat; color:#000; font-weight:bold; opacity:.7; padding:3px 0 7px 30px; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out;}Nun möchten wir natürlich die entsprechenden Vereinslogos für jeden Verein unterbringen. Zuvor haben wir ja schon ein Bild mit allen Logos eingebunden, lediglich die Position muss noch für jeden Verein angepasst werden.
Aber wie findet CSS die einzelnen Vereine, wenn wir keine Klassen vergeben haben? Hier hilft uns nun der Attribut-Selektor. Dieser greift hier auf das HTML-Attribut href im Start-Tag des a-Elements zu. Im Quelltext haben wir ja jeden Verein verlinkt. Diesen Link können wir über CSS ausfindig machen. So sieht das ganze aus:
td a[href*="bremen"] {background-position:0 0;}td a[href*="dortmund"] {background-position:0 -30px;}td a[href*="frankfurt"] {background-position:0 -60px;}td a[href*="freiburg"] {background-position:0 -90px;}td a[href*="hamburg"] {background-position:0 -116px;}td a[href*="hannover"] {background-position:0 -150px;}td a[href*="hoffenheim"] {background-position:0 -180px;}td a[href*="kaiserslautern"] {background-position:0 -210px;}td a[href*="koeln"] {background-position:0 -240px;}td a[href*="leverkusen"] {background-position:0 -267px;}td a[href*="mainz"] {background-position:0 -300px;}td a[href*="gladbach"] {background-position:0 -330px;}td a[href*="bayern"] {background-position:0 -360px;}td a[href*="nuernberg"] {background-position:0 -390px;}td a[href*="pauli"] {background-position:0 -420px;}td a[href*="schalke"] {background-position:0 -450px;}td a[href*="stuttgart"] {background-position:0 -480px;}td a[href*="wolfsburg"] {background-position:0 -510px;}Im ersten Selektor wird also geprüft, ob die Zeichenkette bremen im Link enthalten ist. So lässt sich nun jedem Verein über die Hintergrundposition das entsprechende Logo zuweisen.
Es folgt die Angabe zu :hover. Noch mal zurück zu den Links, hier hatten wir zuvor eine Transition angegeben. Dabei wird in unserem Beispiel für 0,2 Sekunden eine kleine Animation vollzogen, die auf alle Eigenschaften zutrifft, die sich beim Überfahren der Maus ändern.
Spalten per :nth-child() ansprechen
Als nächstes verbessern wir noch einzelne Spalten etwas, wobei wir uns die CSS3-Pseudoklasse :nth-child() zunutze machen. Hiermit sprechen wir gezielt einzelne Kind-Elemente an. In unserem Fall sind es die jeweiligen Zellen, die eine bestimmte Spalte bilden. td:nth-child(3) spricht also das dritte td an, welches Kindelement von tr ist. Damit können wir die gesamte dritte Spalte ansteuern.
/* Spalten zentrieren */td:nth-child(3),td:nth-child(7),td:nth-child(8),td:nth-child(9) { text-align:center;}/* 9. Spalte: Punkte */td:nth-child(9) { font-weight:bold;}/* 10. Spalte: Hinweise */td:nth-child(10) { font-size:11px; font-style:italic;}Zeilen tunen
Nachdem wir nun unsere Spalten aufgepeppelt haben, verdienen ebenso die einzelnen Zeilen eine genauere Betrachtung. Und zwar wollen wir hier die Bedeutung der Platzierungen noch etwas deutlicher hervorheben. Mein Beispiel ist schon etwas älter und bildet die aktuellen UEFA-Regularien nicht vollständig ab. Also, nicht wundern.
Das ist der entsprechende Code:
/* Zeile 1-3 Championsleague + Quali */tr:nth-child(-n+3) td { background:#c3c7c1; background: -webkit-gradient(linear, left top, left bottom, from(#d9dcd8),color-stop(50%, #d2d5d0), color-stop(50.1%, #cbcec9), to(#c3c7c1)); background: -moz-linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1); background: linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);}/* Zeile 4-5 Euroleague */tr:nth-child(-n+5):not(:nth-child(-n+3)) td { background:rgba(105,115,100,.07)}/* Zeile 16-18 Absteiger und Relegation */ tr:nth-last-child(-n+3) td { background:rgba(105,115,100,.07)}tr:nth-last-child(-n+2) td { background:rgba(105,115,100,.13)}tr:last-child td:first-child { -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px;}tr:last-child td:last-child { -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}Es gibt zahlreiche Bundesliga-Tabellen die hier viel mit Farbe arbeiten und dadurch die Tabelle schön (oder weniger schön) bunt machen. Unsere Tabelle soll hier eher dezent bleiben und it manrch die Vereinslogos schon bunt genug.
Deshalb verändern wir lediglich den Grauwert der Spalten, beziehungsweise gönnen uns für die ersten drei noch einmal einen leichten Spiegeleffekt. »Die ersten drei Zeilen«, das bedeutet in der CSS-Sprache td:nth-child(-n+3). Heißt auf deutsch, nehmen wir für n irgendeine positive Zahl, ob jetzt 1, 5 oder 5.000, so wird die Summe innerhalb der Klammern nie größer als drei und deckt somit die ersten drei Zeilen ab. Diese erhalten einen Verlauf und heben sich so etwas von den übrigen Plätzen ab.
Ich verzichte hier darauf, dem Qualifikationsplatz eine gesonderte Gestaltung zu geben, das wäre zu viel des Guten und nicht unbedingt übersichtlicher. In der Hinweisspalte sieht man immer noch, dass es sich nur um einen Quali-Platz handelt.
Zeilen 4 und 5 gezielt ansprechen
Etwas abheben möchten wir allerdings noch die Europaleague-Plätze, diese erhalten einen dunkleren Hintergrund. Um jetzt nur die Zeilen 4 und 5 anzusprechen, greifen wir noch tiefer in die CSS-Trickkiste. Der erste Teil der Anweisung tr:nth-child(-n+5) ähnelt unserem vorherigen Beispiel, allerdings jetzt für die ersten fünf Zeilen.
Da wir aber die ersten drei Zeilen nicht verändern wollen, müssen wir sie wieder ausschließen, was uns mit Hilfe der Pseudoklasse :not() gelingt. Die Anweisung in der Klammer wird also nicht berücksichtigt, somit bleiben Zeile 4 und 5 übrig.
Abdunkeln per RGBA
Etwas anders gehen wir bei den Absteigern beziehungsweise dem Relegationsplatz vor. Hier machen wir uns den Vorteil von RGBA zu nutze, indem wir zunächst die letzten drei Zeilen etwas abdunkeln und dann die letzten beiden Zeilen noch mal etwas dunkler machen. Somit sind wir fast am Ziel.