Adaption raté d'un code, help svp !

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Adaption raté d'un code, help svp !

Message par Carey Ven 8 Fév 2013 - 1:51

Bonjour

J'ai essayé de reproduire ceci : http://www.css3create.com/Rotation-d-un-menu-en-CSS3

mais pour l'instant j'obtiens ça : http://eternara-academy.forumactif.com/h1-pv

Mon but est de mettre deux menu rotatif cote à cote sous l'image.
et je ne sais pas non plus comment changer la couleur, écriture etc des menus...

Voilà mon code :
Code:
<HTML><HEAD><TITLE>Affichage menu rotatif</TITLE>

<style>

/* CSS3 rotating menu */

body {
    height: 360px;
    font-family: "helvetica",sans-serif;
    font-size: 1em;
    margin: 0px;
    padding: 0px;
}


#article16 {
        position: relative;
        width: 300px;
        margin: 0 auto;
}
       
#article16 dl {
    position: relative;
        width: 120px;
    top: 20px;
        margin: 0 auto;
        height: 155px;
    color: #324040;
    text-align: center;
    background: #04b3d2;
    /*linear-gradient*/
    background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));
    background: -webkit-linear-gradient(top,#04b3d2,#48dfff);
    background: -moz-linear-gradient(top,#04b3d2,#48dfff);
    background: -o-linear-gradient(top,#04b3d2,#48dfff);
    background: linear-gradient(top,#04b3d2,#48dfff);
    /*border-radius*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /*box-shadow*/
    -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
    /*transform-origin*/
    -webkit-transform-origin: 50% 120px;
    -moz-transform-origin: 50% 120px;
    -ms-transform-origin: 50% 120px;
    -o-transform-origin: 50% 120px;
    transform-origin: 50% 120px;
    /*transition*/
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
    -moz-transition: -moz-transform 0.7s ease-in-out;
    -o-transition: -o-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceOut 0.7s ease-in-out;
    -moz-animation: bounceOut 0.7s ease-in-out;
    -ms-animation: bounceOut 0.7s ease-in-out;
    -o-animation: bounceOut 0.7s ease-in-out;
    animation: bounceOut 0.7s ease-in-out;
}

#article16 dt {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30px;
}

#article16 dd {
    /*transform*/
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#article16 dd a {
    display: block;
    height: 24px;
    padding: 3px 20px;
    color: #324040;
    text-decoration: none;
}

#article16 dd a:hover { background: rgba(255,255,255,0.1) }

#article16 dl:hover {
    /*transform*/
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    /*transition*/
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    /*webkit plus*/
    /*animation*/
    -webkit-animation: bounceIn 0.7s ease-in-out;
    -moz-animation: bounceIn 0.7s ease-in-out;
    -ms-animation: bounceIn 0.7s ease-in-out;
    -o-animation: bounceIn 0.7s ease-in-out;
    animation: bounceIn 0.7s 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) }
}

@-moz-keyframes bounceIn {
    from { -webkit-transform: rotate(0deg) }

    75% { -webkit-transform: rotate(-200deg) }

    90% { -webkit-transform: rotate(-175deg) }

    to { -webkit-transform: rotate(-180deg) }
}

@-o-keyframes bounceIn {
    from { -webkit-transform: rotate(0deg) }

    75% { -webkit-transform: rotate(-200deg) }

    90% { -webkit-transform: rotate(-175deg) }

    to { -webkit-transform: rotate(-180deg) }
}

@-ms-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) }
}

@-moz-keyframes bounceOut {
    from { -webkit-transform: rotate(-360deg) }

    0% { -webkit-transform: rotate(-180deg) }

    10% { -webkit-transform: rotate(-160deg) }

    to { -webkit-transform: rotate(-360deg) }
}

@-o-keyframes bounceOut {
    from { -webkit-transform: rotate(-360deg) }

    0% { -webkit-transform: rotate(-180deg) }

    10% { -webkit-transform: rotate(-160deg) }

    to { -webkit-transform: rotate(-360deg) }
}

