CSS Magie – Trashsammlung

Datum
10.06.2021

CSS Trashsammlung – spiele bisschen mit CSS 4 rum, mal sehen was man damit so tolles machen kann. Diese Sammlung wird nach und nach gefüllt.

CSS wie eine Funktion

Code


.row\(1\) {
  width: 100%;
}
.row\(2\) {
  width: 50%;
}
<div class="row(1)" style="background-color: black;"></div>
<div class="row(2)" style="background-color: bisque;"></div>
<div class="row(2)" style="background-color: blue;"></div>

Demo

hab noch kein Namen dafür

Code

:root {
  --bgcolor: yellow;
  --divwidth: 100%;
}
.default {
  height: 100;
  float: left;
  background-color: var(--bgcolor);
  width: var(--divwidth);
}
[mode*="1"] {
  --bgcolor: blue;
  --divwidth: 50%;
}
[mode*="2"] {
  --bgcolor: red;
}
[mode*="3"] {
  --bgcolor: green;
}
<div class="default"></div>
<div class="default" mode="1"></div>
<div class="default" mode="2"></div>
<div class="default" mode="1 3"></div>

Demo

Hab das gleiche auch schon mit JavaScript gemacht: JavaScript Magie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Kommentare (0)