A presentation at Webkongress Erlangen in in Erlangen, Germany by Gunnar Bittersmann
BeispiEl: info-boxEn codepen.io/gunnarbittersmann/pen/QOxEoW
BeispiEl: termiNkalEnDer codepen.io/gunnarbittersmann/pen/mGVpgw
Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE body { font-size: 16px } body { font-size: 1em } @media (min-width: 640px) { body { font-size: 17px } } @media (min-width: 40em) { body { font-size: 1.0625em } } @media (min-width: 960px) { body { font-size: 18px } } @media (min-width: 60em) { body { font-size: 1.125em } }
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE f(x) = m x + n Δy 18 − 16 18 − 16 m= = = Δx 960 − 320 640 f(x) = m (x − 320) + 16 18 − 16 18 − 16 18 − 16 f(x) = (x − 320) + 16 = x + 16 − 640 640 2 calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16)
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE body { font-size: calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16); } ÜbersChrifT: 26pX bei 320pX breiTE, 36pX bei 960pX breiTE h1 { font-size: calc((36 - 26)/640 * 100vw + (26 - (36 - 26)/2) * 1rem/16); }
body { !--font-size-320: 16; !--font-size-960: 18; font-size: calc((var(!--font-size-960) - var(!--font-size-320))/640 * 100vw + (var(!--font-size-320) - (var(!--font-size-960) - var(!--font-size-320))/2) * 1rem/16); } h1 { !--font-size-320: 26; !--font-size-960: 36; }
body { !--font-size-320: 16; !--font-size-960: 18; } h1 { !--font-size-320: 26; !--font-size-960: 36; } body, h1 { font-size: calc((var(!--font-size-960) - var(!--font-size-320))/640 * 100vw + (var(!--font-size-320) - (var(!--font-size-960) - var(!--font-size-320))/2) * 1rem/16); }
BeispiEl: schRiftgRöße codepen.io/gunnarbittersmann/pen/EebWbd
BeispiEl: bildeRgalErie
a·b=A b a a/b=r a=r·b r·b·b=A b² = A / r b = √A / r a = r · √A / r a = √A · r
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 lim xn = √a n ∞ x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356…
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 lim xn = √a n ∞ x0 = 1 @function sqrt($a) { $x: 1; @for $i from 1 through 3 { x1 = (1 + 2 / 1) / 2 = 1.5 $x: ($x + $a / $x) / 2; x2 = (1.5 + 2 }/ 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… @return $x; } √2 = 1.41421356…
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 lim xn = √a n ∞ x0 = 1 @function sqrt($a) { $x: 1; $x: ($x + $a / $x) / 2; x1 = (1 + 2 / 1) / 2 = 1.5 $x: ($x + $a / $x) / 2; x2 = (1.5 + 2 / 1.5) 2 = 1.41666667 $x: /($x + $a / $x) / 2; x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… @return $x; } √2 = 1.41421356…
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !--area: 0.4; !--a: calc(var(!--area) * var(!--aspect-ratio)); !--x0: !--x1: !--x2: !--x3: 1; calc((var(!--x0) + var(!--a) / var(!--x0)) / 2); calc((var(!--x1) + var(!--a) / var(!--x1)) / 2); calc((var(!--x2) + var(!--a) / var(!--x2)) / 2); width: calc(var(!--x3) * 100%);
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !--area: 0.4; !--a: calc(var(!--area) * var(!--aspect-ratio)); !--x0: 1; !--x1: calc((var(!--x0) + var(!--a) / var(!--x0)) / 2); !--x2: calc((var(!--x1) + var(!--a) / var(!--x1)) / 2); width: calc(var(!--x2) * 100%);
BeispiEl: bildeRgalErie codepen.io/gunnarbittersmann/pen/mXXYye
<img src="https:!//bittersmann.de/images/65.1057/580.jpg" style="!--aspect-ratio: calc(4/3)" alt=""!/> Das sind keine Inline-Styles. <div class="container"> <div class="row"> <div class="col-12 col-md-8 col-lg-6"> Aber das sind Inline-Styles. 💩
LiebeGerda & LiebedOriS von Ulrike Rausch liebefONts.Com
Custom Properties – das sind CSS-Variablen, nicht wahr? Ja, sowas in der Art. Und nein, sie sind mehr als das. Der Vortrag behandelt, was Custom Properties mit Variablen gemeinsam haben, wie wir sie aus CSS-Präprozessoren wie Sass kennen, und wie sie darüber hinausgehen. Wir werden sehen, wie sich Custom Properties ins CSS-Universum einfügen, mit Betonung auf dem C: the cascade. Wir werden sehen, wie Custom Properties dabei helfen, DRY Code (don’t repeat yourself) zu schreiben. Wir werden anhand von Beispielen sehen, was man mit Custom Properties machen kann, was mit Variablen in Sass nicht geht. Wir werden Jahrtausende zurück in der Zeit reisen und Quadratwurzeln wie die alten Babylonier berechnen – nur, dass wir es in CSS tun. Warum? Weil wir’s können? Nicht nur das, ich werde einen Anwendungsfall vorstellen, bei dem man beim Layouten tatsächlich Wurzeln ziehen muss.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Mit Sass könnt ihr mathematische Funktionen wie Wurzelziehen umsetzen. Wir zeigen euch anhand einer Bildergalerie, wozu das nützlich ist und wie ihr euch geschickt dem Wert für die Wurzel nähert.
Here’s what was said about this presentation on social media.
