Bessere Formulare dank HTML5 und CSS3 - iX 09/2012

Mit Hilfe meines Arbeitgebers das MedienKombinat ist es mir möglich gewesen, einen Artikel in der Septemberausgabe der Fachzeitschrift iX zu veröffentlichen. Im Artikel geht es um HTML5 Fomulare, deren Styling mit CSS3 und den Vorteilen für mobile Endgeräte. Wer Interesse hat, kann mittlerweile alles online nachlesen.

Ich bedanke mich bei allen Beteiligten und wünsche euch viel Spaß damit. Wenn es Fragen dazu gibt, könnt ihr die hier oder im Forum der iX stellen.

Ich weiß ja nicht, wie ihr es mit Weihnachten haltet, aber ich mag es. Die Familie ist da, jeder kriegt Geschenke und es gibt wahnsinnig viel lecker Essen UND DAS DREI TAGE LANG! (Bis auf die Geschenke versteht sich.. obwohl.. wäre auch mal cool eigentlich ) Kommen wir zum eigentlichen Thema des Tages: CSS Transitions!

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

(Opera unterstützt noch nicht alle Properties, IE erst ab Version 10)

Animationen bei Mouse-Hover

Prinzipiell dient Transition dazu eine Änderung am Styling eines Elements zu verlängern. Natürlich kennen wir alle schon die Peusoklasse :hover und auch, dass wir damit Eigenschaften des Normalzustandes überschreiben können. Transition greift genau an diesem Punkt an. Wir können bestimmen, wie lang diese Änderung dauert, welche Eigenschaften davon betroffen sind, ob es eine Pause gibt, bevor die Änderung beginnt und das Muster, in der sie abläuft (dazu wird eine Bézierkurve benutzt). Es entsteht eine kurze Animation.

Syntax

Die Kurzform lautet transition, danach folgen bis zu vier Werte, die gleichzeitig auch als einzelne Befehle benutzt werden können, ähnlich wie das bei padding oder background auch der Fall ist.

1. transition-property – gibt an, welche Eigenschaft animiert werden soll, Default ist all
2. transition-duration – ein dezimaler Wert in Sekunden, der für die Länge der Transition steht, Default ist 0s (0 Sekunden, also keine Transition sichtbar)
3. transition-timing-function – mehrere Schlüsselwörter möglich, eigenen Kurven-Beschreibungen möglich, Default ist ease
4. transition-delay – Länge der Pause in Sekunden bis Transition beginnt, Default ist 0s

Da der Standard bisher nicht zu 100% fertig ist, unterstützen alle Browser Transition mit dem jeweils bekannten Prefix. An einem Beispiel wollen wir erreichen, dass sich die Textfarbe eines Links bei Mouse-Over innerhalb einer Sekunde von Blau zu Rot ändert.

CSS

1
2
3
4
5
6
7
8
9
10
11

a {
	color:blue;
	-moz-transition:all 1s ease 0s; /*Firefox*/
	-webkit-transition:all 1s ease 0s; /*Safari + Chrome*/
	-o-transition:all 1s ease 0s; /*Opera*/
	-ms-transition:all 1s ease 0s; /*Internet Explorer*/
	transition:all 1s ease 0s; /*W3C Standard*/
}
a:hover {
	color:red;
}

Man könnte auch nur transition:1s schreiben und den Rest den Defaultwerten überlassen aber ein Beispiel sollte ausführlicher sein. Der Effekt bliebe übrigens der gleiche, wenn wir ausschließlich transition-duration (samt allen Prefixes) verwenden würden, weil im Beispiel nur die Rede von einer Sekunde ist.

Was vielleicht noch erwähnenswert ist..

• die Transition-Eigenschaften schreibt man immer in den Selector ohne Pseudoklasse
• und der Wert für transition-duration sollte immer zwischen 0s und 1s liegen

Alles, was länger dauert, bringt dem User nicht das Geringste und die Webseite wirkt dadurch nur unglaublich träge.

Ergebnis

Bewege die Maus über diesen Link

Wie wir leicht sehen, läuft der Wechsel von Blau nach Rot in einer Sekunde ab und nicht wie normal sofort nachdem die Maus über dem Element schwebt.

Dadurch, dass es viele Properties gibt, die durch Transition beeinflusst werden können, gibt es extrem viele Möglichkeiten schöne und sinnvolle Effekte zu erzielen. Auch ich benutze es an einigen Stellen.. dem Weiterlesen-Button, Bilderrahmen, den Social Media Buttons links, das Einblenden des Text-Overlays bei verwandten Artikeln usw.

Fazit

CSS Transitions sind eine prima Sache zum Spielen und ausprobieren. Einige nervige Javascript-Lösungen lassen sich komplett damit ersetzen und User haben das Gefühl es mit einer edlen, unaufdringlichen Website zu tun zu haben.

CSS Transition Demo

Ich habe auch noch eine weitere Demo geschrieben, die zeigt, was man alles so animieren kann. Trotzdem ist auch sie nur die Spitze des Eisberges, ich bin sicher, dass ihr euch noch viel tollere Beispiele ausdenken werdet.

Viel Spaß also beim Experimentieren und da es unwahrscheinlich ist, dass ich dieses Jahr noch einen Artikel schreibe, wünsche ich euch schonmal einen guten Start ins neue Jahr (das wäre dann schon 2012)!

Problem?

Dass der IE6 manchmal ein übler Troll sein kann und sein Nachfolger IE7 ihm in dieser Hinsicht in nichts nachsteht, brauch ich euch ja wohl kaum erzählen (ich habs jetzt natürlich trotzdem gemacht, einfach um ein cooles Intro zu haben ). Jedenfalls bin ich neulich erst auf einen richtig schönen Fix für ein bekanntes Problem bezüglich der Darstellung von Buttons im IE gestoßen.

Kennt ihr das: Ihr habt einen Button oder ein Submit-Input und gebt dem etwas Padding und schon zerschießt es euch im IE das halbe Formular, weil dieser Browser denkt, er müsse den Dicken markieren, indem er den Padding-Wert verdoppelt?

Na dann seit ihr hier goldrichtig!

Das Problem

Wir haben also einen button oder ein input mit dem type="submit" (der Bug betrifft beides gleichermaßen) auf unserer Seite, was der tut ist uns an dieser Stelle reichlich egal.

HTML

1

<button>Button</button>

Normalerweise rate ich immer dazu die Buttons so zu lassen, wie sie sind und so wenig wie möglich am Styling zu ändern. Natürlich kommt es jedoch vor, dass sie dadurch nicht richtig ins “Corporate Design” einer Firma “fitten”. Und da Kunde==König immer wahr ist, muss man hier und da etwas nachhelfen, dass die Buttons auch zum Rest passen. Sehr häufig muss dazu beispielsweise links und rechts das Padding erhöht werden, damit das alles nicht so zusammengeklatscht aussieht.

CSS

1
2
3

button {
	padding:3px 10px;
}

Alles gut denkt man, aber beim X-Browser-Test macht man schnell große Augen: Im IE6 und IE7 sind es nicht nur 10 Pixel links und rechts sondern mindestens doppelt so viele. Hier ein Vergleich:

Die türkisen Linien sind nachträglich eingezeichnet worden..

Die Lösung

In solchen Momenten möchte man am liebsten in die Tastatur beißen oder die Maus durch die Gegend werfen (@Wireless-Maus-User: tut es nicht!). Aber das ist gar nicht nötig, denn die Lösung ist ganz einfach, nahezu trivial.

Alles, was wir tun müssen, ist eine Zeile CSS mehr zu schreiben:

CSS

1
2
3
4

button {
	overflow:visible;
	padding:3px 10px;
}

Durch overflow:visible hört der IE auf, mehr Padding zu vergeben als eigentlich gewollt. Das Schöne daran ist, dass er 100% valide ist und keinerlei Nachteile hat. Der Tag ist damit gerettet und alle können quietschvergnügt nach Hause gehen!

Frontend-Developer 1:0 Internet Explorer

IE rafft es nicht!

Heute habe ich mal wieder über etwas gestaunt, das der Internet Explorer nicht kann. Folgendes Szenario: Ihr habt ein Bild auf dem unter anderem ein Schriftzug steht, z. B. “Jetzt hier Registrieren!”. Weil die Schrift mit tollen Effekten und dergleichen ausgestattet ist, bindet ihr sie direkt ins Bild ein. Im Frontend wird das Bild über ein img-Tag ausgegeben und soll jetzt verlinkt werden. “Ok..”, dachte ich mir, “..leg ich halt einen transparenten Link darüber!” – Denkste!

Hier erst einmal ein Beispiel, damit ihr auch versteht, was ich meine. Wie nehmen ein Bild und einen Link und packen einen Wrapper darum. Der Wrapper bekommt position:relative, damit wir den Link per position:absolute über das Bild schieben können. Der Link soll natürlich transparent sein, wir wollen ja nicht irgendwie das Bild “übermalen” sondern nur einen anklickbaren Bereich schaffen, also wird der Text versteckt.

Problembeispiel (alle IE-Versionen)

HTML

1
2
3
4

<div class="wrapper">
	<img src="http://www.getfirebug.com/img/firebug-logo.png" alt="Bild"/>
	<a href="http://www.getfirebug.com">Link</a>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12

.wrapper {
	position:relative;
	width:293px;
}
a {
	height:70px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	width:185px;
	top:0;
}

Ergebnis

Link

Ich habe die wichtigen Bereiche nochmal hervorgehoben, der blaue Rahmen umrandet den Wrapper, der rote den Link.

Natürlich ist diese Denkweise nicht verkehrt, sie hat nur einen Haken: In allen von mir getesteten Versionen des Internet Explorers (IE6-9) hat das nicht funktioniert! Im IE kann man den Link einfach nicht anklicken, alle anderen Browser haben damit absolut kein Problem.

Ich dachte erst es liegt daran, dass das Bild den Link im IE irgendwie überdeckt, weil ich kein z-index benutze. Dann habe ich versucht den Text über padding-top und overflow-hidden zu verstecken und dachte der IE eventuell damit besser zurecht. Nichts hat geholfen.. wenn ich den Text nicht versteckte, konnte man nur den Text anklicken, nicht aber den Rest der klickbaren Fläche. Erst als ich das Bild aus dem Quellcode entfernt hatte, konnte man ganz plötzliche die komplette transparente Fläche anklicken.

Natürlich war ich schon wieder kurz vorm Platzen.

Lösung

Ein ähnliches Problem mit nicht anklickbaren Links hatte ich zwar schon mal im IE6 aber ich hätte nie gedacht, dass IE8 und 9 hier immer noch solche Probleme haben. Aber was soll’s, eine Lösung musste her und es gibt zwei Wege, wie man das Problem umgehen kann..

