Création d'un bouton avec effets |
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é : 31 Mar 2019 à 15:14 |
Je galère depuis trop longtemps sur la création d'un bouton avec quelques effets CSS associés. Au départ, le problème était simple mais quelques chausse-trappes sont venus contrarier sa réalisation. Je ne parlerais pas du bug avec les CSS (s!#&..e) je pense qu'il doit exister une solution plus simple que celle sur laquelle je suis parti . . . Je veux créer un bouton rectangulaire comme ci-dessous: Avec un fading d'un texte à l'autre, une désaturation du background et un effet "minimise" d'image sublime sur l'icône, effet qui va très bien avec mes icônes personnelles. Pour arriver à ceci: Jusque là, pas de problème. La hauteur des lignes de texte était de 90px, comme l'élément parent. Le fading au survol est parfait. Mon bouton est sructuré comme cela: MAIS, si l'élément passe sur deux lignes, un recentrage s'impose, et l'effet se brouille au fading, avec un petit tressautement à la fin et c'est pas exthétique. J'avais pensé ajouté un effet de flou entre les 2 textes pour masquer cet effet. MAIS, j'ai ajouté une image sublime à gauche et comme je ne sais pas commander l'effet de cet élément à partir d'un déclencheur, j'ai augmenté sa marge intérieure pour couvrir le panneau parent: MAIS dans ce cas, pour que les ascenseurs n'apparaissent pas, j'ai imposé un rapport fixe à l'élément parent: OUI, MAIS, dans ce cas le centrage du texte ne fonctionnent plus ! Je tourne en rond. Comment simplifier tout ce bazar, en maintenant la possibilité qu'un texte passe sur deux lignes tout en masquant le défaut du centrage, avec la désaturation du fond et un effet sur l'icone? Supprimer image sublime et remplacer la transformation avec un cadre et un CSS . (ça va plaire à Larsène ) Bien sur ne pas avoir de texte sur plus d'une ligne serait la meilleur solution, mais au cas ou . . Tout est lié à la possibilité qu'un texte bascule sur 2 lignes à cause du réglage relatif en largeur. Mais le réglage relatif est vraiment utile . . .
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Donc vous avez deux icones et deux textes n'est-ce pas?
|
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
|
Oui, deux icones 52x52 et 2 textes.
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Un peu comme ça: http://denislafrance.net/Code/SubstTxtAnimCSS.htm
|
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
|
Effectivement, c'est presque cela Sans ombrage sur le 1er texte, pour maintenir une unité visuelle, j'avais fixé la position des textes à 19 + 52 + 19 px (90px)de bord gauche, ce qui laisse 4 marges égales autour de l'icône, une modife du background et un effet de disparitionde la premiere par rétrécissement. Mes icones ont un motif incrit dans un cercle et cet effet visuel est adapté à ce type de forme. |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Alors mettez l'ombrage sur la classe texte2
et non pas sur .monTexte
Edité par Hobby001 - 31 Mar 2019 à 17:30 |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Pour ce qui en est de l'icone j'ai pris des images et j'ai agrandi la surface du fond pour créer l'impression d'une marge autour.
Après il vous reste à positionner le texte Dans le cas présent, les hauteur et largeur du panneau d'élément sont en % alors j'ai positionné le texte en % pour le rendre ajustable à toutes les tailles
Edité par Hobby001 - 31 Mar 2019 à 17:43 |
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
|
Très bien. C'est plus simple que ce que j'avais réalisé.
J'ai même réussi à modifier le code pour obtenir la couleur du fond et à fixer l'icone comme je le voulais. Un point que j'ai du mal à cerner: le repositionnement du texte, je n'arrive pas à régler une position fixe sur l'axe X et un centrage sur l'axe Y. Cette fois, on y est presque ! |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
dans le translate jouez avec les deux paramètres
Edité par Hobby001 - 31 Mar 2019 à 19:39 |
|
LVO
Senior Member Depuis le: 02 Mai 2018 Status: Inactif Points: 115 |
Options des messages
Thanks(0)
|
Merci,
Tout fonctionne à merveille! |
|
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 |