VelinLabor

Versuchslabor

Experimentiere. Teste. Erschaffe.

BAUEN
→
EXPERIMENTIEREN
→
VERSTEHEN

Komponenten

Eigene Farbe

Das Versuchslabor ist bereit.

BEREIT FÜR VERSUCH

HTML: 00
A11Y: 00
STYLE: 00
MOTION: 00
STATUS: IDLE

Aktuelle Ausgabe

Lege Elemente auf den Versuchstisch.

Erkannt

Noch offen

HTML / CSS

KEIN ELEMENT

—

Bereit für Versuch.

Experiment

—

Noch kein Versuch gestartet.

Lege Komponenten auf den Versuchstisch und beobachte, was passiert.

Struktur

—

Erkannt

—

Ergebnis

—

Erklärung

—

Laborreaktion

Ziehe ein HTML-Element auf den Versuchstisch.

Erkannt

—

Noch offen

Ergebnis

—

Was siehst du?

—

Was verursacht das?

—

Was kannst du ausprobieren?

—

Action Feed

Versuchstisch

HTML-Element hierher ziehen — Bausteine direkt darauf legen.

Versuchsprüfung

Live-Status deines Experiments

HTML —

Noch kein Experiment.
ARIA —

Noch kein Experiment.
Kontrast —

Noch kein Experiment.
Überlauf —

Noch kein Experiment.
Animation —

Noch kein Experiment.
Focus —

Noch kein Experiment.
Hover —

Noch kein Experiment.
VelinStyle —

Noch kein Experiment.

Labor-Challenges

Freiwillige Experimente

Eigenschaften

Ausgewähltes Element bearbeiten

—

Noch kein Element auf dem Tisch

HTML

name id class href target title value placeholder alt

Accessibility

aria-label aria-labelledby aria-describedby tabindex

Semantik

role lang dir hidden

Farben

Textfarbe Hintergrund Hover-Farbe Focus-Farbe

Layout

Breite Höhe Schriftgröße

Stil

Radius

Icon

Animation

Preset Dauer Verzögerung Wiederholung

Zustände

Normal — über Palette oder Stil-Felder definieren.

Hover — über Palette oder Stil-Felder definieren.

Focus — über Palette oder Stil-Felder definieren.

Active — über Palette oder Stil-Felder definieren.

Disabled — über Palette oder Stil-Felder definieren.

Generierter Code

Code aktuell

/* Noch keine Styles — Element auf den Versuchstisch legen */

{
  "status": "empty",
  "message": "Noch kein Versuch"
}