Lädt...

CSS-Benutzeroberfläche

Optional Advanced hat gerade eine Schablone auf ein Foto gelegt. Diese Sitzung ist ein anderes Werkzeugset: Benutzeroberfläche. Sie ändern Zeiger, Caret und natives Widget-Chrome. Sie stanzen kein Loch ins Hero-Bild und zerlegen keinen Artikel in Zeitungsspalten.

Direkte Antwort

CSS-UI-Eigenschaften geben Interaktionshinweise. cursor wählt die Mausform (pointer, wait, help, not-allowed…). resize macht eine Ecke ziehbar — meist auf einem textarea. outline mit outline-offset zeichnet einen Fokusring, der keinen Layoutplatz nimmt (Outline kennen Sie aus dem Box-Modell; hier ist es die Tastaturgewohnheit). user-select dämpft versehentliches Markieren. caret-color färbt den blinkenden Einfügepunkt. appearance (und -webkit-appearance) kann natives Chrome abstreifen, damit Sie das Steuerelement neu gestalten. Fokus sichtbar lassen. Die ganze Seite nicht zum unauswählbaren Poster machen.

Warum das keine Maske und keine Spalte ist

Eine Maske entscheidet, welche Pixel einer Box sichtbar bleiben. Mehrspalten zerlegen einen Textstrom. UI-Eigenschaften tun beides nicht. Breite und Höhe bleiben, außer resize greift. Filter und mask-image gehören zur Grafik. Hier lautet die Frage: „Sieht das klickbar aus? Kann ich tippen? Kann ich die Box vergrößern? Sieht die Tastatur, wo sie ist?“

Cursor — die Wahrheit sagen

cursor ist ein Versprechen. pointer heißt „das ist klickbar.“ Nur auf echte Buttons und Links. Keine Hand auf eine Überschrift, die nichts tut.

Cursor map for honest controls

css 
a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default ist der Pfeil. text ist der I-Balken über markierbarem Text. grab / grabbing passen zu Ziehgriffen. Eigene url(...)-Cursor gibt es; klein halten und immer ein Fallback-Schlüsselwort listen. Ein lügender Cursor ist schlimmer als keiner: Leute klicken einen Slogan und nichts passiert.

Resize — eine Box wachsen lassen, kein Layout

resize wirkt auf Boxen mit Overflow. Alltag: ein Notizfeld:

Resize a textarea

css 
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

Werte: none, both, horizontal, vertical. Mit overflow ungleich visible koppeln, sonst fehlt der Griff. Nicht resize: both auf jede Karte streuen. min-height / max-width halten das Feld in der Spur.

Outline als Fokusring

Im Box-Modell sitzt Outline außerhalb des Borders und nimmt keinen Platz. Im UI-Werkzeugkasten behalten Sie den Ring für Tastaturfokus — oft mit :focus-visible, damit Mausklicks nicht jedes Mal eine Box ziehen:

Focus outline with offset

css 
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

Kein globales *:focus { outline: none; }, es sei denn, jedes Steuerelement hat einen ebenso sichtbaren Ersatz. outline-offset schiebt den Ring weg, ohne Nachbarn zu verschieben. Das ist weder border (ändert die Größe) noch eine Masken-Überblendung auf dem Button-Label.

user-select — versehentliches Markieren stoppen

Auswahl ist ein Feature. Nur dämpfen, wo ein Doppelklick keine blaue Fläche malen soll — Toolbar-Label, Drag-Chip — nicht der Artikel.

Limit selection on chrome, not prose

css 
.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none blockiert Highlighting. text ist der lesbare Default. all markiert das ganze Element mit einem Klick. Prefixe (-webkit-user-select) gibt es noch in altem WebKit. Auswahl nicht auf Rechtstext, Preise oder Fehlermeldungen legen, die man kopieren muss.

caret-color — den Einfügepunkt tönen

Das Caret ist der blinkende Balken im Feld. An die Marke anpassen ohne ihn zu verstecken:

Caret color in a field

css 
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto folgt der Textfarbe. caret-color: transparent „fürs saubere Look“ ist eine Falle. Das ist nicht color für die ganze Seite und nicht mask-image auf der Glyphe.

appearance — native Widgets neu kleiden

Browser malen Checkboxen und Suchfelder mit nativem Chrome. appearance: none (plus -webkit-appearance: none) zieht die Haut ab:

Reset appearance then restyle

css 
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

Nach none schulden Sie Border, Checked-Zustand und Fokusring. Eine unsichtbare Checkbox ist kein Custom-Control. Unterstützung variiert; das echte Widget testen. appearance repariert keine Maske und ersetzt kein Mehrspaltenlayout.

UI vs Maske vs Spalten vs Outline-als-Box

📊 UI vs mask vs columns vs outline

Tool Job Poor fit
cursor / resize / caret-color / appearance Interaction chrome on controls Stenciling a photo; newspaper columns
user-select Limit highlight on chrome, not articles Hiding copy people must paste
outline + :focus-visible Keyboard focus ring (no layout space) Replacing border math; fading labels with a mask
mask-image Soft holes on one element’s pixels Pointer shape; growing a textarea
Multi-column (column-*) Fragment flowing text Cursors, carets, native widget skin

Optional Advanced nutzte Spalten für Prosa und Masken für Bilder. Benutzeroberfläche ist die Control-Schicht. column-count auf einem Einstellungsformular oder mask-image auf dem Submit-Button macht das Formular nicht „UI-mäßiger“.

Was Sie nicht wegstylen sollten

Nicht jeden nativen Hinweis entfernen. Scrollbars, Carets und Fokusringe existieren aus gutem Grund. Ist ein Control disabled, sind cursor: not-allowed plus echtes disabled ruhiger als eine Maske, die das Label verschluckt.

UI polish is not a mask or columns

css 
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

Foto-Kante → zurück zur Maske. Langer Artikel → Spalten oder normaler Blockfluss. „Fühlt sich nicht klickbar an“ → cursor und ein echtes Control, kein Deko-Filter.

Selbst ausprobieren

  1. cursor: pointer auf einen echten <button>, not-allowed auf [disabled].
  2. Einem textarea resize: vertical, min-height und overflow: auto geben.
  3. :focus-visible-Outline plus outline-offset — per Tab ansteuern.
  4. user-select: none nur auf einem Toolbar-Chip; Artikel bleibt markierbar.
  5. caret-color im Input tönen. Feld nicht maskieren, kein column-count.

Typische Fehler

  • cursor: pointer auf Text, der kein Link oder Button ist
  • resize: both auf Layout-Karten und Nav-Leisten
  • Globales outline: none ohne :focus-visible-Ersatz
  • user-select: none auf ganzen Seiten, Preisen oder Fehlertext
  • caret-color: transparent „für den Look“
  • appearance: none ohne Border, Checked-Stil und Fokusring
  • Maske oder Mehrspalten als UI-Politur missverstehen

Kurzfassung

  • UI-CSS hintet Interaktion: Zeiger, Resize, Caret, natives Chrome
  • cursor muss wahr sein; resize gehört auf Felder, nicht auf die Page-Shell
  • Sichtbaren Fokusring behalten; user-select und caret-color leicht anfassen
  • appearance: none nur, wenn Sie das Widget komplett neu stylen
  • Keine Masken-Schablone und keine Zeitungsspalten
  • Optional Advanced als Nächstes: 3D-Transforms (transforms-3d)

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 75 von 76
Css Tutorial