Dégradés CSS

Résolu/Fermé
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 - 2 janv. 2010 à 17:52
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 - 2 janv. 2010 à 18:11
Bonjour la communauté, j'ai une colle pour vous.

Je cherche à faire des boutons avec coins arrondis, texte et dégradés en CSS3. J'ai testé mon code source sur Chrome, tout marche parfaitement. En revanche, pas moyen de faire le dégradé sur FireFox3. Idem pour les transitions, y compris sur Chrome.
Ne parlons pas de IE, je ferais un post à part quand tout fonctionnera sur Chrome et FF :D

Pour info, voici l'adresse du site.
www.api42.fr

et des bouts de code source

CSS*******************************************
div.gauche a
{ 
		display: table-cell; vertical-align: middle; width: 125px; height: 45px; border: 2px #1b8bff solid; text-align: center;  color: black; font-weight: bold; text-decoration: none;
		
		/* Coins arrondis */
		-moz-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px;

		/* Ombre portée */
		-moz-box-shadow: 4px 4px 12px 0 #333;
		-webkit-box-shadow: 4px 4px 12px 0 #333;
		box-shadow: 4px 4px 12px 0 #333;

		/* Arrière Plan */
		-moz-radial-gradient(45px 45px, 10px, 52px 50px, 30px, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(0.90, #019F62)) no-repeat,
		-webkit-background-clip: border-box;
		-webkit-background-origin: padding-box;
		background-attachment: scroll;
		background-color: #1b8bff;
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b8bff), color-stop(0.5, #dedede), to(#1b8bff));
		background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
		background-repeat: repeat;
		
		/******************************
		         Transitions
		******************************/
		/* Chrome */
		-webkit-transition: background-image 2s linear;

				
		/* Firefox */
        -moz-transition-property: background-image;
		-moz-transition-duration: 2s;
				
		/* Standard */
		transition-property: background-image;
		transition-duration: 2s;
}

div.gauche a:hover
{ 
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dedede), color-stop(0.5, #1b8bff), to(#dedede));
}



HTML*******************************************
<div class="gauche">
		
		<a href="#">ACCUEIL</a><br>
		<a href="#">TARIFS</a><br>
		<a href="#">NEWS</a><br>
		<a href="#">CONTACT</a><br>
		<a href="#">PARTENAIRES</a>
</div>


5 réponses

skieurdemontagne007 Messages postés 114 Date d'inscription vendredi 25 décembre 2009 Statut Membre Dernière intervention 14 mai 2011 9
2 janv. 2010 à 17:56
Bonsoir,
le CSS3 vient de sortir, donc, pas toutes les navigateur l'ont déjà adopté. Google a bien entendu, comme à son habitude une grande avance sur tout.

Mais pour les autres navigateurs, il faudra attendre les prochaines versions ! dsl
1
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
2 janv. 2010 à 17:57
J'ai pourtant vu des exemples fonctionnels avec FF, grâce à l'attribut
-moz-radial-gradient
et
-moz-linear-gradient
! Mais je n'arrive pas à les inclure dans mon site.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
2 janv. 2010 à 18:09
Les dégradés sont pris en charge par FF 3.6...
https://developer.mozilla.org/index.php?title=fr/Utilisation_de_dégradés_(gradients)
0
skieurdemontagne007 Messages postés 114 Date d'inscription vendredi 25 décembre 2009 Statut Membre Dernière intervention 14 mai 2011 9
2 janv. 2010 à 18:01
C'est ton choix,

Par contre, si tu sais coder en php, ce serait intéressant de mettre le CSS 3 si le navigateur est adéquat.
0
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
2 janv. 2010 à 18:03
explicite STP ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
2 janv. 2010 à 18:11
ah oui d'accord notobe. Merci pour l'info, je suis en 3.5 :s
0