CSS Outline Color

CSS Outline Color: outline-color in CSS legt die Farbe des Umrisses eines Elements fest. Im Gegensatz zur border-color beeinflusst die outline-color die Größe und Position des Elements nicht, da Umrisse stets außerhalb des Box-Modells gezeichnet werden. Sie eignet sich daher hervorragend, um fokussierte oder hervorgehobene Elemente farblich abzugrenzen.

Werte für outline-color

• Vordefinierte Farben: Zum Beispiel red, blue, green.
• Hexadezimale Werte: Zum Beispiel #FF5733 für spezifische Farbtöne.
• RGB- und RGBA-Werte: Zum Beispiel rgb(255, 87, 51) oder rgba(255, 87, 51, 0.5), wobei die RGBA-Notation eine Deckkraftangabe ermöglicht.
• HSL-Werte: Zum Beispiel hsl(30, 100%, 60%) für fein abgestimmte Farben.
• Schlüsselwort invert: Die Farbe wird invertiert, basierend auf dem Hintergrund des Elements. Dies kann hilfreich sein, um einen Umriss unabhängig vom Hintergrund sichtbar zu machen.

/* Beispiele für outline-color */
.box1 {
    outline-color: red;               /* Vordefinierte Farbe */
}

.box2 {
    outline-color: #FF5733;           /* Hexadezimaler Wert */
}

.box3 {
    outline-color: rgb(60, 179, 113); /* RGB-Wert */
}

.box4 {
    outline-color: rgba(255, 0, 0, 0.5); /* Halbtransparente RGBA-Farbe */
}

.box5 {
    outline-color: invert;            /* Invertierte Farbe */
}

Beispiel: outline-color in Kombination mit anderen Outline-Eigenschaften

.button {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #1E90FF; /* Dunkelblauer Umriss */
}

Hinweise zur Verwendung

• Barrierefreiheit: Ein klarer und gut sichtbarer outline-color kann dabei helfen, den Fokuszustand eines Elements hervorzuheben, insbesondere für Tastaturnutzer:innen.
• Kontrast: Bei der Wahl der Outline-Farbe sollte ein guter Kontrast zum Hintergrund bestehen, damit der Umriss auf verschiedenen Bildschirmen und unter verschiedenen Lichtverhältnissen sichtbar bleibt.

Häufig gestellte Fragen

Zusammenfassung

outline-color ist eine nützliche CSS-Eigenschaft, um die Farbe von Umrissen bei fokussierten oder hervorgehobenen Elementen festzulegen. Sie sorgt für visuelle Klarheit und ist besonders bei interaktiven Elementen hilfreich.

Übungsaufgabe

Erstellen Sie eine Schaltfläche mit einer outline-color in rgba(0, 0, 255, 0.7), einer outline-width von 3px und einem outline-style von solid.