CSS élément de code en rouge pourquoi ?

Fermé
LuDx24 - 22 juil. 2022 à 23:40
 LuDx24 - 23 juil. 2022 à 13:29

Bonjour,

Je rencontre un problème dans mon code de CSS lorsque je souhaite insérer : mix-blend-mode il devient rouge indiquant comme une erreur pouvez vous m'aidez à comprendre ce qui ne va pas et comment résoudre cela ?

merci d'avance

*, ::before, ::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
body{
    overflow-x: hidden;
    background: #000;
    min-height: 200vh;
    display: flex;
    cursor: none;
}
/*cursor animation*/
.cursor{
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: 0.1s;
    transform: translate(-50%,-50%);
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 98;
}
body:hover ~ .cursor{
    transform: scale(6);
}


Windows / Chrome 103.0.0.0

A voir également:

3 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
23 juil. 2022 à 00:25

Bonjour

Il devient rouge.... Dans ton éditeur de code... Ça veut juste dire que ton éditeur de code ne connais pas cette fonctionnalité... Après... Tant que ça fonctionne sur le navigateur internet il n'y a aucun souci.


0

Bonjour oui c’est ça mais pourtant mon éditeur de code qui est Brackets le propose car quand je commence à taper le code il est en rouge mais il a l’air de fonctionner mais sur tout les code CSS que j’ai rentré c’est le seul comme ça.

j’ai testé chaque élément de CSS en supprimant absolument toute fonction autour l’histoire d’un instant pour voir si c’était une autre fonctionnalité qui n’était pas compatible ou si j’avais dû oublié des {} ou des () mais ça a l’air d’avoir aucun rapport.

je suppose que c’est parce que la fonction doit peut-être avoir un parent ou quoi pour fonctionner mais je ne sais pas quoi et ni si c’est ça mon problème cela serait plus simple si mon éditeur m’expliquait ce qui ne va pas.

Cela doit avoir un rapport avec le fait que la fonction : 

body:hover ~ .cursor{
    transform: scale(6);
}

Ne fonctionne pas comme prévu car je devrais avec ce code avoir un curseur qui s’anime à chaque fois que je passe mon curseur sur des éléments de ma page or il ne s’anime pas mais bizarre la fonction en rouge a l’air de fonctionner malgré ça.

0

Salut,

cette propriété ne semble pas être utilisable avec une animation CSS

https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

Animatable:no

0

Peut-être pourtant j’ai vu cette fonction fonctionner correctement dans un tutoriel je pense que ça doit venir de mon code.

0