1431 appréciations
Hors-ligne
|
Bonjour et bon dimanche à vous tous.
Pour mon blog Pixelles j'aimerai bien savoir SVP comment faire un effet enfoncement de bouton pour l'accueil et contact dans ma barre de navigation qui est dans ma bannière ?:b2: :sol::sol:
|
|
3099 appréciations
Hors-ligne
|
Pixelles
le plus simple serait que tu fasses une création avec mis dessus Accueil et insérer cette création à la place du texte.
:sol:
|
|
1431 appréciations
Hors-ligne
|
Merci Christine simplement j'aimerai bien que l'effet face vraiment enfoncement de bouton j'espère que je suis assez claire dans ma définition que quand on clic dessus on est vraiment l'impression que le bouton s'enfonce est ce vraiment possible à réaliser ? Dernière modification le dimanche 05 Février 2017 à 11:40:11
|
|
2886 appréciations
Hors-ligne
|
:bd:
Pixelles,
Il faut faire comme te le dit Soleilvie (Christine).
Pour l'image, il faut mettre un bouton qui ait l'effet que tu souhaites.
En cherchant bien, tu devrais en trouver sur les sites de gifs animés.
Bon dimanche.
|
|
3099 appréciations
Hors-ligne
|
Pixelles je comprend ce que tu veux;
Tiens ! Cela va me permettre de faire un petit exercice en cherchant comment faire cet effet.
Je te tiens au courant ! :oe: :sol:
|
|
1431 appréciations
Hors-ligne
|
Regardez le lien , l'animation N7 c'est cet effet que j'aimerai obtenir je sais c'est du flash mais est il possible d'avoir quelques choses de similaire:sol:
Animation N7 Flash
|
|
1431 appréciations
Hors-ligne
|
:sol:Vie j'ai trouvé ça :flech:
Barre de menu
Menu apparence bouton je continue:sol:
|
|
3099 appréciations
Hors-ligne
|
Mille excuses mais je ne me suis pas encore penchée dessus !
:sol:
|
|
1431 appréciations
Hors-ligne
|
C'est pas urgent
|
|
Kyû
|
:bd:
L'effet de bouton qui s'enfonce s'obtient grâce à un "effet de la bordure". En dehors du survol de la souris, la bordure possède la propriété outset. Au survol de la souris, il suffit d'inverser cette bordure, pour obtenir l'effet visuel du bouton qui s'enfonce en passant à la propriété inset.
Pour plus de détails et obtenir un exemple visuel, tu peux te rendre sur le site openweb.
Après tu peux aussi jouer sur les ombrages, pour un effet plus...doux? en regardant sur cette page.
Dans les deux cas il faut juste jouer sur le css ^^
Bonne journée!
|
|
1431 appréciations
Hors-ligne
|
Bonsoir Kyû et merci pour tes explications cela paraît tellement simple quand tu l'écris simplement je ne suis pas sûr d'avoir tout compris mais je vais tester merci
|
|
Kyû
|
Bonsoir,
Je te laisse regarder et si ça ne va pas, je jetterai un plus gros coup d'œil si tu veux
|
|
1431 appréciations
Hors-ligne
|
En faite je viens de regarder et c'est pas l'effet que je souhaite si tu regardes ici :flech:
Exercice N7
|
|
Kyû
|
pixelles
Autant pour moi j'avais mal lu :ppc:
Je viens de remettre mon blog test en libre accès. J'ai fais les modifications sur la barre de navigation. Est-ce que ça correspond plus à ce que tu cherchais?
|
|
1431 appréciations
Hors-ligne
|
Bonjour Kyû , oui c'est ça que je voudrais , simplement ce n'est pas au passage de la souris que le bouton doit s’enfoncer mais bien quand on clique dessus,et si tu regardes mon blog Pixelles
PIXELLES
ma barre de navigation, tu verras que les lien ne sont pas vraiment à leurs place normal alors dit-moi comment je dois procéder STP. :sol::sol::sol::sol::sol: Dernière modification le mercredi 08 Février 2017 à 17:28:27
|
|
Kyû
|
@pixelles@
OK, pas de soucis j'ai fais la modification. Je ne pense pas que la place des liens pose problème car où qu'ils se trouvent la balise à modifier aura le même nom. Alors voilà comment ça se passe
:flech:pour "mettre en forme" le bouton à proprement parler, il faut rajouter ces quelques lignes au bon endroit de ton css :
nav a{
border-radius: 100px;
box-shadow: 3px 3px 3px 0px #213C03, 0px 0px 4px 4px #213C03 inset ;/*le premier met un ombrage vers l'intérieur et après la virgule c'est l'ombrage pour l'extérieur*/
}
:flech:ensuite on passe à l'effet "d'enfoncement du bouton", mais seulement au clic de la souris, autrement dit seulement au moment de l'action du clic :
nav a:active{
border-radius: 100px;
box-shadow: 0px 0px 4px 4px #213C03 inset;
}
Libre à toi te changer les couleurs, mais il faut bien que le "padding" soit le même dans les deux cas, car sinon tu risques d'avoir un effet de "décalage" des liens.
Voilà! Très bonne journée!
Dernière modification le jeudi 09 Février 2017 à 07:23:24
|
|
4055 appréciations
Hors-ligne
|
Bel exemple @KYU@
Voici une autre manière
nav a {
color: #720d28 !important;
font-family: Pointedly Mad !important;
font-size: 25px;
line-height: 40px;
border: 5px outset ;
border-radius: 50%;
margin-left: -5px;
}
nav a:hover {
color: DeepPink !important;
border: 5px inset pink;
font-size: 25px;
}
|
|
1431 appréciations
Hors-ligne
|
Bonsoir Kyû et :b2::b2:c' est vraiment géniaaaaaaaaaaaaaaaaaaaaaal tu as trouvé se que je voulais avoir , :b2::b2: beaucoup Simon :sol:vous êtes sur la bonne voie.
Simplement maintenant il faut que je sache quel code prendre? car vous m'en avez mis tout les deux , est ce qu'il faut que je rajoute aussi des images oui non.
|
|
4055 appréciations
Hors-ligne
|
re
Le code de Kyu est très bien mais il faut l'ajuster en taille et en couleur ( à toi de voir ).
J'ai essayé le mien et le rendu est correct.
Remplaces les codes concernés par ça.
nav a {
color: #720d28 !important;
font-family: Pointedly Mad !important;
font-size: 25px;
line-height: 40px;
border: 5px outset ;
border-radius: 50%;
margin-left: -5px;
}
nav a:hover {
color: DeepPink !important;
border: 5px inset pink;
font-size: 25px;
}
|
|
1431 appréciations
Hors-ligne
|
Bonsoir Simon, comment je peux faire pour agrandir le ovale pour qu'il se rapproche le + possible du mien?
|
|
4055 appréciations
Hors-ligne
|
Ce n'est pas facile de bien tomber en face mais voici une solution.
/*ajuster la barre */
nav ul {
float: left; /* faire flotter nav sur la droite */
margin: -485px 30px 0 25px; /*position*/
}
nav li {
display: inline-block;
margin: 135px 1020px 0 0;
}
nav a {
color: #720d28 !important;
font-family: Pointedly Mad !important;
font-size: 28px;
line-height: 40px;
border: 5px outset ;
border-radius: 50%;
margin-left: -13px;
}
nav a:hover {
color: DeepPink !important;
box-shadow: 0px 0px 4px 4px #574D4B inset;
border: 5px inset pink;
color: DeepPink!important; /* couleur au survol souris*/
}
/***fin**/
|
|
Kyû
|
De mon côté pas besoin d'image, il suffit juste de rajouter ces lignes de codes dans ton css actuel au bon endroit
Après il suffit d'adapter les couleur pour que ça corresponde au mieux aux tiennes.
La taille ne devrait pas poser de problème vu que tu as déjà entrer les mesure pour obtenir ta barre de navigation actuelle :)
Très bonne journée à tous les deux!
|
|
1431 appréciations
Hors-ligne
|
j'y regarderai se soir là j'ai fais n'importe quoi merci et bonne journée à vous deux
|
|
1431 appréciations
Hors-ligne
|
Bonsoir Kyû et simon voilà j'aime beaucoup l’aspect du bouton qui est en place simplement quand je diminue le font-size cela diminue aussi le ovale voir capture est possible d'avoir un plus gros bouton et une police + petite?
PIXELLES
Dernière modification le vendredi 10 Février 2017 à 17:53:25
|
|
Kyû
|
Bonjour, bonjour,
@pixelles@
Oui bien sûr c'est possible, il suffit de jouer sur le padding. En en rajoutant un, tu pourras avoir le bouton à la même taille et le texte plus petit.
Par contre il faudra bien mettre le même dans nav a et nav a:active, sinon ça donnera un effet bizarre au moment du clic :)
Bonne journée! Dernière modification le samedi 11 Février 2017 à 07:13:12
|
|
4055 appréciations
Hors-ligne
|
re
Je redonne un code avec la fonction border.
il faut remplacer les mêmes codes par ceux-ci.
nav a {
border-radius: 100px;
color: #720d28 !important;
font-family: Pointedly Mad !important;
font-size: 18px;
line-height: 40px;
padding: 8px;
border: 4px outset pink;
box-shadow: 1px 1px 10px black;
}
nav a:hover {
color: DeepPink !important;
border: 4px inset pink;
}
|
|
4055 appréciations
Hors-ligne
|
|
|
1431 appréciations
Hors-ligne
|
Bonjour simonet Kyû et :b2: Dernière modification le dimanche 12 Février 2017 à 11:40:09
|
|