28172 sujets

CSS et mise en forme, CSS3

Problème transition couleur

Bonjour tout le monde !
Alors voilà je commence tout juste le HTML et le CSS en cours cette année, donc pour pas prendre trop de retard j'ai voulu essayer des trucs tout seul.
J'ai essayé de faire un petit "camembert" dont une partie change de couleur et de taille avec une transition quand on le survole. J'ai fait mes petites recherches et j'ai réussi à faire marcher à peu près tout ce que je voulais.
La couleur et la taille changent bien comme je le veux, sauf que la couleur est la seule partie qui change d'un coup, elle n'est pas prise en compte par ma transition de 0.2s
Donc si quelqu'un a la solution pour faire changer la couleur graduellement (comme la couleur du Ps au centre), je l'en remercie !


Voilà ce que j'ai pour l'instant !

<div class="chart PS">
  <p>Ps</p>
</div>


:root {
    --yellow-pale: #f5f2e2;
    --green-light: #d6e3cf;
    --green-medium: #6bbea5;
    --green-dark: #1a656a;
}

.chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: conic-gradient(var(--green-dark) var(--value), var(--green-light) var(--value));
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 45px;
    transition: all .2s ease;
  }
  
  .chart::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    background: var(--yellow-pale);
    border-radius: inherit;
    transition: .2s ease;
  }
  
.chart:hover {
    font-size: 60px;
    color: var(--logi-color);
    background-image: conic-gradient(var(--logi-color) var(--value), var(--green-light) var(--value));
}

.chart:hover::after {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.chart p {
    position: relative;
    z-index: 1;
}
  
.PS {
    --value: 80%;
    --logi-color: #00C2F7;
  color: var(--green-dark)
}

Modifié par Arnaud-R (06 Feb 2019 - 12:09)
Bonjour,
En testant sur codepen et en modifiant la durée de la transition ça marche niquel chez moi.
J'au juste modifier ça : 

.chart::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    background: var(--yellow-pale);
    border-radius: inherit;
    transition: 2s ease;
  }


Je lui ai mis 

transition: 2s ease;
au lieu de " .2s "

Je sais pas si c'était bien la question ?
Modifié par Sassouquet54 (06 Feb 2019 - 12:32)
Ah non, j'ai relu et je viens de comprendre ce que tu voulais dire, j'ai trouvé un tuto' qui je l'espère pourras t'aider : https://openclassrooms.com/fr/courses/2745636-utilisez-les-effets-avances-de-css-sur-votre-site/3296979-les-transitions-css

Dans la partie " Les bases des transitions CSS " il est expliqué qu'il faut mettre un background-color et qu'il faut mettre ces 2 lignes pour que l'ordi comprenne la transition de la couleur : 

transition-property: background-color; /* Active la transition sur background-color */
    transition-duration: 1s; /* La transition dure 1s */


J'espère que tu vas t'en sortir Smiley cligne
Merci beaucoup d'avoir pris le temps de répondre aussi vite !
Par contre désolé mais ça ne marche toujours pas... En fait il me semble que quand t'utilises "transition" ça synthétise toutes les 'transition-duration" "transition-property" etc...
Et comme j'ai mis "transition: all", il me semble que normalement tous les changements sont pris en compte pour la transition... C'est pour ça que je comprends pas pourquoi cette couleur est la seule chose qui n'est pas prise en compte dans la transition...
Merci quand même !
Modérateur
Salut slaut,

Arnaud-R a écrit :
En fait il me semble que quand t'utilises "transition" ça synthétise toutes les 'transition-duration" "transition-property" etc...
Et comme j'ai mis "transition: all", il me semble que normalement tous les changements sont pris en compte pour la transition...

Tout à fait tu utilise ca très bien.

Seul point noir, background-image n'est pas une propriété qui accepte les transitions.
Fiche de transition-property : https://developer.mozilla.org/fr/docs/Web/CSS/transition-property et donc on trouve dessus la liste des propriété CSS acceptées : https://developer.mozilla.org/fr/docs/Web/CSS/Liste_propri%C3%A9t%C3%A9s_CSS_anim%C3%A9es

Il va falloir trouver autre chose ! Smiley cligne
Ah d'accord très bien alors !
Du coup ce que je veux faire n'est pas possible en CSS ? Ou alors il faut faire avec une bordure ? Après ce qui m'embête avec les bordures c'est que je pense pas qu'on puisse en mettre juste sur une portion du cercle, si ?
En tout cas merci de m'avoir illuminé
J'ai trouvé la solution ! Je la poste si jamais ça intéresse quelqu'un dans le futur !
En fait j'ai mis en opacité 0 la partie qui devait changer de couleur, et j'ai plutôt fait changer le background-color dans le hover.

Ca donne ça :

:root {
    --yellow-pale: #f5f2e2;
    --green-light: #d6e3cf;
    --green-medium: #6bbea5;
    --green-dark: #1a656a;
}

.chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: conic-gradient(rgba(0, 0, 0, 0) var(--value), var(--green-light) var(--value));
    background-color: var(--green-dark);
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 45px;
    transition: all .3s ease;
  }
  
  .chart::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    background: var(--yellow-pale);
    border-radius: inherit;
    transition: .3s ease;
  }
  
.chart:hover {
    font-size: 60px;
    color: var(--logi-color);
    background-image: conic-gradient(rgba(0, 0, 0, 0) var(--value), var(--green-light) var(--value));
    background-color: var(--logi-color);
}

.chart:hover::after {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.chart p {
    position: relative;
    z-index: 1;
}
  
.PS {
    --value: 80%;
    --logi-color: #00C2F7;
  color: var(--green-dark)
}
Sujet clos
Aller à