FILMSTARTS.de Suchplugin

Wenn ihr wie ich oft Infos zu Filmen im Netz sucht, gibt es dafür diverse Seiten. Der ein oder andere von euch benutzt vielleicht FILMSTARTS.de (im weiteren einfach nur Filmstarts genannt). Und je häufiger ihr die Seite besucht oder nach bestimmten Filmen suchen wollt, desto notwendiger wird ein Suchplugin für Firefox. Da Filmstarts aber sein Design und seine Seitenstruktur geändert hat, funktionieren die bisherigen Suchplugins nicht mehr richtig. Also habe ich mir eines dieser Plugins angepasst und teile es mit euch.

Klickt einfach auf folgenden Link und wählt dann in der Suchleiste von Firefox die neue Suchmaschine aus.

Das wars auch schon, mehr gibts nicht zu tun, viel Spaß beim Suchen.

Update: Es hatte sich noch ein Fehler eingeschlichen, der dazu führte, dass Umlaute in der Anfrage nicht ordentlich kodiert bei Filmstarts angekommen sind. Dieser Fehler ist jetzt behoben!

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:

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; /* alle Browser ausser IE */
}

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
4
5

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 Textshadow 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:

(Firefox sogar schon ab Version 1.5)

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; /* 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; /* 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; /* 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; /* 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ß!

options verstecken ist gar nicht so einfach, auch nicht mit jQuery

Diese Woche musste ich auf Arbeit im Zusammenhang mit einem Projekt ein Formular umsetzen, dass eine Besonderheit hatte: Es bestand aus zwei Selectboxen, die voneinander abhängig waren. D.h. wenn man mit einer Selectbox etwas ausgewählt hat, sollten sich die Optionen der zweiten Selectbox ändern (wegfallen oder dazu kommen). Ich habe mir daraufhin mit jQuery eine Funktion geschrieben, die das für mich erledigt.

Ohne mir groß etwas dabei zu denken, nutzte ich die hide()-Funktion, die jQuery standardmäßig mitbringt. Alles funktionierte einwandfrei in Firefox und da ich davon ausgegangen bin, dass das JavaScript-Framework Cross-Browser-kompatibel ist, teste ich die Funktion nicht in anderen Browsern und kümmerte mich stattdessen erstmal um das Layout. Als alles fertig war, freute ich mich, rechnete meine Zeit ab und widmete mich anderen Tickets.

Gestern Mittag dann erhielt ich den Hinweis, dass die Auswahl der Selectboxen im IE7 nicht funktioniert. Gut dachte ich mir.. schaust es dir mal an.. und tatsächlich: egal was ausgewählt wurde, die zweite Selectbox blieb mit allen Optionen befüllt, es tat sich nichts.

Verdammter Internet Explorer!

.. schoss mir durch den Kopf. Also öffnete ich Opera, Chrome und Safari und testete das Formular dort – wieder nichts. In keinem Browser (außer Firefox) funktionierte die Auswahl. Langsam wurde ich etwas nervös..

Wie löse ich das Problem jetzt ohne viel Aufwand?!

Ich überlegte kurz und dann viel mir die Lösung ein, anstatt die option-Tags zu verstecken, musste ich sie nur deaktivieren. Also hab ich die hide()-Funktion mit attr(‘disabled’,'disabled’) ausgetauscht und schon gings. Yay, der Tag war gerettet!

Merke:

Niemals options versuchen zu verstecken, das funktioniert nicht in allen Browsern, einfach nur deaktivieren!

Wieder etwas dazu gelernt!

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

div.borderimage {
	-moz-border-image:url(pikachu.png) 49 41 repeat; /* Firefox */
	-webkit-border-image:url(pikachu.png) 49 41 repeat; /* Safari, Chrome */
	border-image:url(pikachu.png) 49 41 repeat; /* Opera (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.

IE9 Preview

Das ist sie also, die erste offizielle Vorschau auf den IE9. Microsoft hat gestern oder so das Programm zum Download freigegeben und erhofft sich damit viel Feedback, um das Produkt weiter zu verbessern – man hat also dazugelernt.

Mit dem neuen Internet Explorer hat Microsoft etliches vor, endlich will man zu den anderen Browsern aufschließen, sie sogar teilweise überholen. Warum auch nicht, bis der IE9 erscheint, werden sich auch die anderen Browser verbessert haben. Um erste Erfolge vorzuweisen, hat man gleich ein paar Statistiken und Demos auf die Startseite gepackt. Diese sind natürlich mit Vorsicht zu genießen aber im Großen und Ganzen kann man davon ausgehen, dass der Internet Explorer um einiges schneller geworden ist – besonders beim Verarbeiten von JavaScript und im Grafik-Rendering.

Gute Neuigkeiten

Nennen wir doch mal ein paar Fakten:

1. besteht Acid2
2. 55 Punkte in Acid3
3. alle CSS3 Selectoren werden unterstützt
4. Boder-Radius und RGBa wird unterstützt
5. Hardwarebeschleunigung für 2D Animationen
6. schnelles Javascript
7. ein bisschen HTML5 Support
8. Unterstützung für SVG

Das klingt zugegeben alles sehr verlockend und ich freue mich über die CSS3 Unterstützung, je mehr davon im endgültigen Code enthalten ist, desto besser. Hoffen wir, dass die Auflistung nicht die endgültige Feature-List bleiben wird und noch einige Dinge wie z.B. Box-Shadow, Text-Shadow und video-Support in der fertigen Version vorfinden werden.

Qualität der Preview Version

Die (nicht vorhandene) GUI des IE9.

Ich weiß, man sollte an eine frühe Alpha keine hohen Erwartungen stellen aber etwas mehr Mühe hätten sich die Typen aus Redmond schon geben können.. keine Adressleiste, keine Tabs.. Hallo?! Naja vielleicht bin ich auch nur von den Firefox Alphas verwöhnt aber so kann man den IE sicherlich nicht auf seine Alltagstauglichkeit hin testen.

Besonders nervig ist der Wegfall der Adresszeile, will man die Seite wechseln muss man über Page->Open ein Fenster öffnen, in dem man die URL eintragen kann – überflüssig zu sagen, dass das widerlichst und umständlich ist.

Adresszeile mal anders..

Außer dem Aussehen ist mir das Textrendering negativ aufgefallen. Es erinnert mich stark an das von Safari 3: Die Schrift sieht etwas matschig und unleserlich aus. Ich habe keine Ahnung, ob das so gewollt ist oder ob es nur ein böser Nebeneffekt der Hardwareunterstützung ist. Mal sehen, wie sich das weiterentwickelt.

Fazit

Alles ganz lustig und prima aber es bedarf doch noch etwas mehr als das, um bei den großen Jungs mitspielen zu können. Microsoft scheint mir aber auf dem richtigen Weg zu sein. Moderne Standards werden eingebaut und die Schnelligkeit wurde stark verbessert. Das ist aber nicht alles, Sicherheit, Privatsphäre und gute Bedienbarkeit sind mindestens genauso wichtig. Mal sehen, welche Antwort der IE9 zum Thema Erweiterungen parat haben wird.

Auf jeden Fall ist es ein Schritt in die richtige Richtung. Ich denke auch, dass Mircosoft noch viel Zeit in seinen neuen Browser investieren wird und er dadurch ein würdiger Nachfolger zum bereits recht guten IE8 darstellen kann. Wir werden sehen, was die Zeit bringt. Bis dahin viel Spaß mit der Vorabversion.

Strata 3.7 Nightly

Mit der gestern veröffentlichten zweiten Alpha von Firefox 3.7 bringt Mozilla einige Neuerungen ins Programm, dazu zählen unter anderem das placeholder-Attribut (auf das ich später noch genauer eingehen werde), Performance- und Security-Verbesserungen, CSS-Support für -moz-image-rect() sowie Änderungen am User Interface (UI). Letzteres äußert sich im Wegfall eines Navigationsbuttons. Stopp und Neuladen wurden zu einem Button verschmolzen. Browser wie Opera, Safari oder Chrome fahren schon lange auf dieser Schiene, nun zieht Firefox nach.

Neuer Look in Nightly Builds

Wer die täglich aktualisierten Nightly Builds benutzt, kann live miterleben, wie sich das Aussehen des Browsers nach und nach verändert. Das vor langer Zeit angekündigte Re-Design für Version 3.7/4.0 wird derzeit umgesetzt, befindet sich aber noch in einer recht frühen Phase. Im Moment sind die neuen Buttons schon integriert, Adress- und Suchleiste wurden ebenfalls verändert. Hier mal ein Bild zum Vergleich:

Oben: altes Design (3.0 - 3.6), Unten: neues Design (3.7a3pre vom 04.03.2010)

Ich bin gespannt wie es mit deutlich mehr Aero Glass aussehen wird. Wann es soweit sein wird, kann derzeit niemand genau sagen aber die Fortschritte sehen aus meiner Sicht schon ziemlich gut aus.

HTML5: Placeholder Attribut

Vielleicht könnt ihr euch noch an den Artikel jQuery One-Liners erinnern, speziell an den Teil mit dem Suchfeld. Der vorbelegte Inhalt verschwindet sobald man mit der Maus in das Feld klickt, bleibt es leer und man verlässt es wieder, wird das Feld erneut befüllt.

Genau dieses Verhalten wird durch das placeholder-Attribut nachgestellt. Allerdings braucht es dafür kein Javascript mehr, der Browser erledigt es ganz von allein. Hier ein Beispiel (Achtung: funktioniert nur mit Safari, Chrome und Firefox 3.7a2):

Eine ganz nette Sache, die auf meiner Seite zwar invalide ist (habe noch nicht auf HTML5 umgestellt), für die Zukunft aber ein nützliches Attribut darstellt.

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:

Update: IE9 wirds auch können -HURRA!

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 */
-webkit-border-radius:10px; /* Safari, Chrome */
border-radius:10px; /* Opera (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 */
-webkit-border-radius:10px 10px 0 0; /* Chrome */
border-radius:10px 10px 0 0; /* Opera (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:

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

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 */
}

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.

Radialer Verlauf

1
2
3
4

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 */
}

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.

Firefox 3.7a1

Dieser Artikel wurde mit der neuen Version verfasst.

Mozilla Developer Preview 3.7 Alpha 1 ist die offizielle Bezeichnung des Programms, das sich ganz ohne Probleme parallel zum “normalen” Firefox installieren und testen lässt. Derzeit ist alles noch auf Englisch und die meisten Add-ons sind wie immer nicht kombatibel. Abhilfe schafft nur der Add-on Compatibility Reporter, der zwar momentan selbst noch nicht kompatibel ist, aber funktioniert, wenn man ihn in Version 3.6 installiert.

Die erste Seite nach dem Start gratuliert uns zu unserer Entscheidung und erklärt kurz, was sich in der Alpha alles geändert hat. Demnach arbeiten die Entwickler an neuen CSS-Features (transition, image-rect) und Techniken wie SVG(-Animations) und WebGL, das es ermöglichen soll 3D-Szenen direkt im Browser rendern zu lassen. Diese Sachen befinden sich aber alle noch in einer frühen Phase und haben noch einen mehr oder weniger langen Weg bis zur vollständigen Implementierung vor sich. Trotz allem steigt die Punktzahl im Acid3-Test um zwei Punkte auf 96 Zähler.

Der Windows 7 – Support ist zurückgekehrt. Sowohl Tabvorschau als auch Jumplists (mit häufig besuchten Internetseiten) funktionieren meistens problemlos.

Über Firefox 3.7a1

Vom neuen Design für alle Betriebssysteme ist bislang noch recht wenig zu sehen, einzige Neuerung: Stop- und Reload-Button sind verschmolzen. Aber das ist nicht weiter verwunderlich, wurden doch erst vor kurzem die dazu nötigen Bugs gefiled. Möglich wäre auch, dass Mozilla bis zur Version 4.0 Anfang-Mitte nächsten Jahres damit wartet.