DEV Community

Cover image for A litle bit CSS & Variable Fonts Magic
Tetragius
Tetragius

Posted on

A litle bit CSS & Variable Fonts Magic

This demo scene is made with just one div element and CSS

The first thing you need is variable fonts. In short, these are fonts that can be additionally changed using preset parameters. More details can be found at the link. And some font examples here.

Such fonts, for example, support animation!!!

The technology itself is old (2017) and is supported by all browsers. (even in iphone, yes safari you are now a new IE, deal with it)

Take Wavefont and connect

@font-face {
  font-family: "Wavefont";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/l/font?kit=L0xjDF00m0cP6hefyOCpRdycFsGxSrqDyx4fE4tvQYb4bdT9BMpjKNNBaEg89a5MNuLeF1NOtSWF0DO3TeLnas9-UFAV50jD2MVCwuLxW9QGD-RdzQg4xEMmac-c01PLIiWA_utv7FG1lphvBzyKrk89iF8hOHu7BOJlKCbYDWByr1XoHkD2hr8Li65ZySOVwJ-cbMABOnalrQ7Bl8VCYtB0ldGbZzqVPP3KwTr6XOyeraWl0nxmzPJ9bj1Mqj5r6amJuhWSl_UCHsPRfaQPQxsFkuD_FShKP7gQwHNe_6vjYiTWhniwb4AmPdJoPUgKf57EEfSDBa_DbJhfs6hA-Uop13_HQizh08PnIVufXstx3mdRwN2YNTxv0mlgulcxePwhPGp1ENYSOdHCj_FuvB0xmye7ebYXUHoyE_p3akl41OuwMyxvCWnHSlC9MRkVLHdUaz5B9XonbFQE7OZJ&skey=8f673a4f0b34837&v=v10)
    format("woff2");
}
Enter fullscreen mode Exit fullscreen mode

Defining the CSS properties of a div element

.wavefont-div {
  /**/
  font-family: "Wavefont", Tofu;
  font-variation-settings: "ROND" -100, "YELA" -40;
  background: linear-gradient(180deg, transparent 20%, #000 60%, var(--hga)),
    repeating-linear-gradient(transparent 0 6px, var(--g1) 4px 20px),
    repeating-linear-gradient(90deg, var(--g2) 0 4px, var(--g3) 4px 20px);
  filter: drop-shadow(0px -139px 71px var(--hgb));
  background-clip: text;
  color: transparent;
  /**/
}
Enter fullscreen mode Exit fullscreen mode

Please note that the gradient uses a variable, they must be declared via @, this is important for animation

@property --bg1 {
  syntax: "<color>"; /* thanks to specifying the type of the variable, the CSS engine will understand how to animate this variable */
  inherits: false;
  initial-value: transparent;
}
Enter fullscreen mode Exit fullscreen mode

and the animation itself

@keyframes time {
  0% {
    --hga: #dadae0;
    --hgb: #fef869;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }

  25% {
    --hga: navy;
    --hgb: #fc0;
    --g1: black;
    --g2: white;
    --g3: black;
  }
/**/
}
Enter fullscreen mode Exit fullscreen mode

Done, the full example below, despite support in different browsers, behaves differently due to different implementations, and everywhere except chrome the animation is lame, even in stoned fox :)

Thanks for reading!

Top comments (1)

Collapse
 
ikorniyasov profile image
ikorniyasov

This article proved to be incredibly useful. The implementation, while straightforward, is impressively effective and has provided significant insights.