Generative Design [1]

2018 - 2019

Examples

1. Loader II

1. Loader I

1. Loader II - Exercice

CSS Custom Properties

@media (min-width: var(--width)) {
  :root {
    --color: green;
    --font: 50px;
  }
}

@keyframes var(--anim) {
  to {
    background: red;
  }
}

Nope 🤷

button {
  --font: 30;
  font-size: calc(var(--font) * 1px);
}

Sans unité 💵

button {
  font-size: var(--font, 40px); // 40px
}

button {
  --font: 30px;
  font-size: var(--font, 40px); // 30px
}

button {
  --font: red;
  font-size: var(--font, 40px); // Valeur inhéritée
}

Valeur par défaut👶

document.documentElement.style.setProperty('--font', '50px');

JavaScript 👏

3. Unicorn trail

4. Parallax

1 - Generative Design [2018-2019]

By Louis Hoebregts

1 - Generative Design [2018-2019]

  • 59
Loading comments...

More from Louis Hoebregts