1. das Bild nicht als img-Tag einbinden, sondern dem Wrapper/Link als background-image zuweisen
2. dem Link ein transparentes Hintergrundbild verpassen

In meinem Fall war letztere Variante günstiger, ich würde aber prinzipiell eher zu Variante eins raten, da sie sauberer ist. Und ja, sobald der Link eine Hintergrundfarbe oder ein Hintergrundbild bekommt, kann man ihn auch im IE anklicken, verrückte Welt oder?

Beispiel mit Lösungsvariante 1

HTML

1
2
3

<div class="wrapper">
	<a href="http://www.getfirebug.com">Link</a>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.wrapper {
	background:transparent url(http://www.getfirebug.com/img/firebug-logo.png) repeat 0 0;
	height:89px;
	position:relative;
	width:293px;
}
a {
	height:70px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	width:185px;
	top:0;
}

Ergebnis

So klappts auch im IE!

PS: Firebug 1.6 wurde heute veröffentlicht, schnell runterladen oder updaten und die Beispiele damit untersuchen!

Bax-Shadow wird dazu verwendet einem Element einen oder mehrere Schlagschatten zu verleihen. Allerdings verhält sich Box-Shadow etwas anders als das uns schon bekannte Text-Shadow. In diesem Teil erfahrt ihr, wie man Box-Shadow richtig benutzt und was für ein Potential diese Property hat.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Syntax

Box-Shadow ist ähnlich aufgebaut wie Text-Shadow, unterscheidet sich aber in einigen wesentlichen Dingen. Allen voran können wir noch nicht auf browserspezifische Präfixe verzichten, d. h. dass Webkit-Browser und aktuelle Firefox-Versionen Box-Shadow noch mit ihren jeweiligen Kürzeln implementiert haben.

Der Code für einen normalen, cross-browser-kompatiblen Schlagschatten lautet daher wie folgt:

1
2
3
4
5

div.boxshadow {
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* Firefox - alte Syntax */
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* Safari, Chrome - alte Syntax */
	box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* alle neuen Browser, W3C Standard */
}

Wie bei text-shadow auch, stehen auch hier die Werte für Verschiebung entlang der X-Achse, Verschiebung entlang der Y-Achse, Schattengröße und Schattenfarbe. (Da alle Browser, die Box-Shadow unterstützen auch den RGBa-Farbraum darstellen können, bietet es sich an, diesen hier gleich mal zu verwenden.)

Obiger Code erzeugt dieses Bild:

Ebenso können wir bei box-shadow mehrere Schatten durch Komma getrennt angeben:

1
2
3
4
5
6

div.moreboxshadows {
	/*Lila, Gruen, Gelb*/
	-moz-box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
	-webkit-box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
	box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
}

Man beachte, dass der Schatten, der an erster Stelle steht, auch “oben auf” liegt. Das heißt, er ist dem Betrachter am nächsten. In diesem Fall ist der gelbe Schatten ganz unten, darüber wird der grüne und zum Schluss der lila Schatten gezeichnet. Durch die RGBa-Farbwerte kommt es außerdem zur Mischung der Farben.

Zwei weitere (optionale) Parameter

Box-Shadow hat aber noch zwei weitere Parameter, der erste ist inset. Ist inset gesetzt, verläuft der Schatten nach innen statt nach außen. Ein Beispiel:

1
2
3
4
5

div.innerboxshadow {
	-moz-box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 0 10px #000;
	box-shadow:inset 0 0 10px #000;
}

Der andere Parameter ist ein vierter Pixel-Wert, der den Grad der Überfüllung des Schattens angibt – auch negative Werte sind erlaubt! Damit kann man den Schatten kräftiger/schwächer erscheinen lassen. Verdeutlicht nochmal am allerersten Beispiel:

1
2
3
4
5

div.strongboxshadow {
	-moz-box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
	box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
}

Durch alle sechs Parameter haben wir im Prinzip die gleichen Möglichkeiten zum Erstellen eines Schattens, die wir auch aus Photoshop kennen.

Einstellungen Schlagschatten in Photoshop

Box-Shadow funktioniert übrigens ganz wunderbar im Zusammenspiel mit Border-Radius und es lassen sich zusammen mit weiteren CSS3 Properties allerhand schöne Dinge anstellen. Ein gutes Beispiel sind Buttons:

Fazit

Soweit zu den eher spektakulären visuellen Neuerungen, die mit CSS3 und den neuen Browserversionen Einzug halten werden. Einiges davon ist heute schon ohne große Bedenken einsetzbar und wird in Zukunft gehäuft anzutreffen sein. Box-Shadow ist da keine Ausnahme und meiner Meinung nach ein sehr Nützliches Tool, um schnell und unproblematisch diverse Schatteneffekte zu erzeugen. Das alles spart uns Zeit und wiedereinmal Bandbreite, denn wo sonst aufwändige Grafiken für Schatten erstellt werden mussten, kommt jetzt nur noch ein Dreizeiler zum Einsatz. Schöne neue Welt. Mit diesem Teil endet die CSS3 im Detail-Reihe, ich hoffe ihr konntet einiges mitnehmen und nutzt das Gelernte.

Wie der Name schon vermuten lässt, wird es möglich sein, bzw. ist es schon möglich, beliebigen Text einen Schatten zu verleihen. Das hat natürlich hauptsächlich ästhetische Vorzüge, kann aber unter Umständen sogar die Lesbarkeit verbessern oder zumindest dem Benutzer helfen, bestimmte Texte eher wahrzunehmen. Text-Shadow ist keinesfalls mehr eine Technik von morgen, im Gegenteil, schon heute trifft man (meist unbewusst) schattierten Text auf vielen Webseiten an.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Text-Shadow ist ganz simpel und kommt sogar schon ohne browserspezifische Präfixe aus. D.h. alle oben genannten Browser unterstützen text-shadow in seiner finalen Form.

1
2
3

div.textshadow {
	text-shadow:10px 10px 3px #666;
}

Wie wir sehen können, hat text-shadow vier Parameter:

1. X-Abstand: Dieser Längenwert gibt an, wie weit der Schatten entlang der X-Achse verschoben wird (nach links/rechts versetzt). Negative Werte sind erlaubt.
2. Y-Abstand: Dieser Längenwert gibt an, wie weit der Schatten entlang der Y-Achse verschoben wird (nach unten/oben versetzt). Negative Werte sind erlaubt.
3. Größe: Ein weiterer Längenwert, der angibt, wie weit sich der Schatten ausbreiten soll. Ein Wert von 0 erzeugt einen sehr harten Schatten, je höher der Wert, desto unschärfer wird er.
4. Farbe: Hier kann man jeden in CSS erlaubten Farbwert einsetzen (auch RGBa!).

Obiger Code erzeugt dieses Bild:

Man kann das Ganze aber auch noch weiter treiben und mehrere Schatten erzeugen. Dazu werden hinter dem ersten Schatten einfach noch weitere deklariert und mit Komma voneinander getrennt.

1
2
3

div.moreshadows {
	text-shadow:10px 10px 0 #aaa,-10px -10px 3px #f00,0 0 10px #00f;
}

Ihr seht, damit kann man auch ne ganze Menge dummes Zeug fabrizieren aber dazu ist Text-Shadow nicht gedacht. Hier mal ein paar schöne Beispiele, wie man Text-Shadow richtig einsetzen kann.

a) Gravur-Effekt 1

b) Gravur-Effekt 2

c) Schlagschatten

Fazit

Schaut euch eure Lieblingsseiten im Internet mal genauer an. Ich wette, da gibt es einige, die bereits Text-Shadow verwenden. Auch ich nutze es auf diesem Blog. Der Text in der Sidebar hat einen diffusen Schatten, damit er leichter auf dem dunklen Hintergrund zu lesen ist, die Artikelüberschriften haben einen schwachen Schlagschatten und die Ähnliche Artikel-Box benutzt den Gravur-Effekt 1. Text Shadow ist für mich ein nützliches Werkzeug geworden um Text besser und schöner hervorzuheben. Weitere Pluspunkte sammelt Text-Shadow mit der breiten Unterstützung an der Browser-Front und der schlanken Syntax. Viel Spaß!

Columns oder zu deutsch Spalten gibt es schon eine Ewigkeit. Uns allen sind sie aus den klassischen Printerzeugnissen wie Zeitungen und Magazinen bekannt. Prinzipiell machen sie nichts anderes als Text in schmalere Spalten aufzuteilen.

Der Vorteil des mehrspaltigen Satzes als Textgestaltung liegt darin, dass insbesondere bei großformatigem Papier die Zeilenlänge kurz gehalten wird [...]

… und damit die Lesbarkeit des Textes erhöht wird. Durch CSS3 haben Webdesigner nun die Möglichkeit, diese Art des Satzes auch in Webseiten anzuwenden.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Columns haben mehrere Eigenschaften, die wir uns im Einzelnen anschauen werden. Gecko- und Webkitbrowser haben die Technik wieder mit ihren Präfixen implementiert.

column-count

column-count gibt die Anzahl der Spalten an, in die der Text aufgeteilt werden soll.

1
2
3
4
5
6
7

div.columns {
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari, Chrome */
	column-count:2; /* Opera, IE, W3C Standard */
	border:4px solid #adf;
	padding:10px;
}

Folgender Fließtext wird durch obigen Code in zwei Spalten aufgeteilt. Die Breite einer Spalte wird immer aus der Breite des Elternelements durch die Anzahl der Spalten berechnet.

column-width

Anstatt eine feste Anzahl Spalten anzugeben, kann man auch eine ungefähre Breite einer Spalte deklarieren. Dabei wird die Spaltenanzahl automatisch errechnet. Ihr versteht sicherlich, dass es wenig Sinn macht column-count und column-width gleichzeitig zu verwenden..

1
2
3
4
5
6
7

div.columns {
	-moz-column-width:100px; /* Firefox */
	-webkit-column-width:100px; /* Safari, Chrome */
	column-width:100px; /* Opera, IE, W3C Standard */
	border:4px solid #adf;
	padding:10px;
}

column-gap

Das ist natürlich noch nicht alles, mit column-gap könnt ihr den Abstand zwischen den Spalten festlegen..

1
2
3
4
5
6
7
8
9
10

div.columns {
	-moz-column-count:2; /* Firefox */
	-moz-column-gap:7em;
	-webkit-column-count:2; /* Safari, Chrome */
	-webkit-column-gap:7em;
	column-count:2; /* Opera, IE, W3C Standard */
	column-gap:7em;
	border:4px solid #adf;
	padding:10px;
}

