Blog d'aide de Blog4ever

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:

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:

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

: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.

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:

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

:sol:Vie j'ai trouvé ça :flech:
Barre de menu

Menu apparence bouton je continue:sol:

Mille excuses mais je ne me suis pas encore penchée dessus !
:sol:

C'est pas urgent 

: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!

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

Bonsoir,
Je te laisse regarder et si ça ne va pas, je jetterai un plus gros coup d'œil si tu veux 

En faite je viens de regarder et c'est pas l'effet que je souhaite si tu regardes ici :flech:
Exercice N7

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?

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

 @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 :

: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 : 

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

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;
}

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.

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;
}

Bonsoir Simon, comment je peux faire pour agrandir le ovale pour qu'il se rapproche le + possible du mien?

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**/

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!

j'y regarderai se soir là j'ai fais n'importe quoi merci et bonne journée à vous deux 

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

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

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;
}

Bonjour simonet Kyû et :b2:

Dernière modification le dimanche 12 Février 2017 à 11:40:09