Sujets similaires

Bonjour à vous!

Je vous demande un petit coup de main car je n'arrive pas à réaliser un fond en dégradé :/. J'ai essayé plein de façons de l'écrire que j'ai trouvées sur le net (y compris celle qu'on retrouve dans ce tuto sur le forum), mais rien n'y fait, ça ne marche pas...

J'essaie en fait de faire un fond dégradé à cette fiche:
http://delicate-cloud.1fr1.net/t4-blablabla-sujet-essais#5
(c'est seulement un test parce que je suis en train d'apprendre des astuces CSS)

Mon message en html:

Code:: <center>
<div class="exercice">
<div class="titre">Ma petite fiche</div>

<div class="contenu">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<img class="rotation" src="http://img15.hostingpics.net/pics/704050Untitled2.png"> <img class="rotation" src="http://img15.hostingpics.net/pics/704050Untitled2.png"> <img class="rotation" src="http://img15.hostingpics.net/pics/704050Untitled2.png">

</div><br></center>

Le CSS qui va avec:

Code:: .exercice {
width: 450px;
height: 430px;
background-color: #eeeeee;
background: -webkit-gradient(linear, from(#dddddd), to(#eeeeee));
background: -webkit-linear-gradient(#dddddd, #eeeeee);
background: -moz-linear-gradient(#dddddd, #eeeeee);
background: -o-linear-gradient(#dddddd, #eeeeee);
background: linear-gradient (#dddddd, #eeeeee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee');
border-top-left-radius: 100px 50px;
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;
border-left: 6px solid #dddddd;
border-right: 6px solid #dddddd;
}

.titre {
width: 220px;
color: #aaaaaa;
font-family: Times New Roman;
font-size: 30px;
letter-spacing: -0.05em;
text-shadow: 1px 1px 2px #cccccc;
padding-top: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #ffffff;
-moz-transition: color 1s ease-in-out;
-webkit-transition: color 1s ease-in-out;
-khtml-transition: color 1s ease-in-out;
-ms-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
transition: color 1s ease-in-out;
}

.titre:hover {
color: #ffffff;
}

.contenu {
width: 360px;
color: #ababab;
text-align: justify;
font-family: Arial;
font-size: 9px;
letter-spacing: 0.05em;
line-height: 13px;
text-shadow: 1px 1px 2px #dedede;
}

.rotation {
margin: 5px;
border: 1px solid #dedede;
-moz-transition: -moz-transform 1s ease-in-out;
-webkit-transition: -webkit-transform 1s ease-in-out;
-khtml-transition: -khtml-transform 1s ease-in-out;
-ms-transition: -ms-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}

.rotation:hover {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-khtml-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

Il est fort possible que je n'aie pas bien écrit la partie du code pour le dégradé étant donné que j'ai essayé plein de choses pour tenter d'obtenir le résultat souhaité.

Merci d'avance!
Si vous avez besoin d'autres informations, n'hésitez pas à me demander Smile

Salut, sur ton forum, voici comment est la class exercice :

Code:: .exercice {
background-color: #EEEEEE;
border-left: 6px solid #DDDDDD;
border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;
border-right: 6px solid #DDDDDD;
height: 430px;
width: 450px;
}

Je ne vois aucun dégradé Wink

D'une part, pour la couleur de fond que tu détermines en premier, il ne faut pas la déterminer avec "background-color" mais avec "background". De cette manière, si le navigateur supporte les dégradés, il remplacera cette ligne par le dégradé qui lui correspond. S'il est plus vieux, il ignorera le reste et appliquera la couleur simple. Smile

Code:: .exercice {
background: #EEEEEE;
}

D'autre part, dans la quasi majorité des linear-gradient de ton CSS, il manque le sens du dégradé. Smile

Code:: .exercice {
background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#eeeeee));
background: -webkit-linear-gradient(top, #dddddd, #eeeeee);
background: -moz-linear-gradient(top, #dddddd, #eeeeee);
background: -o-linear-gradient(top, #dddddd, #eeeeee);
background: linear-gradient (top, #dddddd, #eeeeee);
}

Tout ça, avec le filter, et ça devrait être bon. Smile

Hiro: Je ne comprends pas vraiment ce que ça veut dire... je sais bien que mon code n'est pas bon x) mais j'ai donné mon CSS tel quel ^^

Doare: J'avais déjà essayé avec le sens des dégradés mais j'essaie une autre fois et je te dis!

Edit: euuh j'ai changé mon code pour ceci:

Code:: .exercice {
width: 450px;
height: 430px;
background: #eeeeee;
background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#eeeeee));
background: -webkit-linear-gradient(top, #dddddd, #eeeeee);
background: -moz-linear-gradient(top, #dddddd, #eeeeee);
background: -o-linear-gradient(top, #dddddd, #eeeeee);
background: linear-gradient (top, #dddddd, #eeeeee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee');
border-top-left-radius: 100px 50px;
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;
border-left: 6px solid #dddddd;
border-right: 6px solid #dddddd;
}

Et ça me donne un fond tout blanc: http://delicate-cloud.1fr1.net/t4-blablabla-sujet-essais#5

Hello !
Je viens aux nouvelles ! Ton problème est-il toujours d'actualité ?
Merci d'avance de ta réponse [RÉSOLU] Problème avec fond en dégradé 926145

Oui il est toujours d'actualité! Merci ^^

Yey, en re-testant, je viens de me souvenir de quelque chose que j'avais remarqué il y a quelques mois...

Tu as probablement activé l'option "Optimiser votre CSS", juste en dessous du CSS. L'optimisation du CSS n'a pas l'air d'aimer avoir 5 ou 6 déclarations de background pour un élément, et ne conserve que la dernière, supprimant les autres. Du coup, pour avoir ton dégradé, il faut désactiver l'option. Smile

Han oui c'est ça *-* ça marche! Merci beaucoup à toi Surprised

Vous pouvez archiver ^^

C'est very coool [RÉSOLU] Problème avec fond en dégradé 3333627970

Comme quoi, on fait bien de faire notre boulot de modo et de remonter les sujets ^^
Du coup je déplace (:
Merci de l'avoir signalé [RÉSOLU] Problème avec fond en dégradé 926145

[RÉSOLU] Problème avec fond en dégradé

[RÉSOLU] Problème avec fond en dégradé

Sujets similaires

Sujets similaires

Partenaires Or