column-rule

.. und mit column-rule zieht ihr zwischen den Spalten eine Linie. Der Befehl hat genau wie border folgende drei Parameter:

1. column-rule-width, die Breite der Linie
2. column-rule-style, der Stil der Linie (solid, dashed, dotted, etc.)
3. column-rule-color, die Farbe der Linie

1
2
3
4
5
6
7
8
9
10

div.columns {
	-moz-column-count:2; /* Firefox */
	-moz-column-rule:4px dashed #adf;
	-webkit-column-count:2; /* Safari, Chrome */
	-webkit-column-rule:4px dashed #adf;
	column-count:2; /* Opera, IE, W3C Standard */
	column-rule:4px dashed #adf;
	border:4px solid #adf;
	padding:10px;
}

Verfeinerung

Nochmals verstärkt wird der Effekt, wenn man zusätzlich text-align:justify anwendet.

Fazit

So, damit wisst ihr nun alles über Columns und wie man sie verwendet. Besonders schön an ihnen finde ich die Tatsache, dass Browser, die die Technik noch nicht beherrschen, einfach auf die “normale” Darstellungsweise zurückfallen (Paragraphen untereinander statt nebeneinander). Ein sinnvolles Einsatzgebiet sind natürlich News-Portale, die sehr breit sind. Auf solchen Seiten lohnt es sich lange Artikel in kürzere Spalten zu teilen um die Lesbarkeit zu verbessern. Ich wünsche wie immer viel Spaß!

Bei dieser Technik geht es prinzipiell darum eine Grafik als border für jedes beliebige Element zu benutzen. Was das soll? Nun ja, manche Leute mögen es bunt und lassen sich ausgefallene Rahmen einfallen. Damit man nicht mehrere Hintergrundbilder deswegen zurecht schneiden muss, hält nun mit CSS3 border-image Einzug.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Vorbereitung

Die Basis bildet natürlich eine Grafik. Diese muss so aufgebaut sein, dass sie aus neun Bereichen besteht: vier Ecken, vier Kanten und der Mitte, hier dargestellt durch Pikachus.

Syntax

Kommen wir also zur Sache, wie schon aus vorhergehenden Teilen bekannt, haben die Browser unterschiedliche Präfixe, so auch bei border-image.

1
2
3
4
5
6
7
8

div.borderimage {
	border-style:solid;
	border-width:49px 41px;
	-moz-border-image:url(pikachu.png) 49 41 repeat; /* Firefox */
	-webkit-border-image:url(pikachu.png) 49 41 repeat; /* Safari, Chrome */
	-o-border-image:url(pikachu.png) 49 41 repeat; /* Opera */
	border-image:url(pikachu.png) 49 41 repeat; /* W3C Standard */
}

Wichtig ist, dass border-style einen wert ungleich none hat und mit border-width könnt ihr die Breite des Rahmes bestimmen, in meinem Fall sind die Werte die Maße eines Pikachus. Damit sollten wir ungefähr so eine Box bekommen:

Div mit Pikachu-Border

Kurze Erklärung, welcher Teil hier was bewirkt.. mit der URL gibt man natürlich den Pfad zum Bild an. Danach folgen die beiden Werte für die Rahmenbreite. Hier können 1-4 Werte stehen, ein Wert für jede Seite. In diesem Fall ist ein Pikachu 41 Pixel breit und 49 Pixel hoch. Als letztes folgt noch ein Schlüsselwort, von denen es genau drei Stück zur Auswahl gibt:

1. repeat – das Bild wird einfach wiederholt
2. stretch – die Kantenstücke werden auf die volle Breite bzw. Höhe gestreckt
3. round – die Kantenstücke werden etwas verzogen damit kein Pikachu abgeschnitten werden muss

Obiges Beispiel benutzt repeat, hier nun eins mit round…

(Webkit-Browser scheinen mit round im Moment wohl ein Problem zu haben.)

… und eins mit stretch…

Fazit

Jo, so geht das. Ich geb zu, das Pikachu-Beispiel ist vielleicht nicht gerade realistisch, zeigt aber was für einen Unfug man mit der neuen Technik treiben kann. Border-Image ist keine große Revolution, vereinfacht aber doch einige Dinge und vermindert auf jeden Fall die Anzahl an Grafiken, die man für aufwendige Rahmen bräuchte. Ich wünsch euch viel Spaß beim Ausprobieren.

Entschuldigt die enorme Verzögerung aber ich hatte bisschen Prüfungsstress und viel Arbeit, sodass mir dann die Motivation gefehlt hat noch diese Artikel zu schreiben. Sei’s drum, heute gehts um eine nützliche Technik, mit der man runde Ecken erstellen kann. Früher musste man immer mindestens zwei Grafiken erstellen, um einer Box runde Ecken zu verpassen – das wird sich jetzt ändern. Border-Radius wird euch gefallen, es erspart einem sehr viel Arbeit und wird von den meisten Browsern schon ganz gut unterstützt.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Einsatzgebiete

Sogenannte “runde Ecken” spielen in heutiger Zeit eine immer größere Rolle, alle modernen UIs benutzen sie an nahezu allen Elementen. Manchmal recht großzügig, dann wieder nur mit der Lupe zu erkennen, ein gutes Beispiel sind aktuelle Windows Versionen (Vista oder 7), die extrem viel Aufwand in diese Richtung betreiben. Folgender Screen soll das einmal illustrieren..

Ein Fenster in Windows 7 hat viele runde Ecken: der Fensterrahmen, die Buttons oben rechts, der Rahmen um die markierte Festplatte, etc.

Warum? Weil runde Ecken angenehmer anzusehen sind und das ganze Design etwas auflockern. Fenster mit richtigen Ecken, wie bei Windows 2000 und davor, wirken heutzutage altbacken und hässlich.

Syntax

Border-Radius wird von den Browsern durch unterschiedliche Präfixe unterstützt.

1
2
3
4
5

div.rounded {
-moz-border-radius:10px; /* Firefox - alte Syntax */
-webkit-border-radius:10px; /* Safari, Chrome - alte Syntax */
border-radius:10px; /* alle neuen Browser, W3C Standard */
}

Diese Anweisungen bewirken, dass die Ecken eines divs mit der Klasse rounded abgerundet werden. Folgendes Beispiel, hat zur Verdeutlichung der Rundungen zusätzlich eine Schwarze Border bekommen.

border-radius kann aber nicht nur mit einem Wert gesteuert werden. Maximal sind 4 Werte möglich, wobei jeder davon ein Ecke kontrolliert, im Uhrzeigersinn beginnend mit der links oben. Folgender Code bewirkt z.B., dass nur die beiden Ecken oben abgerundet werden, die unten bleiben eckig.

1
2
3
4
5

div.rounded_up {
-moz-border-radius:10px 10px 0 0; /* Firefox - alte Syntax */
-webkit-border-radius:10px 10px 0 0; /* Safari, Chrome - alte Syntax */
border-radius:10px 10px 0 0; /* alle neuen Browser, W3C Standard */
}

Natürlich kann man auch “unterschiedlich runde Ecken” machen, indem man einfach verschiedene Werte benutzt, hier gilt: Probieren geht über Studieren.

Safari spackt hier noch etwas rum. Es kommt mit 4 Werten nicht klar und ignoriert deswegen den Befehl. Da es aber die selbe Engine wie Chrome nutzt, wird sich hier demnächst bestimmt eine Besserung einstellen. Bis es soweit ist, kann man sich diesen Artikel auf CSS3.info mal durchlesen.

Update: Mit Safari 5 sollte alles funktionieren.

Fazit

Ein wahnsinnig mächtiger Befehl, Border-Radius lässt uns schnell und komfortabel Rundungen an allen Elementen erstellen. Das lästige Zuschneiden von Grafiken und der damit verbundene Aufwand über CSS-Formatierungen (Stichwort: Sliding Doors) entfällt vollständig. Das spart mal wieder jede Menge Traffic und Zeit beim Aufbau einer Seite. Viel Spaß damit!

Dieses mal erwarten euch lineare und radiale Farbverläufe (engl. gradients) in CSS, mit deren Hilfe wir einige ganz hübsche Effekte erzielen können. Benutzt werden sie überall dort, wo wir eine url() angeben können. In den folgenden Beispielen werden wir sie aber im Zusammenhang mit background verwenden, indem wir statt einem Hintergrundbild den gewünschten Verlauf angeben.

Achtung, ich verwende im Artikel noch die alte Syntax. Sobald ich Zeit habe, werde ich den Text updaten. Bis dahin lest bitte folgende Dokumentation zu Farbverläufen (MDN).

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Prinzipiell muss man zwischen zwei Arten von Farbverläufen unterscheiden:

1. Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
2. Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben

Linearer Verlauf

Zuerst einmal ein einfacher, linearer Verlauf:

1
2
3
4
5
6
7

div.lin_grad {
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}

Anmerkung: Das Firefox Logo im Vordergrund wird als zusätzlicher Background eingebunden, siehe Teil 2.

Prinzipiell haben die Verlauf-Funktionen 4 Argumente um einen Farbverlauf näher zu beschreiben. Die Argumente sind einmal linear oder radial, welche angeben um welchen Typ von Verlauf es sich handelt. Firefox bietet 2 separate Funktionen dafür an, Safari/Chrome nutzen eine Funktion für beide Typen. Es folgen dann der Start- bzw. Endpunkt und somit die Richtung des Verlaufs. Zu guter Letzt werden noch die Farbcodes für Start- und Endfarbe benötigt.

Bei den Webkit-Browsern erscheint mir dir Syntax insgesamt etwas komplizierter. Also es kann sein, dass es auch kürzer geht aber ich bin ehrlich gesagt froh, dass ich überhaupt einen funktionierenden Verlauf mit Safari hinbekommen habe.

Update 1: Mittlerweile hat Webkit die Syntax an die von Gecko angepasst, auch Opera unterstützt ab Version 11.10 lineare Verläufe mit einem eigenen Prefix.

Update 2: Die heute herausgegebene Platform Preview des Internet Explorer 10 unterstützt beide Arten von Verläufen.

Update 3: Opera 12 11.6 unterstützt radiale Verläufe per Prefix.

Radialer Verlauf

1
2
3
4
5
6
7

