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.


Aides,Codes,Conseils,Forum,Sites web,blogs,Tout supports,Photographie,Graphismes,Dessins,Peintures,Tutoriels,Publicités.
 
AccueilPortailÉvènementsFAQPublicationsPublicationsS'enregistrerConnexion
Ta bannière, Ici !


Partagez | .
 

 Menu pivotant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Ptite_Perle
Admin


avatar


Messages : 6176
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9232

MessageSujet: Menu pivotant   Mar 23 Mai 2017 - 21:09


Coucou

Un menu pivotant

Code Html:
Code:
<div id="header_tuto7">
    <div id="menu_tuto7">
        <div id="box_tuto7" class="rotation_tuto7">
            <dl> <dt>Menu</dt>

                <dd> <a href="#">Contact</a>

                </dd>
                <dd> <a href="#">Articles</a>

                </dd>
                <dd> <a href="#">HTML / CSS</a>

                </dd>
                <dd> <a href="#">Accueil</a>

                </dd>
            </dl>
            <div class="masque_tuto7"></div>
            <div class="ombre_tuto7"></div>
        </div>
    </div>
</div>


Code CSS:
Code:
* {
    margin:0;
    padding:0;
    border:none;
}
#box_tuto7 {
    height: 260px;
    font-size: 20px;
    background: white;
}
#box_tuto7 dl {
    position: relative;
    top: 15px;
    left: 275px;
    margin-left: -67px;
    width: 150px;
    height: 155px;
    color: #324040;
    text-align: center;
    background: #FFC46A;
    background: -moz-linear-gradient(top, #F93, #FFC46A);
    background: -webkit-gradient(linear, left top, left bottom, from(#F93), to(#F90));
    border-radius:4px;
    -webkit-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.8);
    -moz-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.8);
    box-shadow:0px 0px 8px rgba(0, 0, 0, 0.8);
    -webkit-transform-origin:50% 99px;
    -moz-transform-origin:50% 99px;
    -webkit-animation:bounceOut 1s ease-in-out;
    -moz-transition:-moz-transform 1s ease-in-out;
}
#box_tuto7 dt {
    position:absolute;
    bottom:0px;
    width:100%;
    height:30px;
    padding-top:5px;
}
#box_tuto7 dd {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
#box_tuto7 dd a {
    display:block;
    height:20px;
    padding:3px 0px;
    color:#324040;
    text-decoration:none;
}
#box_tuto7 dd a:hover {
    background:rgba(0, 0, 0, 0.2);
}
#box_tuto7 dl:hover {
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    -moz-transition:-moz-transform 1s ease-in-out;
    -webkit-animation:bounceIn 1s ease-in-out;
}
@-webkit-keyframes bounceIn {
    from {
        -webkit-transform:rotate(0deg);
    }
    75% {
        -webkit-transform:rotate(-200deg);
    }
    90% {
        -webkit-transform:rotate(-175deg);
    }
    to {
        -webkit-transform:rotate(-180deg);
    }
}
@-webkit-keyframes bounceOut {
    from {
        -webkit-transform:rotate(-360deg);
    }
    0% {
        -webkit-transform:rotate(-180deg);
    }
    10% {
        -webkit-transform:rotate(-160deg);
    }
    to {
        -webkit-transform:rotate(-360deg);
    }
}
#box_tuto7 .masque_tuto7 {
    position:absolute;
    z-index:50;
    width:585px;
    height:135px;
    top:0;
    left:0;
    background:white;
    background:-moz-linear-gradient(top, white, white);
    background:-webkit-gradient(linear, left top, left bottom, from(white), to(white));
}
#box_tuto7 .ombre_tuto7 {
    position:absolute;
    z-index:40;
    width:300px;
    height:6px;
    top:133px;
    margin-top:-103px;
    left:130px;
    -webkit-box-shadow:0px 100px 3px black;
    -moz-box-shadow:0px 100px 3px black;
    box-shadow:0px 100px 3px black;
    -webkit-border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
    -moz-border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
    border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
}
.rotation_tuto7 {
    clear:right;
    min-height:100px;
    padding-top:1px;
    margin-top:1px;
    position:relative;
    overflow:hidden;
}
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
 

Menu pivotant

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

 Sujets similaires

-
» commande menu "Enregistrer"
» [resolu]mettre fichier dans le menu bar
» Menu création de variables
» [Résolu] Menu démarrer win xp (programmes en double)
» problème de menu déroulant

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