Animer les variables CSS

La semaine dernière j’ai rapidement mentionné qu’il était maintenant possible d’animer les variables CSS.

L’utilité des variables CSS

Les variables CSS (également appelées « propriétes personnalisées ») permettent de stocker des valeurs spécifiques. Et ces valeurs peuvent être modifiées par des événement JS ou des pseudos classes CSS (comme par exemple :hover).

Elles se déclarent et se modifient comme ceci : --my-property: 123;, et s’utilisent comme cela : var(--my-property).

L’intéret de ces variables vient quand on a besoin de préciser un seul paramètre dans une longue déclaration (comme par exemple une position dans une déclaration de dégradé) ou alors pour indiquer une couleur qui peut être amenée à changer et qui est utilisée dans différentes classes.

Le problème de ces variables, c’est qu’il n’est pas possible de les animer. C’est là qu’intervient la at-rule @property.

Continuer la lecture

Animer un dégradé en CSS

La semaine dernière je vous ai présenté comment créer un texte en dégradé avec uniquement du CSS. Aujourd’hui je vais vous montrer comment animer ce dégradé au survol de la souris.

Le principe

L’élément sur lequel on veut placer un dégradé ne laisse voir qu’une partie de ce dégradé, et on bouge le dégradé au survol de la souris.

Continuer la lecture

Gloubi script – un cadre clignotant

Aujourd’hui, nous allons nous attaquer à un script présenté chez notre gloubi rival qui pourra vous être très utile pour mettre en avant n’importe quel contenu sur, par exemple, la magnifique page d’accueil de votre tout aussi sublime site : le cadre clignotant.

Comme pour d’autres gloubi scripts déjà présentés, il est possible maintenant d’obtenir le même effet seulement avec du CSS. Dans cet article je présenterait la solution JavaScript actuelle (avec une légère correction) puis une solution utilisant uniquement CSS.

Solution JavaScript

Le code utilisé (visible ici) est très simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui vérifie la couleur de bordure de notre élément cible (via son attribut style), et selon sa valeur, cette couleur est changé (par exemple, si la bordure est bleue, elle est changée en rouge, et inversement).

Continuer la lecture