css: weiße Trennlinie gewünscht

[Rolf B]

Hallo Jörg,

ich würde einen Lineargradienten verwenden und die Hintergründe stapeln.

(1) Stapeln von Hintergründen:

Das Stapeln funktioniert mit einer Komma-Auflistung von Hintergründen. Der zuerst genannte liegt oben, der letzte unten.

.xyz {
   background: hintergrund1,
               hintergrund2,
               hintergrund3;
}

Ein Hintergrund kann sein:

• Ein Bild
• Ein Gradient (was letztlich auch ein Bild ist)
• Eine Farbe

Die Farbe steckt man tunlichst nach hinten, sonst sieht man vom Rest nichts mehr.

Dein Hintergrund 1 sollte dein Icon sein:

url("data....") left 10px center / 24px

Diese Formulierung kombiniert background-image, -position und -size. Die Size-Angabe kann in der background-Eigenschaft nur gemacht werden, wenn man auch eine Position angibt und wird durch ein / abgetrennt.

Dein Hintergrund 2 wäre dann ein Lineargradient. Einen solchen Gradienten kann man als Verlauf von Weiß nach Weiß gestalten, oder, mit etwas Chic, von transparent über weiß nach transparent zurück. Auch für den Gradienten kann man Position und Größe angeben. Es muss ein Gradient sein, weil sich Position und Größe für Farbangaben wie white nicht machen lassen.

linear-gradient(0deg, white, white) 40px center / 2px 100%

Dieser "Gradient" ist einfach weiß, er beginnt horizontal bei 40px und ist vertikal zentriert, er ist 2px breit und 100% hoch (man könnte ihn auch weniger hoch machen).

Hintergrund 3 ist die Hintergrundfarbe der Box, bei der Errorbox bspw. rot.

Diese ganzen px-Angaben sind allerdings nicht die richtige Lösung. Besser sind em-Angaben, damit sich alles an die ausgewählte Schriftgröße anpasst. Damit sieht das Ergebnis so aus. Die Zeilenumbrüche dienen der Forenlesbarkeit, aber hinter dem Komma sollte man auf jeden Fall einen machen.

.error_div {
   background: no-repeat left 0.6em center / 1.5em
                   url("data...."),
               no-repeat left 2.5em center / 0.1em 100%
                   linear-gradient(0deg, white, white),
               red;

Weitere Eigenschaften wie background-size oder background-repeat brauchst du dann nicht mehr.

Ein Gradient mit Transparenzverlauf am Rand könnte so aussehen:

linear-gradient(0deg, transparent, white 20% 80%, transparent)

Das ist: von Transparent über Weiß nach Transparent. Bei transparent steht keine Position, aber weil es die erste und letzte Farbangabe ist, sind es 0% und 100%. Bei white sind es zwei Angaben, d.h. Weiß geht von 20% bis 80%. Damit hast Du bei 0%-20% einen Verlauf von Transparent nach Weiß und bei 80%-100% den Verlauf von Weiß nach Transparent.

Der Gradientwinkel ist 0deg, die Richtung zeigt also senkrecht nach oben.

Rolf