[HTML] Verlaufsfarben

[dimitrif]

Hallo,

irgendwann hatte ich ein Programm gehabt, mit dem man Button erstellen kann. Da gab eine Funktion, ich konnte bei Farben Start-color und End-color einstellen. Im Hitergrund wurde es durch css realisiert. Nur jetzt weiß ich nicht mehr, wie das geht - hat jemand ein Beispielcode für mich?

Danke

 

[Zweipunktnull]

hat jemand ein Beispielcode für mich?

Einen Farbverlauf kannst du mit CSS nicht "programmieren". Da brauchst du ein Grafikprogramm wie Adobes Photoshop oder das kostenfreie the GIMP. Da dann einfach eine Grafik mit der Länge von einem Pixel erstellen und diese dann dem Button-div als background repeat-x geben.

 

[dimitrif]

Nein, das war mit css. Ich bin mir 100% sicher. Irgendeine Funktion gibt es. Wie gesagt, das Programm für Buttonerstelung konnte es und es war kein Photoshop. Leider habe ich es nicht mehr

 

[Zweipunktnull]

Joa man könnte theoretisch 100 div's unter/hintereinander hängen.
Damit würde man dann den gleichen Effekt erzielen.
Allerdings wäre das eine der beklopptesten Sachen, die man beim Webdesign machen kann und auf gar keinen Fall zu empfehlen!

Danach hättest du nur für den einen Farbverlauf eine HTML-Datei, so groß wie die Amazon-Startseite oder so... Mit anderen Worten das ist schwachsinn sowas nur mit CSS zu machen, denn eine - wie du es nennst - Funktion für einen Farbverlauf gibt es in CSS nicht.

 

[Keita]

Du meinst sicherlich das filter-Attribut sowie den Gradient-Filter, die Microsoft mit dem Internet Explorer 5.5 eingeführt hat. Mit der Anweisung

<input style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000')" type="text" value="Farbverlauf!" />

hast bspw. einen vertikalen Verlauf von blau nach schwarz.

greetings, Keita

 

[Zweipunktnull]

Aber das ist doch kein Standard-CSS!? Mit welchen Browers funktioniert das denn? Nur mit dem Internet Explorer? Oder haben die anderen Hersteller das mittlerweile übernommen? Wenn's nur mit dem Internet Explorer geht, dann wäre diese Methode in etwa so sinnfrei wie die Methode mit den 100 div's. In Deutschland hat alleine der Firefox eine Verbreitung von ungefähr 40 Prozent.

 

[Keita]

Deswegen habe ich auch Microsoft geschrieben und nicht W3C. Es ist übrigens deutlich sinnvoller als 100 div-Elemente (die zudem gar nicht funktionieren würden), da es nicht semantisch unnötige Elemente für Visuelle Zwecke "mißbraucht", zudem ist es nicht tragisch, wenn andere Browser den Gradient nicht darstellen können/würden. Zuguterletzt gibt es noch conditional comments, um IE-spezifische Bestandteile zu separieren.

greetings, Keita

 

[mr5]

Da habe ich mir auch Gedanken zu gemacht. Am Besten fande ich dann ein 1x3000 Pixel JPG Bild mit Photoshop mit sauberen weichen Farbübergang.
Das Ergebnis könnt Ihr euch hier anschauen: www.startmonitor.de

 

[dimitrif]

OK, vielen Dank alle Empfehlungen. Wahrscheinlich mach ich doch sowas mit Photoshop. Das wollte ich am Anfang auch, aber ich dachte vielleicht klappt es ohne.....

 

[Zweipunktnull]

zudem ist es nicht tragisch, wenn andere Browser den Gradient nicht darstellen können/würden.

Nicht tragisch in dem Sinne, dass die Website weiterhin einwandfrei bedien- und benutzbar bleibt.

Allerdings schon tragisch in dem Sinne, dass man Designs (dazu gehört ja auch der Farbverlauf-Effekt) zur schönen Darstellung der Website entwirft und es im Sicherheit nicht im Sinne des Entwicklers ist, dass die eigentlich entworfene Darstellung nur auf 50% der Rechner läuft und der erst eine optisch nicht so ansprechende Version bekommt.

Insofern ist die background-image Methode in jedem fall vorzuziehen.

 

[HighTec]

Und so schwer ist es auch nicht mit irgend enem Programm wie GIMP oder Photoshop ein image zu erstellen. Das dürfte in soweit das einfachste und das sicherste sein. So kannst du dir auch sicher sein, dass jeder es sosieht wie du es willst.