div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-radial-gradient(center, #fff, #adf); /* Safari, Chrome */
background:-o-radial-gradient(center, #fff, #adf); /* Opera */
background:-ms-radial-gradient(center, #fff, #adf); /* IE */
background:radial-gradient(center, #fff, #adf); /* W3C Standard */
}

Um einen radialen Verlauf zu bekommen, gehen wir genauso vor wie oben. Im Firefox ist es ganz einfach: Startpunkt, Startfarbe, Endfarbe. Webkit bereitet mir etwas Kopfzerbrechen.. soweit ich das verstanden habe, muss man hier zwei Kreise angeben mit jeweils einem Startpunkt und den Radius des Kreises, sowie Start- und Endfarbe.

Ich will das jetzt mal nicht weiter vertiefen und euch verwirren. Am besten ihr lest euch mal die Spezifikationen durch. Zwei Artikel im MDN erklären sowohl linear-gradient als auch radial-gradient (beides auf Englisch).

Fazit

Background Gradients könnten in Zukunft recht interessant werden. Lineare Verläufe werden heutzutage bereits auf fast allen Webseiten eingesetzt (Hintergründe, Buttons). Radiale Verläufe machen sich sicherlich gut, um bestimmte Sachen zu highlighten. Der größte Vorteil ist, dass somit keine Grafiken mehr gebraucht werden, die sinnlos Zeit und Bandbreite vergeuden. Die Syntax ist zwar nicht die einfachste aber mit etwas Geduld und Übung lernt man sie schon kennen. Ich hoffe, dass Webkit hier trotzdem nochmal nachbessert und die Funktion irgendwie vereinfacht. Mit Firefox hingegen kommt man recht schnell ans Ziel.

Lange Rede, kurzer Sinn: Probiert euch am besten selbst mal an den Verläufen, kombiniert eventuell das Ganze dann noch mit mehreren Backgrounds und/oder Background-Size und ihr werdet auf einige lustige Ergebnisse stoßen. Viel Spaß.

Im dritten Teil werden wir eine weitere Möglichkeit unter die Lupe nehmen, die es uns erlaubt background noch weiter zu manipulieren. Dabei soll es uns um das Ändern der Größe des Hintergrundes gehen. Kurz gesagt, wir reden über background-size.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Syntax

Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

1
2
3
4
5

div.bg_size {
	-moz-background-size:50% 25%; /* Firefox */
	-webkit-background-size:50% 25%; /* Safari, Chrome */
	background-size:50% 25%; /* Opera, IE, W3C Standard */
}

Die beiden Werte sind entweder Prozentangaben (prozentuale Breite und Höhe des Elements mit dem Hintergrund) oder Längenangaben in px, em oder sonstwas, dann gibt man direkt die Breite und Höhe des Hintergrundbildes an.

background-size:50% 25%

background-size:100px 10em

Neben diesen Möglichkeiten können wir aber auch noch zwischen den Schlüsselwerten contain und cover wählen. Contain skaliert das Bild so groß wie möglich aber noch so klein, dass es vollständig in das Element passt. Cover hingegen skaliert das Bild so klein es geht aber füllt das Element vollständig aus.

Die nachfolgenden Anweisungen funktionieren nicht in Safari. Dieser nutzt noch eine alte Implementierung, die kein cover oder contain beinhaltet.

Update: Seit Version 5 (08.06.2010) besteht das Problem in Safari nicht mehr.

background-size:contain

background-size:cover

Fazit

An sich ist das eine schöne Sache aber die Implementierung ist noch nicht in allen modernen Browsern gleich.. von daher seh ich noch keinen wahnsinnig großen Vorteil. Es macht sicherlich Sinn, wenn man Vektorgrafiken als Hintergrundbilder benutzt, dann kann man diese wunderbar verlustlos skalieren. Für cover oder contain gibt es sicherlich mehr Anwendungsfälle, z.B. gibt es Seiten, die derzeit recht aufwändig versuchen ihr Hintergrundbild immer auf 100% Fensterbreite zu ziehen. Mit background-size:cover ist das jetzt kein Problem mehr.

Einmal müssen wir noch über Backgrounds reden, das nächste Mal geht’s nämlich um Background-Gradients, danach geht es dann mit Bordern weiter.

Diesmal geht es um die Möglichkeit einem Element mehrere Hintergrundbilder zu vergeben. Bisher war es nur möglich 1 Bild pro Element als Hintergrund zu definieren. Wollte man mehr, mussten sogenannte Wrapper um das Element gesetzt werden. Das verursacht unnötiges Mark-up, was vielen schon lange ein Dorn im Auge war. Das zusätzliche Mark-up war sicherlich auch einer der Hauptgründe für die Einführung von Multiple Backgrounds.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

Syntax

Damit man die neue Technik nutzen kann, muss man lediglich mehrer URLs, das Attachment und die Position des Bildes in die background-Anweisung schreiben.

1
2
3
4
5

div.multiple_bgs {
	background:url(example_1.jpg) no-repeat left top,
	url(example_2.jpg) no-repeat right bottom,
	url(example_3.jpg) no-repeat center center #adf;
}

Anwendungen

Ein gutes Beispiel ist mein Blog. Für die Darstellung des Contents benötige ich 3 Grafiken: den oberen Bereich, den Mittelteil und den unteren Bereich. Natürlich musste ich dafür 2 Wrapper um den eigentlich Content legen. Diese könnten entfallen, wenn ich Multiple Backgrounds nutzen würde.

Update: Mittlerweile mach ich das auch.

Vor- und Nachteile

Durch den Wegfall des zusätzlichen Mark-ups wird der Code etwas schlanker und semantisch korrekter.

Für den IE und Opera gibt es derzeit noch keine Lösungen oder Alternativen, von daher ist die Technik noch relativ unpraktikabel.

Fazit

Multiple Backgrounds lohnt sich nur an Stellen, die nicht so wichtig sind oder wenn man seine Leserschaft genau kennt und weiß, dass davon die meisten mit Firefox/Safari/Chrome unterwegs sind.

Viel Spaß beim Basteln! Wir sehen uns beim nächsten Mal.

Während dieser Reihe möchte ich euch gern die wichtigsten Neuerungen, die CSS3 mit sich bringt, vorstellen und einzeln näher betrachten. Weiterhin wird die Unterstützung in der derzeitigen Browserlandschaft aufgezeigt und welche Vor- und eventuell auch Nachteile die Techniken haben.

Im ersten Teil von CSS3 im Detail dreht sich alles um den neuen Farbraum RGBa.

Eins vorweg: Der Internet Explorer in Version 6, 7 und 8 unterstützt noch keines der Features. IE9 hingegen beherrscht erste CSS3 Spezifikationen. Mehr Infos gibts auf meiner Browser Support Checklist CSS3.

Neuer Farbraum – RGBa

RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal). Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

Syntax

RGBa ist ganz einfach:

1
2
3

p.rgba {
	color:rgba(255, 255, 255, 0.75);
}

75% Weißer Text

RGBa erlaubt es uns mit Hilfe des vierten Wertes eine Transparenz anzugeben. Ich habe hier 0.75 gewählt, d.h. der Text ist genau zu 75% sichtbar und zu 25% transparent. Es dürfen nur Werte zwischen 0 und 1 angegeben werden, wobei 0 für vollständig transparent (unsichtbar) und 1 für vollständig sichtbar steht.

Zum Vergleich das bekannte RGB:

1
2
3

p.rgb {
	color:rgb(255, 255, 255);
}

100% Weißer Text

Die alte Angabe von Farben in RGB bietet uns diese Möglichkeit nicht.

Anwendungen

Kleine Ursache, große Wirkung..

Da RGBa kann überall dort verwendet werden, wo color zum Einsatz kommt. Als Schriftfarbe habt ihr es eben gesehen, es bieten sich uns aber noch andere Anwendungsmöglichkeiten an:

RGBa als Hintergrundfarbe

1
2
3

p.trans {
	background-color:rgba(200, 0, 255, 0.5);
}

RGBa als Rahmenfarbe

1
2
3

p.trans {
	border:8px solid rgba(0, 180, 0, 0.25);
}

Vor- und Nachteile

Häh, das kann ich doch auch mit PNGs und Opacity machen, wozu brauch man das?

Das stimmt wohl. Der entscheidende Vorteil von RGBa ist jedoch, dass ich mir die PNG Datei und den dazugehörigen HTTP-Request sparen kann. Opacity (was es übrigens offiziell auch erst mit CSS3 gibt) hingegen macht leider nicht nur den Hintergrund, sondern auch den Inhalt des Elements transparent.

Der Nachteil von RGBa ist noch ganz klar die fehlende Unterstützung des IEs. Wenn man es sich erlauben kann, sollte man daher einfach eine Fallbacklösung in Betracht ziehen. D.h. dass man dem IE anstatt der RGBa Werte einfach nur die äquivalenten RGB Werte übergibt:

Lösung für den IE

1
2
3
4

p.trans {
	color:rgba(0, 180, 0, 0.25); /* der IE ignoriert diese Zeile */
	color:rgb(190, 230, 190); /* entspricht in etwa der selben Farbe */
}

Fazit

RGBa wird sich, wenn es das nicht schon bei vielen getan hat, durchsetzen. Es ist sehr flexibel und hat im Grunde keine Nachteile. Durch den Wegfall von unnötigen halbtransparenten PNG Dateien spart man außerdem Traffic und die Seite kann schneller geladen werden.

Ich hoffe die Beispiele waren hilfreich und wünsche euch viel Spaß beim experimentieren! Bis zum nächsten Mal.

Habt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine.

Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. Alle anderen Blöcke bleiben dagegen geschlossen oder schließen sich. Wir bedienen uns hier einfach jQuery und schreiben ein paar Zeilen Code, die den gewünschten Accordion-Effekt realisieren.

HTML-Gerüst

Bevor wir anfangen müssen wir unser HTML aber entsprechend vorbereiten..

1
2
3
4

<h3 class="trigger">Accordion Box 3</h3>
<div class="toggle_container">
	<p>Lorem ipsum dolor sit amet...</p>
</div>

Jeder dieser Blöcke besteht aus einer Überschrift, die später anklickbar sein wird und einem Container, der den eigentlichen Inhalt des Blocks enthält. Wichtig ist, dass wir die Klassen trigger den Überschriften und toggle_container den Containern geben, da später unser jQuery-Code an Hand derer die Aktionen ausführt. Es ist also egal, ob die Überschrift eine h1, h2 oder einfach nur ein div ist, wichtig ist die Klasse und dass danach sofort der Container folgt.

jQuery-Code

Nun zum eigentlichen Code. Vergesst aber nicht, dass ihr vor diesem Script die jQuery-Bibliothek in euer Dokument einbinden müsst! Wie das geht, erfahrt ihr auf der offiziellen jQuery-Seite.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready( function() {
	$('.trigger').not('.trigger_active').next('.toggle_container').hide();
	$('.trigger').click( function() {
		var trig = $(this);
		if ( trig.hasClass('trigger_active') ) {
			trig.next('.toggle_container').slideToggle('slow');
			trig.removeClass('trigger_active');
		} else {
			$('.trigger_active').next('.toggle_container').slideToggle('slow');
			$('.trigger_active').removeClass('trigger_active');
			trig.next('.toggle_container').slideToggle('slow');
			trig.addClass('trigger_active');
		};
		return false;
	});
});

Nun zur Erklärung, was da eigentlich abläuft..

1. Erst nachdem das DOM vollständig geladen ist, greift das Script.
2. Schließe alle Container, deren Übschrift nicht die Klasse trigger_active hat.
3. Klickt man auf ein Element der Klasse trigger wird geprüft:
   • Hat es auch die trigger_active-Klasse? Dann mach den darauf folgenden Container zu und entferne die active-Klasse.
   • Ansonsten schließe alle offenen Container und öffne nur den Container, der zur gerade angeklickten Überschrift gehört und gib dieser die active-Klasse.
4. Es wird kein Wert am Ende der Funktion zurückgegeben (sollte eine Überschrift gleichzeitig ein Link sein).

Zu 2.: Stichwort – Accessibility

Das Schließen der Container würde auch über CSS (display:none) gehen aber was ist, wenn JavaScript nicht aktiviert ist? Dann würden die Leute den Inhalt der Container nicht mehr sehen, weil das Accordion nicht funktioniert.

Styling per CSS

Um das Ganze noch abzurunden, hier der CSS-Code der Demo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.trigger {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 1px #fff inset;
	-webkit-box-shadow:0 1px 1px #fff inset;
	box-shadow:0 1px 1px #fff inset;
	background:-moz-linear-gradient(center top, #e9e9e9 50%, #ddd 50%);
	background-color:#ddd;
	border:1px solid #ddd;
	color:#888;
	cursor:pointer;
	margin-bottom:5px;
	padding:5px;
	text-shadow:0 1px 0 #fff;
	width:388px;
}
.trigger_active {
	color:#333;
}
.toggle_container {
	padding:5px 10px;
	width:380px;
}

Wenn ihr das Problem habt, dass die Animation nicht flüssig ist sondern abrupt endet, versucht mal der Klasse trigger_container eine feste Breite zu geben. Damit sollte es klappen.

Allerdings ist das natürlich nur ein sehr rudimentäres Aussehen. Wie wäre es zum Beispiel mit einem Plus- oder Minussymbol, damit Benutzer gleich wissen: “Ah, hier kann ich also etwas auf-/zuklappen”? Eurer Kreativität sind hier natürlich keine Grenzen gesetzt. Viel Spaß mit eurem Accordion.

Diese Woche hatte ich auf Arbeit ein ungewöhnliches Problem, mit dem ich an die Grenzen von CSS gestoßen bin. Ich bekam die Aufgabe einige Screendesigns umzusetzen, an sich nichts Ungewöhnliches, allerdings gab es einige Bedingungen bezüglich der Sidebar: ein Widget – also eine Box innerhalb der Sidebar – sollte sich immer am unteren Rand der Sidebar aufhalten, wobei Sidebar und Content immer gleich hoch sein sollten, je nachdem, welches der beiden höher ist.

Das Problem

Ich dachte also erstmal nach, wie ich die beiden Teilprobleme lösen könnte. Eine Box an den unteren Rand einer anderen Box zu schieben ist einfach zu lösen. Die Sidebar bekäme ein position:relative und das Widget position:absolute sowie einen kleinen Wert für bottom. Wie lässt man jedoch Content und Sidebar gleich hoch sein? Dafür gibt es verschiedene Ansätze. Man könnte zum Beispiel eine Tabelle benutzen oder man suggeriert das Ganze (faux columns), indem man eine Hintergrundgrafik benutzt.

Ich konnte keine Tabelle benutzen, weil man position:relative auf td Tags nicht anwenden kann und die andere Variante viel weg, weil ich wirklich zwei gleich hohe DIVs brauchte. Da saß ich also und hatte ein schier unlösbares Problem.

“Man müsste irgendwie abfragen können, wie hoch die beiden DIVs sind und sie dann entsprechend anpassen.”, hab ich mir gedacht und hatte damit die Lösung schon gefunden. Nach Absprache mit einem Kollegen stand fest: Mir bleibt nichts anderes übrig als JavaScript zu benutzen.

Die Lösung

Ich entschied mich für jQuery, das sich in einigen anderen Projekten bereits als extrem nützlich und vielseitig erwiesen hatte. Es ist außerdem sehr einfach zu erlernen und bringt neben einer guten Dokumentation auch viele coole Plugins mit sich. “Die ganze Bibliothek nur für eine simple Abfrage?”, wird sich mancher an dieser Stelle denken. Ja. Natürlich geht das auch mit reinem JavaScript aber da ich jQuery auch noch an anderer Stelle im Template gebraucht habe, wäre es dumm gewesen, die jQuery Funktionen nicht zu nutzen.

Ich habe also die aktuelle jQuery Version eingebunden und mir dann kurz überlegt, was mein Script machen muss:

1. Hol dir die Höhe der Sidebar und die Höhe des Contents
2. Vergleiche beide Werte und bilde das kleinste gemeinsame Vielfache (kgV)
3. Setze die Höhe der beiden DIVs auf das kgV

Die Umsetzung

Soweit zur Theorie, kommen wir zur Praxis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//sync height of Content and Sidebar
function syncheight(){
	//Reset auf 'auto'
	$('#content').height('auto');
	$('#sidebar').height('auto');
 
	//hole aktuelle Werte
	var contentheight = $('#content').height();
	var sidebarheight = $('#sidebar').height();
	var fullheight;
 
	//vergleiche beide Hoehen, bilde kleines gemeinsames Vielfaches
	if (contentheight>=sidebarheight || contentheight==sidebarheight) {
		fullheight = contentheight;
	} else {
		fullheight = sidebarheight;
	};
 
	//setze beide auf gleiche Hoehe
	$('#content').height(fullheight);
	$('#sidebar').height(fullheight);
}

Das ist die ganze Funktion. #content und #sidebar stehen für die ID des Contents bzw. der Sidebar. Hinzu kam noch das Zurücksetzen der beiden Höhen auf den Wert auto. Das ist notwendig, will man später die Funktion in einem anderen JavaScript aufrufen. Möchte man, dass die Funktion automatisch aufgerufen wird, nachdem die Seite geladen ist, muss man die Funktion noch in eine document.ready – Funktion legen:

1
2
3

$(document).ready(function() {
	//hier die Funktion rein
});

Durch diese Funktion wartet der Browser bis die Seite vollständig aufgebaut wurde und führt dann erst das Script aus.

Demo

Mein Problem war gelöst, mein Chef zufrieden und ich denke mal, dem einen oder anderen könnte die kleine Funktion auch helfen.

Viel Spaß wünsch ich damit

Kaloeffel möchte gern, dass ich für ihn ein Problem löse und das mach ich auch..

Neue Herausforderung:

Ich möchte dass die Sidebar oben anfängt, also nicht nur neben dem Content sondern auch neben dem Header.
Die Seite soll die ganze breite einnehmen und der Header und Content sollen eine flexible breite haben.
Problem: Wenn z.B. der Header die Eigenschaft “float:left;” bekommt, ist die Größe nicht mehr flexibel sondern nur noch das Minimum.

Ausgehend vom Beispiel aus dem dritten Teil des CSS Einsteiger Tutorials kommt nun die Lösung.

Zuerst müssen wir natürlich das Markup, also den XHTML Code ändern. Die Sidebar muss für sich sein, und der Header muss in den Content geschoben werden oder man erstellt ein neues div, in das man Header und Content schiebt. Der Einfachheit halber verzichte ich aber jetzt darauf. Ein Footer wurde nicht gewünscht, deshalb lasse ich den jetzt auch mal weg. Zum Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</head>
	<body>
		<div id="page">
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				<div id="header">
					Header
				</div>
				Content
			</div>
		</div>
	</body>
</html>

Soweit sogut. Jetzt müssen wir natürlich auch das CSS ändern. Wir haben 2 Hürden zu bewältigen: 1. die Variable Breite und 2. eine Sidebar mit fester Breite, die neben Header und Content platziert sein soll.

Die Änderungen, die dafür notwendig sind, sind ziemlich simpel. Das Page-Div verliert seine feste Breite und bekommt width:100% statt 800px. Die Sidebar behält float:left, der Content (der den Header jetzt enthält) verliert aber jegliches float sowie seine feste Breite und bekommt stattdessen ein margin-left mit dem Breitenwert der Sidebar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#page {
	width:100%; /* Seite hat variable Breite  */
}
 
#header {
	background-color:#0ff;
	height:50px;
}
 
#sidebar {
	clear:left;
	float:left;
	background-color:#f80;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#f0f;
	height:400px;
	margin-left:200px;
}

