CSS: fading et flou sur caractères |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
Envoyé : 28 Mar 2019 à 20:53 |
Je construis un bouton en associant une icône Image Sublime, 2 lignes de textes superposées avec un fading qui laissent apparaitre la seconde et un bouton déclencheur en hover. L'effet fonctionne parfaitement avec le code suivant:
.fade-btn { transition: opacity 0.8s ease, background-color 0.8s ease; opacity: 1; } .fadeout { transition: opacity 0.8s ease; } .fadein { transition: opacity 0.8s ease; } .fadein, .fade-btn:hover .fadeout { opacity: 0; } .fadeout, .fade-btn:hover .fadein { opacity: 1; } .fade-btn:hover { background-color: #404040 !important; opacity: 1; } Avec un texte qui à la même hauteur que l'élément parent, l'effet est parfait, mais si je centre avec les 2 textes avec: .monTexte { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); } Le fading se brouille quelque peu et les lignes bougeottent à la fin de l'effet. C'est pas très esthétique et j'ai pensé masquer cet effet en l'accentuant avec un flou et ces lignes de code: text-shadow:none; et color:transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); Mais je n'arrive pas à les intégrer correctement pour avoir un flou progressif sur le texte qui s'efface et dégressif sur celui qui apparaît . . . Ou la durée de l'effet disparaît, et quand la souris quitte la zone, la coupure est abrupte sans fading . . . Un petite aide pour finaliser sera la bienvenue |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6513 |
Options des messages
Thanks(0)
|
Visez-vous un résultat comme celui-ci?
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6513 |
Options des messages
Thanks(0)
|
En passant, ce ne sera pas très utile sur une tablette ou un cellulaire puisqu'il n'y a pas de hover.
|
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
|
Oui, c'est exactement l'effet que je veux obtenir.
Vous avez raison de rappeler que ce genre d'effet n'est pas valide sur tablettes & smartphones. Le seond texte masqué n'apporte rien au message délivré par le premier, mais n'est là que pour agrémenter la navigation traditionelle. Le seul effet que j'applique, commun pour tout type de média, est le fading au scroll, qui permet d'alléger la page au fil de la lecture de la page. Je vais essayer d'integrer ce code à celui existant. Si je n'y arrive pas, je ferais de nouveua appel à votre experience. Bien cordialement LVO |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6513 |
Options des messages
Thanks(0)
|
Ce code remplace votre code
il y a quatre classes perso à mettre
Remplacez votre code CSS par celui-ci, vous pourrez y ajouter les ombrages désirés par la suite .monTexte{
position: absolute;} @keyframes fadeOut { from {opacity: 1;}} @keyframes fadeIn { from {opacity: 0;}} .cadre .texte1{ animation-name: fadeIn;} .cadre .texte2{ animation-name: fadeOut;} .cadre:hover .texte1{ animation-name: fadeOut;} .cadre:hover .texte2{ animation-name: fadeIn;} |
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
|
Malheureusement, ce code n'est pas la solution au problème: le recentrage fonctionne mais pas l'effet de fading. Je crois que ce que veux obtenir est plus complexe qu'il n'y parait. De plus, l'incorporation d'image sublime dans cette composition introduit des difficultés difficiles à résoudre. La meilleure solution est de tout remettre à plat et de partir sur des bonnes bases. Pour cela, je vais recréer un nouveau post qui exposera tous les points d'achoppement pour la création de mon bouton. |
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |