Übergang zwischen Hintergrundfarben

Ein Problem, das mich bei der Arbeit an Websites häufig verblüfft, ist der elegante Übergang zwischen zwei unterschiedlichen Hintergrundfarben. Zum Beispiel hat der obere Teil einer Site, an der ich arbeite, einen grauen Hintergrund, während der untere Teil eine bläuliche Textur hat. Dadurch entsteht folgendes:Geben Sie hier die Bildbeschreibung ein

Diese beiden Farben verschmelzen fast miteinander und die Grenze zwischen ihnen ist nicht sehr verbreitet. Gibt es eine Möglichkeit, Grenzen zu verwenden, um diesen Übergang zu erleichtern? Würde es helfen, das Grau dunkler / heller zu machen?

Unter ux.stackexchange.com erhalten Sie möglicherweise bessere Antworten

Antworten (3)

Ich denke, der erste Schritt ist, wie Sie sagen, das Grau dunkler oder heller zu machen (was auch immer Ihrer Meinung nach am besten aussieht). Dies erzeugt mehr Kontrast zwischen den beiden Farben und verhindert, dass sie sich so stark vermischen. Ein Beispiel dafür ist unten, wo ich das Grau auf #333333 abgedunkelt habe:

verdunkelt grau

Ich empfehle auch, etwas Hervorhebung hinzuzufügen, um die Kante des blauen Bereichs weiter zu schärfen, was zu Folgendem führt (Variieren des y der Hervorhebungslinie):

hervorgehobener Rand

abwechslungsreiches Highlight

Hier ist auch die PSD, damit Sie mit den Deckkraftwerten in den Lichter- und Schattenbereichen experimentieren können:

http://dl.dropbox.com/u/12931900/example.psd

Eine Technik, die ich immer ansprechend fand, ist eine wahrhaft definierte Kante. Verwenden Sie eine neutrale Farbe (Grau funktioniert), um eine Designkante mit einem Schatten darunter zu erstellen. Sie können das Bild von oben wie folgt erstellen:

COLOR 1   1111111111111
          1111111111111
EDGE      -------------
SHADOW    ^^^^^^^^^^^^^
          2222222222222
COLOR 2   2222222222222

Machen Sie das 5-10 px breit und so hoch, wie Sie es brauchen. Der untere Teil Ihres Hintergrundbilds sollte in Ihre Farbe 2 übergehen, dann in Ihr CSS:

body{
background-image: url(...);
background-repeat: repeat-y;
background-color: color2;
}

Dadurch entsteht ein durchgehender Kacheleffekt für breitere Auflösungen, wodurch eine schöne 3D-Landschaft entsteht. Ich habe dies mehrmals mit äußerst günstigen Ergebnissen verwendet.

Ich würde eine als Hintergrundfarbe und die andere als sich wiederholendes 1px breites Bild machen, das von einer Farbe zu einem transparenten Farbverlauf geschnitten wird. In diesem Fall würde ich wahrscheinlich Grau als Hintergrundfarbe auf dem Stylesheet verwenden, dann in Photoshop einen blauen bis translinearen Farbverlauf erstellen, ein 1-Pixel-Segment davon kopieren und horizontal kacheln.

Übergang zwischen Hintergrundfarben
AntwortenHierDatenschutz-Bestimmungen1y, 0v