bluepages2021-logo2_500x150

CSS-Variablen

1. Textbox mit Variablen .textbox 

<div class="textbox">Bespiel Textbox mit Variablen</div>
Bespiel Textbox mit Variablen

2. Textboxen mit Variablen .textbox.info .textbox.success .textbox.error 

<div class="textbox info">
  Das ist eine blaue Info-Textbox KLasse .textbox.info
</div>
<div class="textbox success">
  Das ist eine grüne Erfolgs-Textbox Klassse .textbox.success
</div>
<div class="textbox error">
  Das ist eine rote Fehler-Textbo Klasse .textbox.error
</div>
Das ist eine blaue Info-Textbox KLasse .textbox.info
Das ist eine grüne Erfolgs-Textbox Klassse .textbox.success
Das ist eine rote Fehler-Textbo Klasse .textbox.error

3. Beispiel mit globalen Variablen und einem lokalen Override in einem Container: 

<p>Dies ist ein globaler Absatz (schwarzgrau, normal groß).</p>
<div class="container-warning">
  <p>Dies ist eine Warnung (rot, größer).</p>
</div>
<div class="container-info">
  <p>Dies ist eine Info (grün, normale Größe).</p>
</div>

Dies ist ein globaler Absatz (schwarzgrau, normal groß).

Dies ist eine Warnung (rot, größer).

Dies ist eine Info (grün, normale Größe).

4. Light/Dark-Mode-Design 

<body>
  <h3>Light/Dark Mode Demo</h3>
  <p>Dies ist ein Absatz mit <a href="#">einem Link</a>.</p>

  <button>
    Umschalten
  </button>
</body>

Light/Dark Mode Demo

Dies ist ein Absatz mit einem Link.