-
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); }
Tags : menu entête
-
Commentaires
En faite c'était juste pour pouvoir le mettre sur ce blog là :
http://miss-louna-slam.eklablog.com/
C'est fesable ?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
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
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 )
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
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
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"
en tout cas Merci !
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 !!
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
Ce blog est une mine de renseignements