Revenir en haut Aller en bas
Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.


Partagez|

Petit menu en couleur

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 6157
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9251
Admin

Ptite_Perle
18 - 16
MessageSujet: Petit menu en couleur Mer 3 Mai 2017 - 20:52

Voici un petit menu toutes en couleurs

Le Code CSS:
Code:
@charset "iso-8859-1";
*{/* reset */margin:0;padding:0;}

body{font-size:14px;color:#666;background:#111 no-repeat;
 /* CSS3 Dégradé circulaire */
 background-image:-moz-radial-gradient(0 -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
 background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

 font-family:Arial, Helvetica, sans-serif;}

#navigationMenu li{ list-style:none;height:39px;padding:2px;width:40px;}
#navigationMenu span{
 /* Propriétés deu conteneur*/
 width:0; left:38px; padding:0; position:absolute; overflow:hidden;
 /* Propriétés du texte */
 font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
 font-size:18px;font-weight:bold;letter-spacing:0.6px;white-space:nowrap;line-height:39px;
 /* Transition: */
 -webkit-transition: 0.25s;
 -moz-transition: 0.25s;
 transition: 0.25s;
}

#navigationMenu a{background:url('../img/navigation.jpg') no-repeat;height:39px;width:38px;display:block;position:relative;}
/* Propiétés du survol */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{text-decoration:none;
/* Propriétés de l'ombre */
 -moz-box-shadow:0 0 5px #9ddff5;
 -webkit-box-shadow:0 0 5px #9ddff5;
 box-shadow:0 0 5px #9ddff5;
}
/* en cas d'ajout de bouton, faites correspondre les coordonnées de la position, la couleur etc... */
/* le nom doit correspondre au navigationMenu.xxxxx */
/* Bouton vert */
#navigationMenu .accueil { background-position:0 0;}
#navigationMenu .accueil:hover { background-position:0 -39px;}
#navigationMenu .accueil span{background-color:#7da315;color:#3d4f0c;text-shadow:1px 1px 0 #99bf31;}
/* Bouton bleu */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{background-color:#1e8bb4;color:#223a44;text-shadow:1px 1px 0 #44a8d0;}
/* Bouton orange */
#navigationMenu .scripts { background-position:-76px 0;}
#navigationMenu .scripts:hover { background-position:-76px -39px;}
#navigationMenu .scripts span{background-color:#c86c1f;color:#5a3517;text-shadow:1px 1px 0 #d28344;}
/* Bouton jaune */
#navigationMenu .images { background-position:-114px 0;}
#navigationMenu .images:hover{ background-position:-114px -39px;}
#navigationMenu .images span{background-color:#d0a525;color:#604e18;text-shadow:1px 1px 0 #d8b54b;}
/* Bouton violet */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{background-color:#af1e83;color:#460f35;text-shadow:1px 1px 0 #d244a6;}
/* Utile uniquement dans la page de demo */
#main{margin:80px 50px;position:relative;width:40px;}
h1{margin: auto 20px;color:#fff;font-size:30px;font-weight:normal;padding:60px 0 20px;font-family:"Myriad Pro",Arial,Helvetica,sans-serif;}


L'exemple:


Fermé:
[Vous devez être inscrit et connecté pour voir ce lien]

Ouvert:
[Vous devez être inscrit et connecté pour voir ce lien]

Les images:

[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Petit menu en couleur

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Un petit bonjour / bonsoir !
» Petit Cafe Gratuit au McDo du 15 au 28 novembre
» commande menu "Enregistrer"
» Petit billet d'humeur
» BREAKOUT •• La petite brunette

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Sites web-