27825 sujets

CSS et mise en forme, CSS3

Bonjour je suis actuellement entrain de crée un site internet et dans le footer je voulais faire des transition notamment avec le lien qui emmène sur intagrame. Je me suis rendu compte qu'il était impossible de faire une transition avec un background image. J'aimerais donc savoir si quelqu'un a un technique pour quand même avoir une transition

<footer>
			<ul>
				<a href="https://www.instagram.com/ilynx_/?hl=fr"><li id="insta"><img src="images/instagram.png" />Instagram ilynx_</li></a>
				<a href="https://www.facebook.com/ilynx_-106408177500434/?ref=page_internal"><li id="facebook"><img src="images/facebook.png"/>Facebook ilynx_</li></a>
				<a href="mailto:email.contact@gmail.com"><li id="email"><img src="images/email.png"/>email.contact@gmail.com</li></a>
				<li id="copy"><img src="images/copy.png" />Olivier Lefez</li>
			</ul>
</footer>

footer{
	background: linear-gradient(white ,#808080);
	margin-bottom: 0px;
}
footer ul{
	min-width: 265px;
	display: inline-table;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-bottom: 0px;
	margin-left: 5%;
}
footer img{
	vertical-align: middle;
	margin-right: 5px;
}
footer li{
	padding: 5px;
	border-radius: 25px;
	transition: all 1s;
	margin-bottom: 5px;
}
footer a{
	color: #111111;
	text-decoration: none;
}
footer #email img{
	margin-right: 10px;
}
footer #copy img{
	margin-right: 9px;
}
footer #insta img{
	margin-right: 7px;
}
#facebook:hover{
	background-color: #c4a667;
	filter: invert(100%);
}

Dans l'idee le but est de faire la meme chose qu'avec le lien facebook mais avec
background-image: radial-gradient(circle at 15% 207%, #fdf497 0%, #fdf497 5%,#fd5949 45%, #d6249f 60%,#285aeb 95%);
Bonjour,

Pour commencer, tu as une erreur de syntaxe sur ta structure html : une balise li doit obligatoirement être un enfant direct d'une balise ul ou ol. Tes balises a devraient donc être à l'intérieur des balises li.

Une astuce possible pour faire une transition avec un fond dégradé est d'appliquer une transition via opacity sur un pseudo-élément. Exemple : https://jsfiddle.net/7pscowrg/
Source : https://keithjgrant.com/posts/2017/07/transitioning-gradients/
Meilleure solution