BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - Création d'un bouton avec effets
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Création d'un bouton avec effets

 Répondre Répondre
Auteur
Message
LVO allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 02 Mai 2018
Status: Inactif
Points: 115
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer LVO Citer  RépondreRéponse Lien Direct à ce Post Sujet: Création d'un bouton avec effets
    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. CryCryDeadDeadConfused



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 EmbarrassedEmbarrassedEmbarrassed)

Bien sur ne pas avoir de texte sur plus d'une ligne serait la meilleur solution, mais au cas ou . .Ermm

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 . . .
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 15:21
Donc vous avez deux icones et deux textes n'est-ce pas?
Haut de la page
LVO allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 02 Mai 2018
Status: Inactif
Points: 115
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer LVO Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 15:32
Oui, deux icones 52x52 et 2 textes.
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 16:01
Haut de la page
LVO allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 02 Mai 2018
Status: Inactif
Points: 115
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer LVO Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 16:37
Effectivement, c'est presque cela Smile

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.



Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 17:29
Alors mettez l'ombrage sur la classe texte2

.texte2{
text-shadow: 5px 5px 3px #7f7f7f;
}

et non pas sur .monTexte


Edité par Hobby001 - 31 Mar 2019 à 17:30
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 17:34
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
Haut de la page
LVO allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 02 Mai 2018
Status: Inactif
Points: 115
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer LVO Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 19:29
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 !

Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 19:38
dans le translate jouez avec les deux paramètres

Edité par Hobby001 - 31 Mar 2019 à 19:39
Haut de la page
LVO allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 02 Mai 2018
Status: Inactif
Points: 115
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer LVO Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Avr 2019 à 20:29
Merci,

Tout fonctionne à merveille!
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.