18041 sujets

Questions générales et questions de débutants

[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)
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)
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)
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.
Prévenir un modérateur
Répondre au sujet
Aller à