[Résolu] Questions sur les dégradés

Salut,

[Faire débuter un dégradé à 2 em de la gauche]

Je suis une cruche, mais je n’ai encore jamais fait ça. Il me faudrait, pour des questions de design, débuter un dégradé au haut vers le bas mais à 2 em de la gauche.

Existe-t-il une règle css à préciser, ou une astuce que vous auriez sous le coude ?

[Seconde question : animer en douceur un dégradé linaire en css avec un hover]
J’ai trouvé cette ressource : https://codepen.io/anon/pen/eWOEoR
Mais je ne sais pas si elle est encore d’actualité sur les navigateurs modernes.

Merci.
Modifié par myself (27 Dec 2023 - 12:55)

salut
comme çà

.divgrad {
margin-left: 2em;
background-color: red;
width: 100%;
height: 300px;
background: linear-gradient( #f00, #ff0);
}
.divgrad:hover {
background: linear-gradient( #ff0, #f00);
}


<div class="divgrad">    </div>

Modifié par drphilgood (27 Dec 2023 - 12:42)

Il n’est pas animé. Je voulais quelque chose avec une transition douce.

J’ai mis ton codepen ici : https://codepen.io/vZgtErTghZdQdgZA/pen/BabygQR

transition ne fonctionne pas sur les dégradés

Ah ok. C’est bien ce qu’il me semblait, je butais sur ça depuis ce matin.

Je vais donc me rabattre vers cette histoire d’opacité.
Modifié par myself (27 Dec 2023 - 13:07)

Et pour la question 1 ?

Merci.

Bonjour,
pour l'animation d'un dégradé on utilise les @keyframes gradiant
Sur l'élément en dégradé :

animation: gradient 8s ease infinite;

Tout de suite en-dessous :

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

Toute les valeurs, notamment les 8s, sont à adapter à ton projet; notamment le dégradé que tu veux.
Modifié par Bongota (27 Dec 2023 - 13:31)

ben le margin: 2em répond a ta question

Je ne comprend spas, il n'y a pas d'animation, c'est pas ce que tu veux ?

Oui, je voulais une animation 'moderne' en css. Là j’ai utilisé la vieille méthode : https://codepen.io/vZgtErTghZdQdgZA/pen/abMzeWm et ça marche.

Mais si tu as encore plus simple, je veux bien. Pour ma culture générale.

Non, ton code convient très bien pour ce que tu veux faire, une animation temporisée au survol.
Je parlais d'une animation du gradient, éventuellement au survol, comme sur ce pen que je viens de faire
https://codepen.io/Codeurta/pen/bGZdbYE
Mais si ce que tu as fait te convient.
Bonne journée.

Ah oui, c’est intéressant aussi. Merci pour ce dernier lien.

Bonne journée à vous tous aussi, et de belles fêtes.