Dégradés CSS
Résolu
swoog42
Messages postés
1178
Statut
Membre
-
swoog42 Messages postés 1178 Statut Membre -
swoog42 Messages postés 1178 Statut Membre -
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
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>
A voir également:
- Dégradés CSS
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Enlever soulignement lien css ✓ - Forum CSS
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
5 réponses
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
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
J'ai pourtant vu des exemples fonctionnels avec FF, grâce à l'attribut
-moz-radial-gradientet
-moz-linear-gradient! Mais je n'arrive pas à les inclure dans mon site.
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.
Par contre, si tu sais coder en php, ce serait intéressant de mettre le CSS 3 si le navigateur est adéquat.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question