• Boutons menu qui surgissent !

     

     

     

     

     

     

     

     

    Code à ajouter ddans ajouter du CSS pour les boutons du menu en tête

     

    ul#menu a {
     overflow: hidden;
     }
    ul#menut li {
    list-style: none;
    padding:5px;
    border: 8px dotted #444;/*bord pointilles gris*/  }

    ul#menu li a {
    margin: 0;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;/* Utilisé pour la transition sur chrome et safari */
    -moz-transition: -moz-transform 0.2s ease-in-out;/* Utilisé pour la transition sur Firefox */
    transition: transform 0.2s ease-in-out; }

    ul#menu li a:hover {
    background-image: radial-gradient(white, grey); /*fond des boutons survol souris*/ 
     -webkit-transform: scale(1.4) rotate(-10deg);/* Agrandissement de la photo à l'échelle 1.4 et rotation de -10 degrés */ -moz-transform: scale(1.4) rotate(-10deg);
    -o-transform: scale(1.4) rotate(-10deg);
    transform: scale(1.4) rotate(-10deg);
    border: 2px dotted white; /*bord pointilles blanc*/
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* L'ombre appliquée sur la photo au survol */
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); }
    « Menu dynamique fondu sur deux images passage souris »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Dimanche 9 Novembre 2014 à 23:10

    Ce blog est une mine de renseignements yes

    2
    Mercredi 19 Novembre 2014 à 12:58

    Salut,

    J'aimerais bien savoir comment ont fait ça...!

    3
    Mercredi 19 Novembre 2014 à 13:14
    Salout !
    Tu veux mettre cet effet pour quoi ?
    sur les boutons de ton menu en tête ?
    4
    Mercredi 19 Novembre 2014 à 13:20
    En faite c'était juste pour pouvoir le mettre sur ce blog là :

    http://miss-louna-slam.eklablog.com/

    C'est fesable ?
    5
    Mercredi 19 Novembre 2014 à 13:53

    Oui c'est faisable,

    mais tu as sur ce blog là, déjà ajouté une transition pour les boutons du menu horizontal.

    Donc faudrait enlvever le CSS de la transition (du violet au vert, je crois de mémoire) et mettre le CSS des boutons qui se tournent et s'agrandissent au survol souris.

    Pour l'instant, j'ai qques difficultés à envoyer des comm ( je vais re-mettre un message sur le forum, a ce sujet) le cadre pour écrire le comm disparait quand je veux écrire dedans. .. donc à un peu plus tard

    6
    Mercredi 19 Novembre 2014 à 13:58
    Ok pas de problème je ne suis pas pressé...C'est juste pour un teste de thème ^^
    7
    Mercredi 19 Novembre 2014 à 19:34

    Bonsoir, j'ai mis le CSS dans l'article si tu veux ce désign pour les boutons du menu en tête. mais si tu as déjà ajouté du css pour ces mêmes boutons, les codes risquent d'entrer en conflit...

    remoi: en fait attends, avant de mettre ce code car, comment dire, il y a dans ce code plein de choses superflues car déjà faites en passant par "modifier le thème", en tête, menu donc je vais le nettoyer mais en ce moment, j'ai quelques difficultés avec l'éditeur d'article cote code source, ça bugue un peu quand on l'ouvre

    8
    Jeudi 20 Novembre 2014 à 08:13

    Je l'ai mie pour essayer ça marche cher moi...Sans problème même...Mais ont peux modifier les couleur si on veux ?

     

    Sinon moi aussi j'ai des problème avec ekla il y a pas mal de bug (je ne reçois plus mes notification correctement je ne sais pas pourquoi arf)

    9
    Jeudi 20 Novembre 2014 à 19:27

    Bon Godefroy m'a signalé quelques erreurs chez moi que j'ai corrigées et on dirait que ça va un peu mieux ! en tout cas, l"éditeur de comm s'ouvre avec la barre icones outils.

    Pour les couleurs, bien sur que tu peux les changer . Dans mon code , certaines sont écrites en anglais comme pour le radial-gradient ( white, grey)
    d'autres en #XXXXXX, c'est une couleur aussi mais plus précises car il y a beaucoup plus de code # que de nom de couleurs en anglais et
    d'autres en rgba ( Y, Y, Y, 0.5), c'est pour un effet de transparence mais tu peux toutes les écrites dans le même format..

    Je ferai peut-être un article un jour ! 
    en attendant, tu peux aller sur le site de code couleur ou pour les dégrades sur un générateur de code gradient ..

    Édit: je t'ai trouvé cette page si tu veux approfondir sur les couleurs http://stylescss.free.fr/couleurs.php

     

     

    10
    Vendredi 21 Novembre 2014 à 08:38

    J'ai compris pour les couleur merci!

    11
    Samedi 21 Février 2015 à 14:49

    Merci pour le code ;)

    12
    Dimanche 15 Mars 2015 à 14:23

    Salut ~

    J'aimerais bien comment on fait ça...! 

    13
    Lundi 16 Mars 2015 à 10:48

    Salut Yuki-nee-123, 

    je vois que j'arrive apèrs la bataille !!

    Tu as bien installé le code donné dans l'article sur ton blog, non ?
    Et ça fonctionne ? 

    Avec les indications que je mets entre /* et */ dans le CSS, tu peux aussi changer, par exemple, les couleurs..C'est ce que tu as fait! c'est bien.

    Bonne journée

    14
    Lundi 16 Mars 2015 à 18:24

    Ok... Merci !!

    15
    Vendredi 17 Avril 2015 à 12:12

    Bien le bonjour

    je me suis amusée avec ce menu bien sympa, et du coup j'y ai passé 2h à faire des tests dans tous les sens  ;-)  

    Pas mis en place mais bien sympa, ne serait-ce que pour le personnaliser : petits bidouillages simples, et à la fin je me suis dit... que ça irait + à un design de "photos"  he

    en tout cas Merci !  cool

     

    16
    Vendredi 17 Avril 2015 à 13:05

    Kikou Pipiou !!

    C'est vrai que le CSS, ça pousse au gladouillage bidouillage !

    Dans cet article ( qui avait été fait pour Bicar !  je crois...trop sympa maxouille...)
    http://bleulezard.eklablog.com/faire-pivoter-une-image-a61827461
    le mm effet est sur les petites vignettes !!

    Allez, je t'ai ajouté d'autres articles  dans menu>>menu en tête ..tu peux bidouiller à l'infini le CSS !!

    17
    Samedi 18 Décembre 2021 à 06:24

    Bonjour,

    Merci infiniment pour toutes vos explications, votre blog est super sympa 

    J’en profite pour vous souhaiter de bonnes fêtes de fin d’année et encore merci 



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl