28172 sujets

CSS et mise en forme, CSS3

[Résolu] Transition ne marche pas avec une linear-gradient

Bonjour,
Ma transition ne marche pas car, je pense, j'ai une border avec un linear-gradient.
Voici mon code :
div.o-list{
	margin: 7px;
	margin-bottom: 0;
	/*background-color: red;*/
	width: 666px;
	padding: 6.75px;
	border-radius: 15px;
	height: 400px;
	display: inline-block;
  	vertical-align: top;
  	background: linear-gradient(white, white) padding-box,
              linear-gradient(0deg, rgba(0,131,255,1) 0%, rgba(148,56,212,1) 100%) border-box;
	border: 5px solid transparent;
}

div.o-list:hover{
	background: linear-gradient(var(--bg-list-color), var(--bg-list-color)) padding-box,
              linear-gradient(0deg, rgba(0,131,255,1) 0%, rgba(148,56,212,1) 100%) border-box;
	border: 5px solid transparent;
	transition: 6s;
	cursor: pointer;
}

Merci d'avance,
Bonsoir,

Pas sûr que l'on puisse mettre les valeurs de la propriété background-clip ("border-box" et "padding-box") dans une version raccourcie pour le background...
Bonjour,
Après vérification border-box et padding-box fonctionnent dans le background et ne posent aucun probleme.
Il ne sont pas a l'origine du probleme.
D'accord. Et les variables que je vois dans le code, elles sont renseignées où ? On ne pourrait pas avoir un exemple en ligne ? Un pen par exemple.

Édit : ah mais attends, laisse tomber : je me suis laissé influencé par ta question de départ, mais en fait cela n'a rien à voir avec les gradients. Regarde bien la définition de tes bordures, y'a pas comme un souci ?

Bordure de base :
border: 5px solid transparent;


Bordure en hover :
border: 5px solid transparent;

Elle est où la différence de valeurs entre les deux règles, différence sur laquelle la transition est censée agir ?
Modifié par Olivier C (29 Apr 2023 - 14:39)
Bonjour,
il faudrait d'abord savoir si ce sont les border que tu veux modifier. Ensuite, effectivement, tes grandients posent problème, mais je ne sais pas pourquoi. Si on met :
div.o-list:hover{
	background: red;
        transition:all 3s;
	cursor: pointer;}

la transition fonctionne vers le rouge.
Il faut revoir ces grandient et tout ce qui est autour, jusqu'à que ça ne pose plus de problème.
Et bien déjà dans le Pen on a ça, ce qui est nouveau :
transition: border 1s;

Donc, comme je le disais plus haut, si transition il doit y avoir, encore faut-il qu'il y ait une différence entre la définition de base et la définition de la règle en :hover.

Donc pour le hover, il faut au moins changer quelque chose par rapport à l'état de base ; la couleur par exemple :
border-color: orange;

Et là, la transition, tu la verras.

Par contre pour le gradient, je ne comprends pas l'intérêt de ce code : la première déclaration de gradient écrase le gradient suivant, au final je passe d'un fond blanc à un fond gris...
Modifié par Olivier C (29 Apr 2023 - 14:55)
Modérateur
Bonjour,

un gradient est traité comme une image, ce qui fait que si tu changes celui-ci, tu passes d'une image à une autre sans aucune transition .
Aucune des valeurs contenues entre les parenthèses de la définition de ton gradient ne sont traitées individuellement à l'affichage, elles servent uniquement à créer l'image de ce gradient qui est ensuite renvoyé d'un seul coup.
Les seules valeurs sur lesquelles tu peut agir sont en gros background-size/position/color , bref, toutes celles qui ont une valeur qui peut-être calculée, le gradient n'en fait pas partis.

Cdt
Modifié par gcyrillus (29 Apr 2023 - 15:27)
Ouep Smiley smile on en apprend tous les jours. Je ne savais pas ça au sujet des gradients. Je n'arrivais pas à comprendre, avec son code, pourquoi le changement se faisait brusquement, alors que je m'évertuais à mettre du retard.
@Bongota : après tu peux quand même les commander avec des variables. Tu sais, le player HTML5 que je suis en train de concevoir, la barre active du range ne se design pas facilement, enfin, ça dépend des navigateurs... Du coup pour mettre tout le monde d'accord je passe par un gradient dont les variables CSS sont pilotées via JavaScript (dans un autre contexte on peut aussi imaginer de les piloter via une animation CSS) :
.progress-bar {
  background-image: linear-gradient(90deg, var(--colorSlide) 0, var(--colorSlide) var(--position), transparent var(--position));
}
Modérateur
Olivier C a écrit :
@Bongota : après tu peux quand même les commander avec des variables. Tu sais, le player HTML5 que je suis en train de concevoir, la barre active du range ne se design pas facilement, enfin, ça dépend des navigateurs... Du coup pour mettre tout le monde d'accord je passe par un gradient dont les variables CSS sont pilotées via JavaScript (dans un autre contexte on peut aussi imaginer de les piloter via une animation CSS) :
.progress-bar {
  background-image: linear-gradient(90deg, var(--colorSlide) 0, var(--colorSlide) var(--position), transparent var(--position));
}


As tu essayer ? ces variables sont dans la définition du gradient, mais le gradient lui même n'est toujours pas une valeur que tu peut recalculer Smiley cligne
Voici un codepen pour jouer avec si cela t'est utile Smiley smile

Cdt
Modifié par gcyrillus (01 May 2023 - 21:07)
Modérateur
Bonjour,

Ci-dessous une possibilité en utilisant @property. Ça ne marchera pas avec firefox (qui fera une transition brutale), mais ça a l'air ok avec chrome et safari. J'ai mis un gradient initial bicolore (au lieu d'un gradient tout blanc), mais on peut bien sûr partir d'un gradient unicolore (il suffit que c1 et c2 soient identiques).
:root { /* on définit --c1 et --c2 comme variables pour les navigateurs ne supportant pas @property afin d'avoir un mode dégradé acceptable */
	--c1: white;
	--c2: green;
}

@property --c1 {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
}

@property --c2 {
  syntax: '<color>';
  initial-value: green;
  inherits: false;
}

div.o-list {
	margin: 7px;
	margin-bottom: 0;
	width: 666px;
	padding: 6.75px;
	border-radius: 15px;
	height: 400px;
	display: inline-block;
  	vertical-align: top;
  	background: linear-gradient(var(--c1), var(--c2)) padding-box,
              linear-gradient(0deg, rgba(0,131,255,1) 0%, rgba(148,56,212,1) 100%) border-box;
	border: 5px solid transparent;
	transition: --c1 6s, --c2 6s;
}

div.o-list:hover {
	--c1: yellow;
	--c2: red;
	cursor: pointer;
}


Une autre solution consiste à faire la transition sur background-position et de définir un gradient initial (identique au gradient final) qui va bien en conséquence. En choisissant ce gradient initial astucieusement et en changeant seulement le background-position lors du hover, on pourra donner l'impression que le gradient est modifié. Et auquel cas, ça marchera aussi avec firefox.

Amicalement,
Modifié par parsimonhi (02 May 2023 - 10:27)
Meilleure solution
gcyrillus a écrit :
As tu essayé ? ces variables sont dans la définition du gradient, mais le gradient lui même n'est toujours pas une valeur que tu peut recalculer Smiley cligne

Effectivement.
Prévenir un modérateur
Répondre au sujet
Aller à