Verlauf - Hintergrund...

[micado]

Hallo,
ich möchte von oben nach unten einen verlauf im Hintergrund haben.

Wie ist dies mit einfachen Mittel in HTML-Code machbar.

Es soll oben mit #060709 beginnen
und unten mit #394044 enden.

Ich habe keine Idee wie man das hinbekommt.

Meine HTML-Kenntisse sind sehr gering. Taste mich so nach und nach daran.

Gruß
micado

[Beat]

Die derzeit einzige Methode, Gradiente in HTML zu realisieren, besteht über die CSS Einbindung von Hintergrundbilder.

body{ background-image: url(path-to-your-img); }

mfg Beat

[bleicher]

Grüße,
windows erzeugt beim extremen hochskalieren vn kleinen (2x2 px) grafiken schöne verläufe - gibts nicht sowas auch für browser O_o?
MFG
bleicher

[micado]

Die derzeit einzige Methode, Gradiente in HTML zu realisieren, besteht über die CSS Einbindung von Hintergrundbilder.

body{ background-image: url(path-to-your-img); }

mfg Beat

Hallo ---hört sich ja gut an.... aber wie geht das?
Gruß
JR

[Beat]

Die derzeit einzige Methode, Gradiente in HTML zu realisieren, besteht über die CSS Einbindung von Hintergrundbilder.

body{ background-image: url(path-to-your-img); }
Hallo ---hört sich ja gut an.... aber wie geht das?

Du nimmst ein Grafik-Programm deiner Wahl und erstellst ein Gradient und speicherst als png.
Das Bild kann bei linearen Gradienten bei png's relativ gross sein, weil png dies gut komprimiert.
Damit's bei MSIE keine Probleme gibt, das png ohne Alpha Kanal speichern.

Zum Optimieren verwende ich pngcrush, obwohl die meisten Programme komprimieren png's schon gut genug.

mfg Beat

[at]

Hallo.

Die derzeit einzige Methode, Gradiente in HTML zu realisieren, besteht über die CSS Einbindung von Hintergrundbilder.

Ach so.
MfG, at

[Samoht]

Gudn!

Die derzeit einzige Methode, Gradiente in HTML zu realisieren, besteht über die CSS Einbindung von Hintergrundbilder.

Ach so.

Mag sein, dass Du Dich lediglich auf die Aussage beziehst es gäbe absolut _keine_ Alternative.
Die webkit-Lösungen sind zwar eine - aber IMHO keine praktikable.

Gruß aus Fürth in Mittelfranken,
Samoht

[at]

Hallo.

Mag sein, dass Du Dich lediglich auf die Aussage beziehst es gäbe absolut _keine_ Alternative.
Die webkit-Lösungen sind zwar eine - aber IMHO keine praktikable.

Ich mag einfach diesen Absolutheitsanspruch nicht.
Und ich habe ja auch weder die derzeit gängige Variante als veraltet verworfen, noch habe ich mich unflätig gegenüber Verfechtern dieser Methode geäußert.
Meine Antwort war eine Ergänzung und diente ausschließlich der Erweiterung des Horizontes.
MfG, at

[Samoht]

Gudn!

Ich mag einfach diesen Absolutheitsanspruch nicht.

Verstehe ich, kein Thema!

Und ich habe ja auch weder die derzeit gängige Variante als veraltet verworfen, noch habe ich mich unflätig gegenüber Verfechtern dieser Methode geäußert.

Habe ich Dir auch nicht vorgeworfen :)

Meine Antwort war eine Ergänzung und diente ausschließlich der Erweiterung des Horizontes.

Das ist gut und ich danke Dir für diese Info (_wirklich_)!

Allerdings möchte ich gerne von Dir wissen, ob Du ganz objektiv betrachtet, diese Methoden verwenden würdest?

Ich hab das nur überflogen und auch meinen Safari unter Windows geöffnet (in dem das ja angeblich funktionieren soll), da ich neugierig war. Aber ich sah leider keine Gradienten, egal in welchem Beispiel. Muss ich dafür noch irgendetwas aktivieren? Hast Du schon damit Erfahrungen gesammelt?

Gruß aus Fürth in Mittelfranken,
Samoht

[at]

Hallo.

Allerdings möchte ich gerne von Dir wissen, ob Du ganz objektiv betrachtet, diese Methoden verwenden würdest?

Ja, zu bestimmten Zwecken, nämlich überall dort, wo niemand, dem diese Technik vorenthalten wird, wirklich viel verpasst.
Ich verwende beispielsweise ein unteres Rahmensegment statt Unterstreichungen für Verweise. Da sähe ein gleichmäßiges Auslaufen der Rahmenfarbe über die gesamte Höhe des Verweises bei Mausberührung vielleicht ganz gut aus. Oder ein dezenter Farbverlauf für Eingabefelder oder Schaltflächen. Eben überall dort, wo es nicht wirklich wichtig ist, aber man den Vorteil der vektorartigen Skalierung nutzen kann.

Ich hab das nur überflogen und auch meinen Safari unter Windows geöffnet (in dem das ja angeblich funktionieren soll), da ich neugierig war. Aber ich sah leider keine Gradienten, egal in welchem Beispiel. Muss ich dafür noch irgendetwas aktivieren?

Yep.

Hast Du schon damit Erfahrungen gesammelt?

Nein, ich verwende Beta-Versionen, aber keine Nightly Builds. So viel Vorsprung zum üben brauche ich nicht bis zum offiziellen Erscheinen der Techniken in den regulären Ausgaben.
MfG, at

[Samoht]

Gudn!

Yep.

Achso... klar... ich dachte erst Webkit wäre schon enthalten - Danke!
Schaut ganz gut aus und ist einfach zu handhaben. Für mich persönlich sehe ich allerdings (leider) (noch) keinen Nutzen.

Gruß aus Fürth in Mittelfranken,
Samoht

[Gunnar Bittersmann]

@@micado:

ich möchte von oben nach unten einen verlauf im Hintergrund haben.

Wie ist dies mit einfachen Mittel in HTML-Code machbar.

Es soll oben mit #060709 beginnen
und unten mit #394044 enden.

Ich habe keine Idee wie man das hinbekommt.

Mit HTML: gar nicht. HTML ist für die strukturelle Auszeichnung des Inhalts zuständig, nicht für Angeben zu dessen Präsentation, das erledigt http://de.selfhtml.org/css/@title=CSS.

Wie andere schon sagten, mit einem Bildverarbeitungsprogrammm deiner Wahl einen Verlauf erzeugen (BTW, Powerpoint kann das auch) und als Hintergrundbild verwenden. Der nicht vom Bild überdeckte Teil der Box sollte dann die Endfarbe des Verlaufs haben, bei dir also:

body  
{  
  background-color: #394044;  
  background-image: url(foo);  
  background-repeat: repeat-x;  
}

oder kurz

body  
{  
  background: #394044 url(foo) repeat-x;  
}

bzw.

body  
{  
  background-color: #060709;  
  background-image: url(foo);  
  background-position: bottom;  
  background-repeat: repeat-x;  
}

oder kurz

body  
{  
  background: #060709 url(foo) bottom repeat-x;  
}

Mit CSS 2.1 können nämlich keine Hintergrundbilder skaliert werden; das wird erst mit CSS3 möglich sein.

Soll der Verlauf wirklich genau die Box ausfüllen, müsste ein 'img'-Element mit 100% Höhe dafür herhalten und der Seiteninhalt auf diesem positioniert werden.

Live long and prosper,
Gunnar