css: weiße Trennlinie gewünscht

[Jörg2]

Hallo,

ich hätte gerne zwischen dem Symbol und dem Text, der später in das DIV kommt, eine weiße Trennline, bekomms aber nicht hin.
Hatte schon versucht, ein zusätzliches Span einzubinden, aber dann gelang es mir nicht, die Trennlinie über das gesamte DIV zu erstrecken.

/* Der allgemeine Stil für alle Divs (erfolgreich oder Fehler) */
.success, .error_div, .info_div {
    cursor: url(inc/dropline/cross.gif), crosshair;
    position: fixed;
    top: -100px; /* Start-Position oben außerhalb des sichtbaren Bereichs */
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: opacity 0.5s ease, top 0.5s ease; /* Animation für top und opacity */
    opacity: 0; /* Start-Transparenz */
    z-index: 1000;
}

/* Fehlerhafte Div mit rotem Hintergrund */
.error_div {
    color: #ffffff;
    background: #E53935 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 24px;
    background-position: 10px center;
    padding-left: 40px;
    opacity: 1; /* Leicht transparent */
}

/* Zustand, wenn die Animation abgeschlossen ist und das Div sichtbar ist */
.success.show, .error_div.show , .info_div.show{
    top: 50px; /* Endposition des Divs nach der Animation */
    opacity: 1; /* Voll sichtbar */
}

Wie baue ich da eine dünne, weiße vertikale Trennlinie zwischen Symbol und Text ein?

Jörg

[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

[Gunnar Bittersmann]

@@Rolf B

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%

Es muss aber kein Gradient sein, bei dem die Farbe doppelt angegeben werden muss. Du stehst ja immer noch wie ein begossener Pudel da! 🐩

conic-gradient() ist längst nicht mehr hinter einem Feature-Flag versteckt.

Und gut, dass du fragst: zu image() sagt MDN: „Es gibt keinen Browser, der dieses Feature implementiert.“

Jolan tru

[Rolf B]

Hallo Gunnar,

solange white,white nebeneinander in einer Zeile steht und nicht drölf Fremdzeilen dazwischen stehen, macht mir das bisschen Wasser nichts aus…

Übrigens kann der lineare Gradient das auch, gerade ausprobiert:

background-image: linear-gradient(white 0% 100%) 2.5em center / 0.1em 100%

funktioniert.

Ja, linear ist ein Zeichen mehr als conic, also kein Battle-Material. Aber 0 100% auch nicht. #fff,#fff ist kürzer als white,white ist kürzer als white 0 100%.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Übrigens kann der lineare Gradient das auch, gerade ausprobiert:

Ich dächte, ich hätte das damals auch ausprobiert und es ging nicht. Sollte sich inzwischen die Implementierung in Browsern/die Spec geändert haben?

Vielleicht trügt auch meine Erinnerung und ich hatte es gar nicht ausprobiert, weil conic ja sowieso ein Zeichen kürzer ist als linear?

Jolan tru

[Jörg2]

Hallo Jörg,

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

Hallo Rolf,

nicht falsch verstehen... ich bastle nun schon den ganzen Abend an Deiner Idee... Aber ich kriegs nicht hin.

Morgen gehts weiter. 😬

Jörg

[Jörg2]

Hallo Rolf,

jetzt habe ichs endlich geschafft, danke für deinen Tipp!

Jörg