@-ms-keyframes bounceOut {
    from { -webkit-transform: rotate(-360deg) }

    0% { -webkit-transform: rotate(-180deg) }

    10% { -webkit-transform: rotate(-160deg) }

    to { -webkit-transform: rotate(-360deg) }
}

#article16 .masque {
    position: absolute;
    z-index: 50;
    width: 100%;
    height: 135px;
    top: 0;
    left: 0;
    background: #627878;
    /*linear-gradient*/

}

#article16 .ombre {
    position: relative;
    width: 300px;
    height: 6px;
        top: -22px;
    margin-top: -103px;
    left: 0px;
    /*box-shadow*/
    -webkit-box-shadow: 0px 100px 3px black;
    -moz-box-shadow: 0px 100px 3px black;
    box-shadow: 0px 100px 3px black;
    /*border-radius*/
    -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;
}

</style>

</HEAD>
<BODY>

     
<section id="article16" >
<img src="http://25.media.tumblr.com/tumblr_mb6k7cgOdI1rv5zh8o1_500.gif" class="imagepv">
        <dl class="menu">
                <dt class="btnRot">Partager</dt>
                <dd><a href="">GOOGLE+</a></dd>
                <dd><a href="">DELICIOUS</a></dd>
                <dd><a href="">FACEBOOK</a></dd>
                <dd><a href="">TWITTER</a></dd>
        </dl>
        <div class="masque"></div>
        <div class="ombre"></div>
</section>



</BODY></HTML>

Merci d'avance à qui m'aidera =)


Dernière édition par Carey le Ven 8 Fév 2013 - 19:08, édité 1 fois
Carey

Carey
**

Messages : 64
Inscrit(e) le : 28/02/2009

http://eternara-academy.forumactif.com
Carey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adaption raté d'un code, help svp !

Message par Scoubifitz Ven 8 Fév 2013 - 9:54

bonjour,
deux menu rotatif cote à cote sous l'image.
... pas de difficultés majeures ...
tout se fait dans le CSS , pour les couleurs ... je pense que vous trouverez facilement :

Code:
<HTML><HEAD><TITLE>Affichage menu rotatif</TITLE>

<style>

/* CSS3 rotating menu */

body {
height: 360px;
font-family: "helvetica",sans-serif;
font-size: 1em;
margin: 0px;
padding: 0px;
}

#article16 {
position: relative;
width: 500px;
margin: 0 auto;
text-align:center;
}

#article16 dl {
display:inline-block;
position: relative;
width: 120px;
top: 100px;
margin: 0 auto;
height: 155px;
color: #324040;
text-align: center;
/*border-radius*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*box-shadow*/
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
/*transform-origin*/
-webkit-transform-origin: 50% 120px;
-moz-transform-origin: 50% 120px;
-ms-transform-origin: 50% 120px;
-o-transform-origin: 50% 120px;
transform-origin: 50% 120px;
/*transition*/
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-o-transition: -o-transform 0.7s ease-in-out;
transition: transform 0.7s ease-in-out;
/*webkit plus*/
/*animation*/
-webkit-animation: bounceOut 0.7s ease-in-out;
-moz-animation: bounceOut 0.7s ease-in-out;
-ms-animation: bounceOut 0.7s ease-in-out;
-o-animation: bounceOut 0.7s ease-in-out;
animation: bounceOut 0.7s ease-in-out;
}

#article16 dt {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
}

#article16 dd {
/*transform*/
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

#article16 dd a {
display: inline-block;
height: 24px;
padding: 3px 30px 3px 20px;
color: #324040;
text-decoration: none;
}

#article16 dd a:hover { background: rgba(255,255,255,0.1); }

#article16 dl:hover {
/*transform*/
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
/*transition*/
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
/*webkit plus*/
/*animation*/
-webkit-animation: bounceIn 0.7s ease-in-out;
-moz-animation: bounceIn 0.7s ease-in-out;
-ms-animation: bounceIn 0.7s ease-in-out;
-o-animation: bounceIn 0.7s ease-in-out;
animation: bounceIn 0.7s 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) }
}