Ergebnis:

So soll es sein

Das war es auch schon

CSS3 Effekte

Hallo Leute, dieser Artikel wird ein kleines Tutorial darüber, wie man schon jetzt einige der neuen CSS3 Features in modernen Browsern nutzen kann.

Als Versuchsobjekt wird uns ein Link in Form eines Buttons dienen.

Dazu erstmal der XHTML Code:

1

<a href="#">CSS3 Button</a>

und der CSS Code:

1
2
3
4
5
6
7
8
9

a {
	background-color:#e9e9e9;
	border:1px solid #828282;
	color:#828282;
	font:bold 26px arial,sans-serif;
	padding:10px 15px;
	text-decoration:none;
	text-transform:uppercase;
}

So sieht das Ganze dann mit CSS2 Features aus:

Button mit CSS2

Border-Radius

Das sieht natürlich alles noch sehr eckig und langweilig aus. CSS3 und die demnächst erscheinenden neuen Browser (Firefox 3.5, Opera 10 (teilweise) und – neulich erst released – Safari 4) erlauben es uns aber, durch einige nette Effekte, alles etwas aufzupeppen.

Beginnen wir am besten mit abgerundeten Ecken. Die Property border-radius wird derzeit noch von keinem Browser richtig unterstützt, einige haben aber damit begonnen, sie selbstständig zu implementieren. Firefox3 kennt die Eigenschaft als -moz-border-radius, während man unter Safari -webkit-border-radius benutzen muss.

Damit also in möglichst vielen Browsern die runden Ecken zu sehen sind, müssen wir gleiche mehrere Zeilen CSS Code zu unserem obigen Beispiel hinzufügen:

1
2
3

-moz-border-radius:25px; /* Mozilla alte Syntax */
-webkit-border-radius:25px; /* Safari alte Syntax */
border-radius:25px; /* W3C Standard */

