J'ai trouver 2 technique mettre le cercle vert en dessous du cercle gris afin de n'avoir plus que a cacher le cercle vert, seul probléme c'est que je suis obligé de revoir mon vert qui se retrouve avec une couche de gris par dessus afin d'essayer de retrouver le vert d'origine
Ou alors réduit le cercle vert de moitié de taille, je lui rajoute 3 border radius, je garde mon bottom right normal, ce qui va me donner un cercle avec un côté pointu, je rajoute 2 rectangle en haut et en bas qui vont servir a cacher les bords du cercle afin d'obtenir un arc de cercle.
Seul problème c'est que cela modifie legerement le design en rajoutant des espaces entre la partie verte et grise.
Ensuite dans les 2 cas y'a plus qu'a rotate tout ça en même temps selon les clics de l'utilisateurs
Je vais tester les 2 techniques et voir ce qui rend le mieux.
Si vous avez autre chose a proposer je suis toujours preneur !
J'avais pas vus ton post 006, oui effectivement j'aime bien quand ça sort de l'ordinaire (et encore ta pas vus le portofolio animé
faut que j'actualise ça aussi ) je vais tester les 2 technique et je vous posterais la structure .
<body>
<div id="ctr">
<div class="size">
<div id="content">
</div>
<div id="cercle">
<div id="cache1">
</div>
<div id="cache2">
</div>
</div>
<div id="cercle2">
<div id="selec1">
</div>
<div id="selec2">
</div>
<div id="selec3">
</div>
</div>
</div>
</div>
</body>
En sachant que je compte pas afficher ma div avec le vrai contenu du site veritablement dans la div en cercle, je l'afficherai par dessus avec un z-index plus grand
#ctr {margin: auto; width: 100%; height:950px; position: relative; overflow: hidden;}
.size {position: absolute; margin: auto; left: 10%; right: 10%; width: 800px; height: 800px; z-index: 1;}
#content {background: #ffffff; position: absolute; margin: auto; top: 18%; left: 10%; right: 10%; width: 80%; height: 80%; z-index: 3; border-radius: 50%/50%; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border: solid 2px;}
#cercle{background: rgba(255, 255, 255, 0.2); position: absolute; margin: auto; top: 17.3%; left: 9%; width: 82%; height: 82%; z-index: 1; border-radius: 50%/50%; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%;}
#cache1{background: url("img/n.png") #2e1f1b; position: absolute; margin: 0; top: -20%; right:-20%; width: 110%; height: 60%; z-index: 2; transform: rotate(40deg) scale(1,1); -webkit-transform: rotate(40deg) scale(1,1); -moz-transform: rotate(40deg) scale(1,1); border: solid;}
#cache2{background: url("img/n.png") #2e1f1b; position: absolute; margin: 0; top: 60%; right:-20%; width: 110%; height: 60%; z-index: 2; transform: rotate(-40deg) scale(1,1); -webkit-transform: rotate(-40deg) scale(1,1); -moz-transform: rotate(-40deg) scale(1,1); border: solid;}
#cercle2{background: rgba(140, 200, 63,1); position: absolute; margin: auto; top: 17.3%; left: 9%; width: 82%; height: 82%; border-radius: 50%/50%; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; z-index: 0;}
#selec1{background: url("img/n.png") #2e1f1b; position: absolute; margin: 0; top: -66%; right:-20%; width: 110%; height: 100%; z-index: 2; transform: rotate(40deg) scale(1,1); -webkit-transform: rotate(40deg) scale(1,1); -moz-transform: rotate(40deg) scale(1,1); border: solid;}
#selec2{background: url("img/n.png") #2e1f1b; position: absolute; margin: 0; top: 66%; right:-20%; width: 110%; height: 100%; z-index: 3; transform: rotate(-40deg) scale(1,1); -webkit-transform: rotate(-40deg) scale(1,1); -moz-transform: rotate(-40deg) scale(1,1); border: solid;}
#selec3{background: url("img/n.png") #2e1f1b; position: absolute; margin: 0; top: 30%; left: -5%; width: 100%; height: 100%; z-index: 2; border: solid;}
Bon c'est en mode gros bordel/experimentation un peu
Le principe etant que
#selec1 va rotate en même que
#selec3 va descendre (ou monter).
J'ai abandonné la seconde technique, les 2 rectangle qui doivent transformer mon cercle en arc de cercle doivent être trop gros du coup c'est moche.
Modifié par Dauby (03 Aug 2012 - 18:28)
