Suche jemand der mir die Farbe von einer Grafik von Rot in Blau erstellt

[RumsWums]

Hallo zusammen,

ich habe seid Jahren eine Homepage diese ist vom Gerüst mit wenigen Grafiken ausgestattet, eigentlich nur mit zwei kleinen, die eine Farbe haben, diese ist bis jetzt noch rot, möchte sie aber jetzt gerne in Blau haben. Ich habe schon versucht die Farbe mit Photoshop zu ändern das hat auch wunderbar geklappt nur leider werden die ecken links und rechts sehr pixelig.

Ich würde mich freuen wenn sich jemand melden würde der dies eventuell "Sauber" für mich erledigen könnte da ich einfach kein Grafiker bin. Gerne (wenns hier erlaubt ist) springt für denjenigen oder derjenigen auch ein kleines Taschengeld raus.

Hier mal die Grafiken (der schwarze Balken ist in der Originale Grafik nicht.)

Rot (original)





Blau (mit Pixeln links und rechts an den ecken)





Vielen Dank

[-Matte-]

So?

[RumsWums]

Schon ja, aber der Grafikeffekt ist jetzt nicht mehr da und da ist irgendwas rotes noch in deiner Version.

Danke

[Artesia]

@RumsWums:
Die runde Ecken macht man heutzutage nicht mehr als Grafik, sondern mittels CSS (Stylesheet). Damit werden die Rundungen erstens sauber und zweitens verkürzen sich die Ladenzeiten der Webseite, weil man viel kleinere Grafik und nur eine benötigt.

In deinem Fall reicht eine 1px breite Grafik mit dem Verlauf, die man mittels

background-repeat:repeat-x;

in die Breite streckt und dann mit der neuen CSS3 Eigenschaft border-radius abrundet. Für runde Ecken oben links und oben rechts mit Radius 5px schreibt man folgendes:

{
border-top-left-radius:5px;
border-top-right-radius:5px;
webkit-border-top-left-radius:5px;
webkit-border-top-right-radius:5px;
moz-border-radius-topleft:5px;
moz-border-radius-topright:5px;
khtml-border-top-left-radius:5px;
khtml-border-top-right-radius:5px;
}

Es wird von allen normalen Browsern (z.B. Opera, Firefox, Safari, Chrome, Konqueror) korrekt dargestellt. Nur Internet Explorer kann es bis jetzt nicht, aber Microsoft zieht in Zukunft sicher auch nach.

Bei Gulli haben wir die runde Ecken auch nur mit Stylesheet gemacht.

[acoioboy]

[toldyou]

@RumsWums:
Die runde Ecken macht man heutzutage nicht mehr als Grafik, sondern mittels CSS (Stylesheet).

Ja und nein. Runde ecken macht man nur mittels CSS, wenn gewisse Browser nicht supported werden sollen. Oder man implementiert für diese eine JS Lösung ccs3pie
Abgesehen davon würde ich auch dazu raten, die runden Ecken mit dem border-radius Attribut umzuzsetzen. Browser, welche das nicht unterstützen, sehen die Abrundungen dann nicht, was aber nicht weiter tragisch ist.

Des Weiteren kann man auch Verläufe mit CSS umsetzen. Verwendet man das border-radius Attribut spricht nichts dagegen, auch den Verlauf mit CSS zu realisieren. Dann ist auch das ändern der Farbe ein Kinderspiel. Das würde die 1px breite Grafik, welche bei der Umsetzung von artesia notwendig ist, eliminieren und weitere Ladezeit einsparen.
man kann mit zB cssgenerator automatisch den CSS Code für den Verlauf generieren lassen.
Hier sein angemerkt, dass vor allem ältere IE Versionen (<=9) Probleme haben, einen Verlauf mit mehr als 2 Farben darzustellen, bzw das soweit ich weiß nicht möglich ist. So lange man aber nur Verläufe mit 2 Farben verwendet gibt es auch im IE keine Probleme (Sogar IE6 kann das).

[HouseKatZe]

Des Weiteren kann man auch Verläufe mit CSS umsetzen. Verwendet man das border-radius Attribut spricht nichts dagegen, auch den Verlauf mit CSS zu realisieren.

Es gibt leider noch keinen Standard für Gradients. Link

Man müsste dann in der Zukunft die CSS Datei anpassen. border-radius wird vom CSS Validator als valide angesehen.

[toldyou]