Für den Internet Explorer (<9) gibt es derzeit keine Lösung.

Das Ergebnis sieht folgendermaßen aus:

border-radius

Text-Shadow

Als nächstes wollen wir versuchen, dem Text einen Schatten zu geben. Aber nicht irgendeinen, sondern etwas, das in die richtung “Emboss” geht, eine Art Präge-Effekt. Dafür gibt es text-shadow, das es uns möglicht macht, einen oder mehr verschiedengroße und -farbige Schatten auf den Text anzuwenden.

Für den gewünschten Emboss-Effekt brauchen wir zwei Schatten, einen dunklen oben und einen hellen unten, damit der Eindruck entsteht, von oben käme Licht:

1

text-shadow:0 1px 0 #fff,0 -1px 0 #404040;

Die Schatten werden durch ein Komma getrennt, Parameter sind [color] [x-offset]px [y-offset]px [blur/size]px. Negative Werte für Offsets sind erlaubt, die Reihenfolge der Schatten spielt hierbei keine Rolle.

Auch hier spielt der Internet Explorer nicht mit.

text-shadow

Box-Shadow

So sieht unser Button doch schon wesentlich angenehmer aus. Was jetzt noch fehlt ist ein Schlagschatten für den gesamten Button. Hierfür gibt es box-shadow, das wir wieder über Brwoserspezifische Präfixe einbinden müssen:

1
2
3

-moz-box-shadow:#ccc 0 0 10px; /* Mozilla alte Syntax */
-webkit-box-shadow:#cc 0 0 10px; /* Safari alte Syntax */
box-shadow:#ccc 0 0 10px; /* W3C Standard */

Fehlanzeige im Internet Explorer (<9).

Damit ist unser Button schon fertig:

box-shadow

Wie ihr seht, bringt CSS3 einige coole Neuerungen mit sich, die unsere Arbeit wesentlich erleichtern werden. (Natürlich sind die obigen drei nicht alles, was CSS3 zu bieten hat, sehr interessant werden z.B. auch die neuen Selektoren sein.) Denkt nur mal an box-shadow, ich weiß gar nicht, wie oft ich schon Vorlagen aus der Designabteilung bekommen habe, in denen jede Box irgendeinen soften Schlagschatten hatte und wir dann immer abwägen mussten ob sich der Aufwand lohnt dafür extra Grafiken zu machen. Auch bei Seitenrändern mit Schlagschatten mussten immer Grafiken zurecht geschnitten und mühevoll mit CSS an die richtige Stelle geschubst werden. Ebenfalls entfällt das Rendern für Überschriften mit Schatten, denn dafür gibt es jetzt ja text-shadow und Runde Ecken sind je eh ein Kapitel für sich…

Mit CSS3 spart man also Zeit, Geld und Traffic! *froi*

Herzlich willkommen zum dritten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)

In Teil 3 werden wir versuchen ein zweispaltiges Layout – bestehend aus Header, Sidebar, Content und Footer – zu erstellen.

Wieder mit dabei?

na aber sicher!

Ok, bevor es richtig losgeht, sollte wir noch eine wichtige Unterscheidung von HTML-Elementen kennen und verstehen lernen.

Block- & Inline-Elemente

Block-Elemente

Block-Elemente sind HTML-Elemente, die vom Browser so interpretiert werden, als würde vor und nach ihnen ein Zeilenumbruch stehen. Sie starten also, außer nicht anders durch CSS-Befehle festgelegt, eine neue Zeile. Standardmäßig bekommen Block-Elemente die gleiche Breite wie ihre Elternelemente, sie versuchen also ihr Elternelement in der Breite (nicht aber in der Höhe, die wiederum vom Inhalt bestimmt wird) auszufüllen.

Beispiele für Block-Elemente sind:

• div – Divisions (Sektor)
• p – Paragraph (Absatz)
• blockquote – Blockquote (Zitat)
• ul,ol – Unordered/Ordered List (ungeordnete/geordnete Liste)
• li – List Item (Listenelement)
• h1-6 – Headings (Überschriften)
• table – Table (Tabelle)

Inline-Elemente

Inline-Elemente hingegen produzieren keine Zeilenumbrüche, sie werden einfach der Reihe nach dargestellt. Ihre Breite und Höhe wird von ihrem Inhalt bestimmt, unabhängig vom Elternelement (auch hier gilt wieder: nur solange nicht anders durch CSS-Befehle festgelegt).

Beispiele für Inline-Elemente sind:

• span – Span
• a – Anchor (Link)
• em – Emphasize (Italic)
• strong – Strong (Fett)
• code – Code

Bemerkungen

Ein Layout, und dazu zählt auch unseres, besteht aus Block-Elementen, die mit anderen Block- und Inline-Elementen gefüllt werden. (Sidebar bekommt eine Liste, Content wird mit Absätzen befüllt, die wiederum Links und Spans enthalten können usw.)

Jedes Element kann in seinem Verhalten verändert werden. Der CSS-Befehl, der dafür zuständig ist, heißt display. display hat mehrere Zustände; hier die 4 wichtigsten:

1. none das Element wird nicht angezeigt (Element + Inhalt verstecken)
2. inline das Element wird als Inline-Element behandelt
3. block das Element wird als Block-Element behandelt
4. list-item das Element wird als Listenelement angezeigt (mit Anstrich)

Jedes Block-Element kann somit als Inline-Element und umgedreht behandelt werden, wodurch man sehr flexibel wird was die Benutzung von Elementen angeht.

Durch das Ändern der display-Eigenschaft ändern wir nicht das Element selbst. Ein Block-Element bleibt ein Block-Element, es verhält sich nur anders. Es ist also auch damit nicht möglich ein div innerhalb eines a-Elements zu schreiben o.ä.!

das hab ich natürlich gleich gewusst..

Zweispaltiges Layout

Ein Layout mit zwei Spalten besteht zumeist aus Header (Banner, Top-Navigation, Suche etc.), Sidebar (Navigation, Kalender, Werbung etc.), Content (der eigentliche Seiteninhalt, Bilder etc.) und dem Footer (Back-Links, Sitemap, Copyright etc.). Die meisten WordPress Themes – meins inklusive – benutzen ein zweispaltiges Layout, deshalb soll es uns hier mal als Beispiel dienen:

Zweispaltiges Layout mit Header, Sidebar, Content und Footer.

Alle markierten Blöcke auf dem Bild sind divs und somit Block-Elemente. Der HTML-Code für diese grobe Struktur würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</head>
	<body>
		<div id="page">
			<div id="header">
				Header
			</div>
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				Content
			</div>
			<div id="footer">
				Footer
			</div>
		</div>
	</body>
</html>

Die IDs sind dazu da, um die Elemente später per CSS anzusprechen. Das div id="page" ist praktisch, wenn wir unsere Seite zentrieren wollen. Oftmals wird so ein div auch wrapper genannt, weil es die Seite nochmal umschließt (eng: to wrap).

Wollen wir nun unseren Blöcken ein gewisses Aussehen verleihen und schreiben also folgende CSS (die Werte für height und background-color stehen nur da, damit wir nachher was sehen, normalerweise wird die Höhe vom Inhalt des jeweiligen Divs bestimmt):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#page {
	margin:0 auto; /* zentriert die Seite */
	width:800px; /* Seite wird 800 Pixel breit */
}
 
#header {
	background-color:#00ffff;
	height:50px;
}
 
#sidebar {
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	background-color:#00ff00;
	height:50px;
}

Schauen wir uns nun das Ganze im Browser an:

Zweispaltiges Layout? Noch nicht ganz..

hm.. da stimmt irgendwas noch nicht. sidebar und content sollten doch eigentlich nebeneinander passen?!

Völlig richtig! Allerdings reicht dafür obenstehendes CSS nicht aus. Es gibt allerdings eine ganz einfache Methode, um unser Ziel zu erreichen – float

Float

float hat 3 wichtige Zustände:

1. left Element “fließt” nach links
2. right Element “fließt” nach rechts
3. none Element “fließt” nicht

öhm.. “fließt” ??

Um es verständlicher zu machen, erkläre ich es am besten an einem Beispiel. Folgendes Szenario: Eine große 500px breite Box (schwarzer Rahmen) soll mit 4 Boxen (Box1-4) befüllt werden, die alle die Eigenschaft float:left besitzen und jeweils eine unterschiedliche Höhe und Breite haben.

Gehen wir die Sache Schritt für Schritt durch..

1. Box1 platziert sich wie erwartet links oben.

Bild 1

2. Box2 “fließt” jetzt links neben Box1, da noch genug Platz vorhanden ist.

Bild 2

3. Box3 tut es Box2 gleich.

Bild 3

4. Die “erste Reihe” ist nun voll Box4 muss sich weiter unten einreihen, wir sehen jedoch das Problem. Box4 lässt nach links Platz weil es ja auch soweit wie möglich nach oben will und muss.

Bild 4

5. Um das zu verhindern und Box4 auf einer “neuen Zeile” beginnen zu lassen, fügen wir vor Box4 noch eine weiter Box hinzu.

Bild 5

CSS-Code für Box5:

1
2
3

.box5 {
	clear:both;
}

Damit ist Box5 ein sogenannter Clear-Div. Solche Divs bewirken, dass nachfolgende Elemente das Floating von vorhergehenden Elementen ignorieren und somit wieder “bei Null angfangen”, d.h. sich wieder ganz links anordnen und nicht solche Fehler produzieren wie in Bild 4.

Neben both hat clear noch die Werte left und right, sodass es möglich ist nur eine bestimmte float-Richtung aufzuheben. Außerdem ist clear nicht auf Divs beschränkt sondern kann auf jedes Element angewendet werden.

Ok, ich denke ich hab’s verstanden.. zurück zu unserem Beispiel, was muss ich da nun wo ändern?

Mit dem neuen Wissen lassen wir nun die Sidebar und den Content floaten. Die Sidebar nach links und den Content nach rechts. So können wir sicher sein, dass nichts schief läuft. Zusätzlich sollten wir dem Footer noch ein clear:both verpassen, das ist zwar nicht unbedingt notwendig aber sollten wir doch aus irgendwelchen gründen noch Elemente nach dem Footer einfügen und diese floaten lassen besteht die Gefahr, dass es uns das Layout zerschießt.

Der neue CSS-Code lautet demnach (nur #sidebar, #content und #footer ändern sich, Rest bleibt gleich):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#sidebar {
	float:left;
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	float:right;
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	clear:both;
	background-color:#00ff00;
	height:50px;
}

Und siehe da, alles so wie es sein soll

Sieht es bei dir auch so aus? Dann Glückwunsch zum einem zweispaltigen Layout!

