Dégradés CSS

Résolu
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   -  
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   9
 
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 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
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   Statut Membre Dernière intervention   213
 
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   Statut Membre Dernière intervention   9
 
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 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
explicite STP ?
0

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

Posez votre question
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
ah oui d'accord notobe. Merci pour l'info, je suis en 3.5 :s
0