Was meinst du mit "es gibt noch keinen Standard für gradients"?
Es gibt ja auch noch keinen Standard für border-radius, wenn du die Browserspezifischen Vendorpräfixes meinst?

Oder meinst du, dass die Schreibweise für Webkit Gradients auf der von dir verlinkten Seite eine andere als die für die restlichen Browser ist?
Dann darf ich dich darauf hinweisen, dass nächste Mal nach aktuellen Quellen zu suchen. Firefox Version 3.x und Chrome 10.x ist mittlerweile nicht mehr aktuell.

Oder meintest du etwas ganz anderes?

[phre4k]

Leider werden ältere Browser noch sehr häufig eingesetzt und man muss darauf achten, dass diese die neuen Webtechniken eben nicht unterstützen. toldyou's Kommentar war ja insofern schon relativ treffend.

[HouseKatZe]

Oder meintest du etwas ganz anderes?

linear-gradient ist noch in der Entwicklung laut der Mozilla Seite:

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

border-radius scheint nicht mehr in der Entwicklung zu sein, kein grüner Kasten mit einer Warnung auf der Seite.

Was ich sagen wollte ist, dass es doch einen Grund gibt die Gradient Sachen noch nicht zu nutzen.

Der CSS3 Validator sieht das übrigens genau so.

div {
background-image: linear-gradient(yellow, blue);
border-radius: 5px 5px;
}

Fehler:

Value Error : background-image linear-gradient(yellow,blue ) is not a background-image value : linear-gradient(yellow,blue )

[toldyou]

linear-gradient ist noch in der Entwicklung laut der Mozilla Seite:

Das stimmt. Nichts anderes habe ich gesagt. Aber warum auf gradients verzichten, wenn es die Browser trotzdem unterstützen? Man darf nur nicht auf die Browserspezifischen Präfixe vergessen (-moz, -ms, -o, -webkit). Man darf auch nicht ungeschaut jedes CSS3 Feature, welches vielleicht einmal kommen wird, sofort und mit allen Präfixen verwenden.
Man schaut nach, welche Browser welche Features unterstützen.
Man informiert sich auch, welche Features man bereits benutzen kann und welche nicht.
Für viele Techniken gibt es einen Fallback. Um bei den Gradients als Beispiel zu bleiben:
Browser, welche Gradients nicht unterstützen, zeigen nur eine Hintergrundfarbe und keinen Verlauf an, was ich nicht als tragisch empfinde, da dadurch das Nutzererlebnis auf einer Seite nicht beeinträchtigt ist. Auch muss man da schon mit einem Browser wie IE<6 (bzw. glaube ich, dass sogar IE5 gradients unterstützt) oder einer veralteten FF, Opera, etc. Version auf die Seite kommen.

border-radius scheint nicht mehr in der Entwicklung zu sein, kein grüner Kasten mit einer Warnung auf der Seite.

Was border-radius angeht, hast du Recht. Das Feature ist nicht mehr in der Entwicklung, sondern kann ohne Präfixe eingesetzt werden.

Allerdings ist es nicht sinnvoll, auf eine Fertigstellung der CSS3 Spezifikation zu warten, bis man diese einsetzt. Vielmehr erachte ich es als Sinnvoll, Standards schon jetzt einzusetzen, sofern sie von genügend Browsern unterstützt werden. Bei CSS2 war es nicht anders, die Dinge, die die Browser unterstützt haben, wurden eingesetzt (+ den Eigenheiten der einzelnen Browser)

Der CSS3 Validator sieht das übrigens genau so.

Das empfinde ich nicht als tragisch, da das Nutzererlebnis dadurch nicht beeinträchtigt wird. Viel wichtiger finde ich eine semantisch gut strukturierte Webseite. So eine kann man aber nicht validieren lassen, um die muss man sich selber kümmern.

Außerdem: Wenn dir eine komplette Einhaltung von Richtlinien so wichtig ist, setzt du dann auch die Web Content Accessibility Guidelines (WCAG) 2.0 für eine barrierefreie Webseite auf jeder deine Webseiten um? Wenn nicht, wieso ist der CSS3 Validator, welcher auch unproblematische Syntax aufzeigt, so viel wichtiger als eine zugängliche Webseite?

[Artesia]

Okay, wenn ihr über "CSS3 pro und kontra" diskutieren wollt, verschiebe ich euch in Forum Webdesign. Der TS scheint sich um sein Thread und angebotene Lösungen sowieso nicht mehre interessieren, also ...

--> moved