Sehr geil.

Nun kannst du anfangen die Blöcke mit Inhalt zu befüllen! Folgende Teile stehen zum Weiterlesen bereit:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)
3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Was möchtest du als nächstes wissen? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

Herzlich willkommen zum zweiten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

1. Teil #1 (XHTML+CSS, Syntax)

In diesem Teil werden wir noch mehr Möglichkeiten zum Ansprechen von HTML Elementen kennen lernen. Das kleine Layout muss bis Teil3 warten, da Teil 2 etwas größer als geplant geworden ist.

Bist du wieder mit dabei?

logisch *Kippe ausmach* *anschnall*

Gut, dann können wir ja anfangen..

Syntax (Weiterführung)

Kommentare

In CSS ist es möglich und auch sinnvoll Kommentare zu setzen. Ähnlich wie in C/C++ werden sie folgendermaßen gekennzeichnet:

/* Kommentar */

Solche Kommentare können auch über mehrere Zeilen verlaufen:

/* Kommentar,
der über mehrere
Zeilen verläuft */

Es ist gut Überschriften innerhalb der CSS Datei per Kommentar zu setzen, um so eine gewisse Struktur aufzubauen. Weiter gehts!

Selektoren

In Teil 1 haben wir die Grundstruktur von CSS Regeln kennen gelernt, hier nochmal der Aufbau:

Selektor {
	Property-A: Value-A;
	Property-B: Value-B;
	...
}

In unserem letzten Beispiel war der Selektor ein p-Tag bzw. ein p-Tag mit der Klasse absatz. Es gibt jedoch noch eine ganze Menge anderer Selektoren und Art und Weisen, wie man diese klug einsetzen kann.

Folgende Tabelle gibt einen Überblick über alle möglichen Selektoren (Quelle: Wikipedia)

IE6 unterstützt keine Attribut-Selektoren.
Versuche einfach andere Selektoren zu benutzen (Klassen- oder ID-Selektoren) oder dein HTML entsprechend dahingehend zu ändern.

boar.. das sind jetzt aber ganz schön viele, muss ich die alle auswendig wissen?!

Nein. Es kann zwar nicht schaden sie alle zu wissen, in der Regel reicht es aber gehört zu haben, dass es sowas gibt und dann an entsprechender Stelle nachzuschlagen. Du wirst schnell merken, welche in der Praxis wichtig und welche weniger wichtig sind.

In unserem Beispielabsatz aus Teil 1 haben wir den Selektor p.absatz benutzt, der sagt, dass alle p-Tags der Klasse absatz von den darauffolgenden Properties betroffen sind. Was ist aber, wenn wir auch andere Elemente wie div oder blockquote so aussehen lassen wollen?

Dieses Problem lösen wir einfach, indem wir das p in unserem Selektor weglassen. Dann bleibt nur .absatz übrig. Genau dieser Ausdruck sagt, “nimm alle Elemente der Klasse absatz und style sie wie folgt..”. Es werden also alle Elemente, egal ob p, div oder blockquote gestylt, solange sie die entsprechende Klasse besitzen.

Dasselbe gilt natürlich auch für IDs, welche übrigens mit einem Nummernkreuz/Raute # statt einem Punkt angesprochen werden.

Was ist denn überhaupt der Unterschied zwischen class und id?

Das ist ganz einfach: Elemente mit einer Klasse können beliebig oft innerhalb des HTML Dokuments auftauchen.. zum Beispiel könnte ein Text aus mehreren Absätzen bestehen, alle p-Tags könnten dann die Klasse absatz haben. Wenn wir jedoch IDs vergeben, so dürfen diese nur einmalig innerhalb des Dokuments sein. Zum Beispiel wird es auf einer Seite nur genau einen Header geben, deswegen können wir diesem eine ID geben.

Merke:
id = einmalig
class = beliebig oft

OK, merk ich mir.. sonst noch was?

Ja, es kann vorkommen, dass wir einem Element zwei Klassen geben wollen oder müssen. Sowas ist der Fall, wenn wir zum Beispiel mehrere Absätze haben, diese aber unterschiedlich gestylt werden sollen:

1
2
3

<p class="important">Ich bin ein wichtiger Text und deshalb fett geschrieben</p>
<p class="warning ">Ich bin eine Warnung, deshalb rot geschrieben.</p>
<p class="warning important">Ich bin eine wichtige Warnung und deshalb rot und fett geschrieben.</p>

der dazugehörige CSS Code:

1
2
3
4
5
6
7

.important {
	font-weight: bold;
}
 
.warning {
	color: #FF0000;
}

Wir sehen, dass der letzte Absatz zwei Klassen bekommen hat, indem wir einfach zwei Bezeichnungen innerhalb des class-Attributes angegeben haben. Damit bekommt er auch die Eigenschaften beider Klassen verliehen.

Wollen wir jetzt aber – aus welchem Grund auch immer – den dritten Absatz noch weitere besondere Eigenschaften geben, müssen wir unseren CSS Code noch erweitern und folgendes hinzufügen:

1
2
3

.important.warning {
	/* jetzt folgen die besonderen Eigenschaften */
}

Du siehst, durch einfaches Aneinandersetzen zweier Klassennamen sprechen wir ausschließlich Elemente an, die beide Klassen besitzen. Die Reihenfolge spielt hierbei keine Rolle (.warning.important wäre also auch möglich).

Pseudo-Klassen und -Elemente

Folgende Tabelle zeigt alle Pseudo-Klassen auf:

IE6 unterstützt Pseudo-Klassen nur für a-Tags. Im IE7 treten keinerlei Probleme auf und Pseudo-Klassen sind für alle Tags nutzbar.

Pseudo-Klassen stehen immer direkt hinter dem Selektor:

1
2
3
4

