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:

(Opera ab Version 11.10, 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

div.borderimage {
	-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 */
}

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.

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 zwischen zwei Farben

Linearer Verlauf

Zuerst einmal ein einfacher, linearer Verlauf:

1
2
3
4
5
6
7
8

div.lin_grad {
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#adf)); /* Safari, Chrome */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome - neue Syntax! */
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 gradient, 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: 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
8

div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
background:-webkit-radial-gradient(center, #fff, #adf); /* Safari, Chrome - neue Syntax! */
background:-o-radial-gradient(center, #fff, #adf); /* Opera, funktioniert noch nicht, aber sicherlich bald */
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..

-moz-linear-gradient und -moz-radial-gradient für Firefox und -webkit-gradient für Safari und Chrome (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ß damit.

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.