Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5862 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 121048 Menu pivotant | | 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; } |
| |