@-moz-keyframes bounceIn {
from { -webkit-transform: rotate(0deg) }
75% { -webkit-transform: rotate(-200deg) }
90% { -webkit-transform: rotate(-175deg) }
to { -webkit-transform: rotate(-180deg) }
}

@-o-keyframes bounceIn {
from { -webkit-transform: rotate(0deg) }
75% { -webkit-transform: rotate(-200deg) }
90% { -webkit-transform: rotate(-175deg) }
to { -webkit-transform: rotate(-180deg) }
}

@-ms-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) }
}

@-moz-keyframes bounceOut {
from { -webkit-transform: rotate(-360deg) }
0% { -webkit-transform: rotate(-180deg) }
10% { -webkit-transform: rotate(-160deg) }
to { -webkit-transform: rotate(-360deg) }
}

@-o-keyframes bounceOut {
from { -webkit-transform: rotate(-360deg) }
0% { -webkit-transform: rotate(-180deg) }
10% { -webkit-transform: rotate(-160deg) }
to { -webkit-transform: rotate(-360deg) }
}

@-ms-keyframes bounceOut {
from { -webkit-transform: rotate(-360deg) }
0% { -webkit-transform: rotate(-180deg) }
10% { -webkit-transform: rotate(-160deg) }
to { -webkit-transform: rotate(-360deg) }
}

#article16 .masque {
position: absolute;
z-index: 50;
width: 100%;
height: 217px;
top: 0;
left: 0;
background: #627878 url('http://25.media.tumblr.com/tumblr_mb6k7cgOdI1rv5zh8o1_500.gif');
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

#article16 .ombre {
position: relative;
width: 500px;
height: 6px;
top: -42px;
left: 0px;
/*box-shadow*/
-webkit-box-shadow: 0px 100px 3px black;
-moz-box-shadow: 0px 100px 3px black;
box-shadow: 0px 100px 3px black;
/*border-radius*/
-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;
}

#article16 dl.color1{
background: #04b3d2;
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));
background: -webkit-linear-gradient(top,#04b3d2,#48dfff);
background: -moz-linear-gradient(top,#04b3d2,#48dfff);
background: -o-linear-gradient(top,#04b3d2,#48dfff);
background: linear-gradient(top,#04b3d2,#48dfff);
color:white;
}
#article16 dl.color2{
background: lightblue;
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,from(lightblue),to(lightblue));
background: -webkit-linear-gradient(top,lightblue,steelblue);
background: -moz-linear-gradient(top,lightblue,steelblue);
background: -o-linear-gradient(top,lightblue,steelblue);
background: linear-gradient(top,lightblue,steelblue);
}
#article16 dl.color2 a{
color:white;
}
</style>

</HEAD>
<BODY>

<section id="article16">
<dl class="menu color1">
<dt class="btnRot">Partager 1</dt>
<dd><a href="">GOOGLE+</a></dd>
<dd><a href="">DELICIOUS</a></dd>
<dd><a href="">FACEBOOK</a></dd>
<dd><a href="">TWITTER</a></dd>
</dl>
<dl class="menu color2">
<dt class="btnRot">Partager 2</dt>
<dd><a href="">GOOGLE+</a></dd>
<dd><a href="">DELICIOUS</a></dd>
<dd><a href="">FACEBOOK</a></dd>
<dd><a href="">TWITTER</a></dd>
</dl>
<div class="masque"></div>
<div class="ombre"></div>
</section>

</BODY></HTML>
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adaption raté d'un code, help svp !

Message par Carey Ven 8 Fév 2013 - 19:08

Super merci beaucoup Wink
Effectivement j'ai compris le truc pour les couleurs.
Carey

Carey
**

Messages : 64
Inscrit(e) le : 28/02/2009

http://eternara-academy.forumactif.com
Carey a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum