Firefox 4

Hi Jörg, kann man eigentlich schon für Flächen Farbverläufe definieren?

Bin zwar nicht Jörg, aber man kann mit CSS Farbverläufe definieren.
Hier ein Beispiel:

www.homepage-anleitung.de/2010/08/farbverlauf-mit-css-3/

westciv.com/tools/gradients/index.html

Hallo Thomas

Musstest du eine solche Frage stellen?

Ja und nun kommt das berüchtigte ABER. welches mich dazu veranlasst viel zu schreiben.

Erstmal zu Hannelores Links, an denen man sich nicht orientieren sollte.

maddesigns.de/webkit-andert-css3-gradient-support-und-orientiert-sich-am-mozilla-syntax-739.html

Beispiel meine Navigationsbuttons oder die automatischen erstellten Farbverläufe die mit joerghuelsermann.de/farbe/ erstellt werden.

maddesigns.de/css3-gradient-jetzt-auch-in-opera-799.html

maddesigns.de/linear-gradient-verlauf-css3-adventskalender-tag-3-363.html

Hallo
ich erweitere das Thema Firefox 4 mal ....

und zwar hab ich den grade wieder deinstalliert aus folgendem Grund:

ich benutze bei meiner Webseite eine grafische Navigation mit "Kennzeichnung von Links" . In den bisherigen Browsern FF3.6 , IE7 u.8 , Opera 10.irgendwas, um nur mal einige zu nennen, funktionierte dies einwandfrei. Im neuen Firefox und auch im neuen IE9 funktionierte es nicht mehr. Ich habe auch nicht rausfinden können wie und wo man ggf. was einstellen kann damit es wieder funktioniert.
Wenn einer ne Idee hat hierzu ......immer gerne, dann installier ich den neuen FF wieder

netten Gruß

Kalle

joerg schrieb:

Hallo Thomas

Musstest du eine solche Frage stellen?
...

Es tut mir Leid, die Neugier war zu groß :o(

Aber danke für die Antworten, das es Browser interne Lösungen gibt wusste ich schon, ich hatte aber mehr gehofft das es mit in den CSS3 Standard kommt und Browser übergreifent einheitlich unterstützt wird.

Den Firefox 4 hatte ich nur kurz getestet da er ja bei Ubuntu 11.4 (das kurz vor dem releas steht (Ja Schleichwerbung)) dabei ist. Mit SVG hatte ich mich bisher kaum beschäftigt, ich glaub die HTML5 Unterstützung und Sicherheit steht beim FF4 im Mittelpunkt?


Viele Grüß Thomas

Hallo Thomas

Ich denke es lohnt sich, sich mit SVG zu beschäftigen.

[html]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="10%" style="stop-color:#ff9900;" />
<stop offset="75%" style="stop-color:#ffffcc;"><animate attributeName="stop-color" attributeType="CSS" values="#ffffcc;#000033;#ffffcc" repeatDur="indefinite" begin="1s" dur="20s" /></stop>
</linearGradient>
</defs>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>[/html]

Packe dir den Code in eine Datei mit der Endung svg und rufe die mal auf.

Bis das mit CSS nachstellbar wäre, mit einer einheitlichen Syntax für die aktuellen Browser, wird wahrscheinlich noch viel Zeit ins Land gehen. Und es ist weitaus mehr möglich wenn ich das richtig verstehe. Aber so tief stecke ich in dem Themengebiet noch nicht drin. Bis jetzt waren das nur ein paar Stunden, wo ich mich in die Materie rein gekniet habe.

SVG gehört wie Mathml oder wie das heisst zu HTML5.

Ich denke die Browserhersteller haben noch genug alle zu tun um HTML5 und CSS3 in ihre Browser zu integrieren. Das Schrauben geschieht an allen Ecken.

Ich habe zumindest heute über meine Ausführungen von gestern mal nachgedacht und die browserspezifischen CSS Anweisungen für den Farbverlauf aus meiner CSS Datei entfernt.
Wenn irgendein Browser dann die normale Syntax darstellen kann wird halt eben nicht mehr die SVG Datei aufgerufen und solange habe ich halt eben ein paar Requests mehr.

Für den ersten Ãœberblick

www.selfsvg.info/index.php

svg.tutorial.aptico.de/start.php

Hehe das ist echt Praktisch :o)