a:link { color: #0000FF; }
a:visited { color: #00FF00; }
a:hover { color: #FF0000; }
a:active { color: #FF0000; }

Dies bedeutet, dass unbesuchte Links Blau, besuchte Rot und Links, über denen die Maus “schwebt” bzw. gerade aktiv sind, Grün dargestellt werden. Die Reihenfolge dieser vier Pseudo-Klassen ist übrigens empfehlenswert (LVHA-Regel).

Und nun die Pseudo-Elemente:

Pseudo-Elemente werden recht selten genutzt, können aber hier und da die Arbeit erleichtern. Nehmen wir an, wir möchten den ersten Buchstabe eines Kapitels (Initiale) besonders hervorheben. Anstatt den ersten Buchstabe in ein extra span-Tag zu schreiben, lassen wir das doch CSS für uns machen:

1
2
3
4

p.lead:firstletter {
	color: #FF0000;
	font-size: 20px;
}

Damit wird der erste Buchstabe in 20px Schriftgröße und in der Farbe Rot dargestellt.

Okay damit hätten wir die Selektoren abgeschlossen, es kann nun aber vorkommen, dass beim Zusammenführen von mehreren Style Sheets Selektoren doppelt auftreten, aber unterschiedliche Properties haben:

1. CSS Datei

1

p.lead { color: #000000; }

2. CSS Datei

1

p.lead { color: #444444; }

Wird der Text nun schwarz (oben) oder grau (unten) dargestellt? Je nachdem welche Datei als letztes eingebunden wurde. In diesem Fall soll das mal die zweite Datei sein, der Text würde also grau werden. Wollen wir aber, dass der Text dennoch schwarz sein soll, müssen wir ein !important zwischen Value und Semikolon schreiben:

modifizierte 1. CSS Datei

1

p.lead { color: #000000 !important; }

Könnte mal nützlich sein!

Hierarchische Verschachtelung

Wir wissen ja, dass unsere HTML Datei eine Struktur hat. Das html-Tag hat die Kind-Elemente head und body. body hat wiederum viele andere Kind-Elemente wie divs, ps oder Überschriften (h1-h6). Sogar Elemente wie p können noch Kind-Elemente haben (z.B. span) – eine Hierarchie entsteht.

Nehmen wir an, wir haben einen div mit der ID “content” und dort sind zwei p-Tags enthalten. Einer davon ist die Einleitung (class="lead") und soll deshalb fett dargestellt werden, der andere ist ein normaler Absatz:

1
2
3
4

<div id="content">
	<p class="lead">Ich bin die Einleitung und deshalb fett. *freu*</p>
	<p>Ich bin nur ein stinknormaler Absatz. *sad*</p>
</div>

Wollen wir jetzt diesen Einleitungsabsatz innerhalb des Inhalts-Divs ansprechen, gilt:

1
2
3

#content p.lead {
	font-weight: bold;
}

Zwischen Eltern- und Kindelement steht also nur ein Leerzeichen.

Und eine letzte Anmerkung zu dem Thema: Gruppieren von Selektoren. Es ist möglich und äußerst praktisch Elemente, die gleich aussehen sollen zu einer Gruppe zusammen zu fassen. Dazu werden die Elemente bzw. die einzelnen Selektoren mit einem Komma verkettet. Als Beispiel nehmen wir den Einleitungsabsatz von eben und die Warnung von weiter oben, beide sollen fett dargestellt werden:

1
2
3

#content p.lead, .important {
	font-weight: bold;
}

Ziemlich simple Angelegenheit, oder?

Joa.. glaub schon, was kommt als nächstes?

Leider schafft es das Layout nicht mehr in diesen Teil des Tutorials aber dafür folgt schon mal ein kleiner Ausblick, indem wir einen Blick auf das Box-Model werfen.

Box-Model

Alle Elemente werden unter CSS als Box aufgefasst. Also als etwas, dass befüllt werden kann (mit Text z.B.). Eine Box kann eine Breite und Höhe haben, die sich in der Regel nach der Größe des Inhalts und der Größe des Elternelements richtet. Dazu kann noch kommen: Padding, Border und Margin.

Um das zu verdeutlichen, hier mal eine Grafik:

Das offizielle W3C Boxmodel mit Padding, Border und Margin.

Diese Eigenschaften kann also jedes Element bekommen, einige haben schon standardmäßig welche. Überschriften haben z.B. ein Margin, damit sie etwas Abstand zu umliegenden Elementen haben und somit besser hervorstechen.

margin und padding können vier Values haben, jeder dieser Values steht für eine Seite (top right bottom left (im Uhrzeigersinn, mit top gehts immer los)). Die anderen vier Properties können immer nur ein Value besitzen.

Ein Beispiel: Wir haben ein span-Tag, welches 10 Pixel Padding an allen Seiten bekommen soll.

1

<span class="padding">Ich bin ein span mit Padding.</span>

CSS:

1
2
3
4
5
6

span.padding {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

Ich habe hier die einzelnen Properties für jede Seite benutzt und 10px als Value übergeben. Es geht aber noch kürzer:

1
2
3

span.padding {
	padding: 10px 10px 10px 10px;
}

Diese Form ist äquivalent zu der darüber. Aber es geht sogar noch kürzer!

1
2
3

span.padding {
	padding: 10px;
}

WTF..?!

Durch das Weglassen der drei anderen Values, nimmt der Browser einfach an, man möchte auf allen Seiten dasselbe Padding haben. Recht hat er und wir haben einen schlanken Code.

Nur.. was machen wir, wenn wir nur oben und unten Padding haben möchten und links und rechts lieber keinen, weil das vielleicht doof aussieht? Dann nehmen wir zwei Values, das erste regelt die Werte für oben und unten, das andere für die rechts und links:

1
2
3

span.padding {
	padding: 10px 0px;
}

Und wann brauchen wir 3 Values?

Drei Values brauchen wir, wenn wir auf zwei Seiten, die sich gegenüber liegen, einen gleichen Wert haben wollen und auf den andern beiden Seiten unterschiedliche Werte brauchen:

1
2
3

span.padding {
	padding: 10px 0px 5px;
}

Bedeutet:
padding-top: 10px
padding-right: 0px
padding-bottom: 5px
padding-left ist leer, bekommt aber einfach den Wert von padding-right (also auch 0 Pixel)

Puh.. ist mehr geworden als gedacht, deswegen gibts das Layoutbeispiel erst im nächsten Teil, bis dahin viel Spaß mit den Selektoren! Folgende Teile stehen zum Weiterlesen bereit:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)
3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

Herzlich willkommen zum ersten Teil meines großen CSS Einsteiger Tutorials.

Ziel des Tutorials soll sein:

Ich will absoluten Neulingen, die noch nie etwas von CSS gehört haben, die Grundlagen und den sauberen Gebrauch von CSS näher bringen. Jeder Teil wird dabei etwas anspruchsvoller sein und es wird tiefer in die Materie vorgedrungen. Die Teile bauen dabei sukzessiv aufeinander auf. Profis werden sich allerdings kaum etwas Neues aus diesem Tutorial nehmen können.

Voraussetzungen:

1. (sehr) gute (X)HTML-Kenntnisse (alle gängigen Tags, W3C-konform)
2. Nerven aus Stahl (Stichwort IE6-Optimierung)
3. Fähigkeit zu Lesen – auch die englische Sprache – und zu Denken
4. Hang zum Perfektionismus

Du erfüllst alle Punkte? Dann können wir ja anfangen.. (wenn nicht, ist auch nicht so schlimm, man wächst schließlich mit jeder Herausforderung )

CSS.. kann man das essen?

Nein, essen kann man es nicht. CSS steht für Cascading Style Sheets und ist ein vom W3C erschaffener und herausgebrachter Standard zur Darstellung von (X)HTML Tags.

Okay.. und wie kann ich das nun benutzen?

Das lustige ist, dass jede Seite bereits gestylt dargestellt wird, da der Browser vorgibt, wie welches Tag gerendert wird. Leider hat jeder Browser andere Default Styles und die Seite sieht dadurch von Browser zu Browser unterschiedlich aus. Außerdem will man ja etwas Besonderes kreieren oder umsetzen und das soll in jedem Browser gleich aussehen.

CSS kann auf vier unterschiedliche Art und Weisen auf eine HTML Datei angewendet werden:

1. Browser Default
2. externes Stylesheet
3. internes Stylesheet
4. inline Style

Die oberste Variante hat die geringste, die unterste die höhste Priorität. Sollte es vorkommen, dass ein HTML-Element von zwei oder mehr solcher Varianten beeinflusst wird, so “gewinnt” stehts die mit der höchsten Priorität.

Varianten im Detail

Da Browser Default nicht verändert werden kann, brauchen wir das auch nicht zu berücksichtigen.

externes Stylesheet:

Bei dieser Variante wird eine normale Text-Datei (mit Texteditor wie Notepad, Wordpad oder Notepad++ öffnen) mit der Endung .css erstellt und in der .html Datei referenziert. Dabei wird folgender Code innerhalb des head-Tags geschrieben.

<link rel="stylesheet" href="url_zum_stylesheet/stylesheet.css" type="text/css" media="screen" />

Damit weiß der Browser nun, dass er sich unter “url_zum_stylesheet” die Datei stylesheet.css suchen muss und dass diese Datei ihm sagt, was er zu tun hat.

internes Stylesheet:

Intere Stylesheets werden innerhalb des head-Tags geschrieben. Man benutzt das style-Tag und schriebt dort den CSS Code hinein. Hierbei muss keine .css Datei angelegt werden.

<style type="text/css">
	...
</style>

inline Style:

Inline Styles werden direkt als Attribut eines HTML-Tags geschrieben.

<p style="...">
	Ich bin ein gestylter Absatz.
</p>

Alles klar und welche nehm ich jetzt, was ist am besten?

Diese Frage ist einfach zu beantworten. Es ist immer zu empfehlen ein externes Stylesheet zu benutzen. Es hält die HTML Datei klein und beschleunigt somit das Herunterladen der Seite. Außerdem ist es übersichtlicher und sauberer.

Die Variante des internen Stylesheets bietet sich bei kleinen, sehr kompakten Projekten an, ein Newsletter ist wohl das beste Beispiel.

Inline Style ist nur in Notfällen zu benutzen! Am besten gleich wieder vergessen, dass es das gibt. (Ich weiß, die Versuchung ist groß )

Syntax

Okay dann nehme ich halt die externe Variante.. .css Datei ist erstellt und Eintrag im Header gemacht, was nun?

Gratulation, jetzt kannst du anfangen deinen ersten richtigen CSS Code zu schreiben ! Anhand eines Beispiels soll gezeigt werden, wie man einen Paragraphen stylt. Der HTML Code lautet wie folgt:

<p class="absatz">
	Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz.
</p>

Beachte: der Absatz hat durch das Attribut class eine CSS-Klasse bekommen. Das ist ähnlich einem Namen, jeder Absatz mit dieser Klasse wird nun so dargestellt, wie wir es in der CSS Datei festlegen. Einfach folgenden Code in deine CSS Datei kopieren.

1
2
3
4
5
6
7
8
9
10

p.absatz {
	background-color: #CCCCCC;
	border: 2px solid #000000;
	font-family: Georgia;
	font-size: 16px;
	color: #000000;
	padding: 20px;
	margin: 10px 0;
	text-align: justify;
}

Wenn wir jetzt die HTML-Seite in unserem Browser öffnen, sollte der Absatz nun so aussehen:

Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz.

Tut er aber nicht

Sollte sich nichts geändert haben, überprüfe den Pfad zur CSS Datei im Header deiner HTML Datei (der Pfad kann auch relativ gesetzt werden).

Jetzt zur Erläuterung der einzelnen Zeilen des CSS Codes:

p.absatz ist ein Sperator, der sorgt dafür, dass alle p-Tags mit der Klasse absatz vom nachfolgenden Code betroffen sind. Der eigentliche Code steht in geschweiften Klammern.

background-color: #CCCCCC; gibt dem Hintergrund des Paragraphen eine Farbe; Farbwerte gibt man in der Regel hexadezimalcodiert an (#000000 = schwarz, #FFFFFF = weiß)

border: 2px solid #000000; gibt dem Paragraphen einen Rahmen, der 2 Pixel dick ist aus aus einer durchgezogenen Linie in der Farbe Schwarz besteht

font-family: Georgia; legt die Schriftfamilie fest, hier Georgia

font-size: 16px; legt die Schriftgröße fest, hier 16 Pixel

color: #000000; legt die Schriftfarbe fest, hier Schwarz

padding: 20px; zwischen Inhalt und Rahmen wird zusätzlicher Platz reserviert, sogenanntes “Padding”

margin: 10px 0; gibt dem Inhalt einen Außenabstand nach oben und nach unten (10 Pixel), links und rechts bleibt der Abstand aber auf 0 Pixel

text-align: justify; kontrolliert den Textfluss innerhalb des Absatzes, justify bedeutet Blocksatz

Nach jedem “Befehl”, den sogenannten Properties, folgt ein Semikolon. Die schließende Klammer nicht vergessen!

Aha soweit so gut, was gibt es denn noch so?

Eine Liste mit allen Properties findet man unter www.w3schools.com, dort sind auch zu allen Properties Beispiele und wichtige Hinweise allerdings nur in Englisch.

Okay für heute soll es das gewesen sein. Probiert euch am besten an dem Absatz noch etwas.. wie wäre es mit einer anderen Schriftart oder einer anderen Hintergrundfarbe? Spielt einfach etwas mit den Werten und ihr werdet merken, wie schnell und einfach CSS zu erlernen ist.

In Teil 2 gehts mit noch mehr Syntax weiter und anhand eines kleinen Layouts werden wir das Positionieren von divs lernen. Folgende Teile stehen zum Weiterlesen bereit:

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)
3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

Überschrift mit Schatten

Was ist also der einfachste Weg, um unser Ziel zu erreichen? Na? Genau, wir legen hinter unserer eigentlichen Überschrift nochmal den gleichen Text, nur diesmal mit einer anderen, logischerweise dunklen, Farbe.

1. Änderung am Theme

Als erstes müssen wir den zusätzlichen Text in unser Theme einfügen. Die Änderung bezieht sich hier auf die index.php, muss aber in allen .php Dateien durchgeführt werden, wo der Titel einen Schatten bekommen soll.

1
2
3
4
5

...
<div class="post" id="post-<?php the_ID(); ?>">
	<h2 class="shadow"><?php the_title(); ?></h2>
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
...

In Zeile 3 sieht man den zusätzlichen Titel. Ganz wichtig ist, dass wir diesem neuen Titel eine CSS-Klasse geben (hier: shadow).

Wenn wir uns das ganze jetzt ansehen würden, hätten wir folgendes vor Augen:

2. CSS anpassen

Und hier kommt unsere CSS-Klasse zum Einsatz. In unserer style.css müssen wir nun lediglich ein paar Änderungen vornehmen, damit der eben eingefügte Titel dunkel und hinter dem eigentlich Titel dargestellt wird.

1
2
3
4
5
6
7
8
9
10

h2 {
	margin: 0;
	position: relative;
}
 
h2.shadow {
	color: #000000;
	margin: 1px 0 0 1px;
	position: absolute;
}

Das h2-tag bekommt die zusätzliche Eigenschaft position: relative; und h2.shadow wird schwarz und durch margin und position leicht versetzt hinter h2 dargestellt.

Mehr gibt es dazu nicht zu sagen, viel Spaß mit euren neu schattierten Überschriften