28172 sujets
CSS et mise en forme, CSS3
tsalut
tu ajoute ceci a ton css
la balise "a" concerne tous les liens et hover c'est le survol
le trait va apparaitre au survol
Modifié par drphilgood (20 Dec 2023 - 20:45)
tu ajoute ceci a ton css
la balise "a" concerne tous les liens et hover c'est le survol
a {
color: #ff0000;
text-decoration: none;
}
a:hover {
color: #00ff00;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
}le trait va apparaitre au survol
Modifié par drphilgood (20 Dec 2023 - 20:45)
Désolait mais cela ne marche pas il y a à bien le changement de couleur et le soulignage qui apparaît mais il manque la transition.
J'ai trouvé un exemple de ce que j'aimerais faire le seul changement est que la transition doit commencer pas le centre.
J'ai trouvé un exemple de ce que j'aimerais faire le seul changement est que la transition doit commencer pas le centre.
<div class="contenu">
<a href="#">Bonjour</a>
</div>
<style>
body {
font-family: 'Avenir Next', 'Helvetica', 'Arial';
font-size: 42px;
line-height: 48px;
-webkit-font-smoothing: antialiased;
background-color: #ffffff;
}
.contenu {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
text-align:center;
width:100%;
height:200px;
}
a {
display: inline;
position: relative;
color: #E46161;
text-decoration: none;
}
a:after {
content: '';
display: block;
position: absolute;
bottom: 2px;
width: 0%;
left: 0px;
height: 6px;
transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
background: #E46161;
}
a:hover:after {
width: 100%;
}
</style> Bonjour,
tu veux une animation comme celle sur alsacreations.com, mais c'est pas ce que tu demandais au départ. Enfin, si c'est le modèle d'alsacreations qui te convient, j'ai retrouvé un menu sur un site en local qui me sert d'expérimentations. J'ai ajouté le soulignement qu'a proposé drphilgood et qui n'y était pas présent au départ chez moi. Tu as ici seulement l'idée d'animation, il faut adapter ton html/css et ajouter tout ce qui va autour pour en faire un menu. Le principe à comprendre étant qu'il faut agir sur les li.
Je précise de nouveau qu'il y a autour du code pour en faire un menu exploitable. À toi de continuer, je suppose que tu as déjà quelque chose en place.
Et si tu veux mon avis, ces menus qui bougent de droite à gauche au survol, ça m'énerve profondément sur les sites que je visite.
Modifié par Bongota (22 Dec 2023 - 09:57)
tu veux une animation comme celle sur alsacreations.com, mais c'est pas ce que tu demandais au départ. Enfin, si c'est le modèle d'alsacreations qui te convient, j'ai retrouvé un menu sur un site en local qui me sert d'expérimentations. J'ai ajouté le soulignement qu'a proposé drphilgood et qui n'y était pas présent au départ chez moi. Tu as ici seulement l'idée d'animation, il faut adapter ton html/css et ajouter tout ce qui va autour pour en faire un menu. Le principe à comprendre étant qu'il faut agir sur les li.
nav li {
flex: auto ;
display: block;
flex: 1; /* occupe la largeur restante */
transition: 2s;}
nav li:hover,
nav li:focus {
flex: 3;
color: #000;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 4px;}Je précise de nouveau qu'il y a autour du code pour en faire un menu exploitable. À toi de continuer, je suppose que tu as déjà quelque chose en place.
Et si tu veux mon avis, ces menus qui bougent de droite à gauche au survol, ça m'énerve profondément sur les sites que je visite.
Modifié par Bongota (22 Dec 2023 - 09:57)
Salut,
Le code de ton 2e message n'a pas l'air si loin que ça de la solution : https://jsfiddle.net/608ytfq3/
En gros j'ai modifié :
- la transition (je pige pas l’intérêt de mettre une courbe de bezier pour faire fluctuer la vitesse d'affichage sur à peine 0.25s ..)
- la position du left quand l’élément est caché (la width est à 0) : il faut le centrer pour que ça parte du milieu du mot
- la position du left quand l’élément apparaît : il faut le ramener vers le début du mot pour donner l'impression qu'il va vers les 2 extrémités du mot
- De base j'avais mis width à 100% et left à 0% mais je trouvais ça moche, du coup j'ai réduit la width et j'ai adapté le left pour que ça reste centré (en gros pour que ce soit centré il faut toujours que width + 2 fois left ça fasse 100%)
Le code de ton 2e message n'a pas l'air si loin que ça de la solution : https://jsfiddle.net/608ytfq3/
a::after {
content: '';
display: block;
position: absolute;
bottom: 2px;
width: 0%;
left: 50%;
height: 6px;
transition: 1s;
background: #E46161;
}
a:hover::after {
width: 95%;
left: 2.5%;
}En gros j'ai modifié :
- la transition (je pige pas l’intérêt de mettre une courbe de bezier pour faire fluctuer la vitesse d'affichage sur à peine 0.25s ..)
- la position du left quand l’élément est caché (la width est à 0) : il faut le centrer pour que ça parte du milieu du mot
- la position du left quand l’élément apparaît : il faut le ramener vers le début du mot pour donner l'impression qu'il va vers les 2 extrémités du mot
- De base j'avais mis width à 100% et left à 0% mais je trouvais ça moche, du coup j'ai réduit la width et j'ai adapté le left pour que ça reste centré (en gros pour que ce soit centré il faut toujours que width + 2 fois left ça fasse 100%)