Danke für den Tipp.

[html]
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="verlauf">
<stop offset="60%" style="stop-color:#FFF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F90;stop-opacity:1" />
</radialGradient>
</defs>
<rect x="-150%" y="-150%" width="300%" height="300%" fill="url(#verlauf)" />
</svg>
[/html]

joerg schrieb:
...
Und SVG innerhalb von HTML würde ich derzeit noch nicht verwenden wenn ich mir die Browserunterstützung so anschaue. Opera alleine stellt das dar was ich wollte und IE9 habe ich dabei nicht getestet.
...

Hi Joerg,

wann glaubst du kann man SVG richtig effektiv/produktiv einsetzten? Noch ist die Unterstützung recht mager, wobei es mich schon reizt mit dem System mal eine Galerie zu erstellen. Mit den ganzen Filter und Animationsmöglichkeiten kann man da bestimmt richtig gute Resultate erzielen?
Vor allem kann man ja auch JavaScript mit in die Grafik schreiben, was gleich noch mehr Möglichkeiten bietet, ohne das man so viel neues lernen muss.


Schöne Grüße
Thomas

Kaheti schrieb:

Hallo
ich erweitere das Thema Firefox 4 mal ....

und zwar hab ich den grade wieder deinstalliert aus folgendem Grund:

ich benutze bei meiner Webseite eine grafische Navigation mit "Kennzeichnung von Links" . In den bisherigen Browsern FF3.6 , IE7 u.8 , Opera 10.irgendwas, um nur mal einige zu nennen, funktionierte dies einwandfrei. Im neuen Firefox und auch im neuen IE9 funktionierte es nicht mehr. Ich habe auch nicht rausfinden können wie und wo man ggf. was einstellen kann damit es wieder funktioniert.
Wenn einer ne Idee hat hierzu ......immer gerne, dann installier ich den neuen FF wieder

netten Gruß

Kalle

Hallo Kalle,

ich denke die Lösung liegt darin, dass Firefox bei der :visited-Klasse aus Sicherheitsgründen nur wenige Änderungen zulässt. (siehe privacy-related changes coming to CSS :visited)
Ich würde dir dennoch empfehlen, Firefox 4 zu installieren.

Hallo Thomas

Ich mache mir keine Gedanken über Browserunterstützung von SVG Dateien. Aktuelle Browser sollten sie zum grössten Teil fehlerfrei darstellen können bis auf den Safari der nicht alles richtig interpretiert.

Sicherlich ist es wenn man ohne kommerziellen Gedanken einfacher ältere Browser einfach mal zu ignorieren und nur bescheidene Fallbacklösungen parat zu haben.

Zu diesem Zeitpunkt sollte man zumindest mit SVG Dateien und ihren Möglichkeiten beschäftigen.
Auf die Vorteile wie Nachteile halt eben hinweisen können.

Um meine Ansicht zu unterstützen 2 Beispiele.

W3C stellt für das HTML5 Logo auch eine SVG Datei bereit.

In der Wikipedia findet man viele SVG Dateien zu diesem Zeitpunkt und es werden noch mehr werden denke ich mal.

Mittlerweile ist es doch auch so das für alle Browser spezifische Farbverläufe per CSS möglich sind. Bis halt eben auf den Internet Explorer der auf eine ganz andere Syntax setzt.
Momentan halte ich Farbverläufe durch SVG Dateien am sinnvollsten.
Das ist aber eine Glaubensfrage, die jeder für sich selbst beantworten muss.

Gruß
Jörg