AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Jouer à cache-cache avec des formes

Jouer à cache-cache avec des formes  posté le :
Bonjour à tous !

je viens pour vous demander de l'aide : est-il possible de rendre invisible ce qu'il y a en dehors du rectangle gris ?
Vous avez 4h.
(Je ne sais pas comment couper mes cercles, du coup de voudrais faire des sortes de marges qui rendent invisible ce qui est en dessous. Attention ! Je compte mettre les cercles sur un rectangle coloré, et il faudrait que l'invisibilité n'agisse pas dessus Very Happy)

Merci à ceux qui se pencheront sur le problème

Code:
<style type="text/css">

.circles{
   position:relative;
   height:120px;
   width: 120px;
   border-radius: 50%;
   background-size: 600px 600px;
}
#violet{
   top:65px;
   left:40px;
   background-color:rgba(235,237,254,0.8);
}
#bleu{
   top:-100px;
   left:95px;
   background-color:rgba(200, 240,248,0.4);
}
#entete{
   position: absolute;
   width: 350px;
   height: 110px;
   top: 20px;
   border: 2px solid grey;
   padding: 20px;

}
</style>

<div id="entete"></div>
<div class="circles" id="violet"></div>
<div class="circles" id="bleu"></div>

</div>
Nin'gyou Korosu
avatar
Codeur UltrActif
Messages : 349
Coda'Points : 659
Date d'inscription : 17/07/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Jouer à cache-cache avec des formes  posté le :
Un jeu !

Si je comprends bien tu ne veux pas qu'il y ait des éléments qui dépassent de ton cadre ? Si c'est bien ça il faut mettre overflow:hidden; sur le rectangle. Cette propriété permet de caché tout le contenu qui dépasse du cadre.

Par contre, pour que ça marche il faut que le rectangle entoure tes deux cercles.
Au niveau html ça donnerais plutôt :

Code:
<div id="entete">
<div class="circles" id="violet"></div>
<div class="circles" id="bleu"></div>
</div>

La seule chose c'est que ça décale les cercles je crois... Donc il faut les replacer si tu veux qu'il y ait le même rendu.

Voilà j'espère avoir répondue à ta demande :3
Si tu as des questions n'hésite pas Nin !

_________________
Membre du club de raclette & veilleur de la garde de nuit & adjointe de Nin
Chroma
avatar
Codeur UltrActif
Messages : 133
Coda'Points : 232
Date d'inscription : 23/09/2016

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Jouer à cache-cache avec des formes  posté le :
C'est parfais ! Merci pour l'aide !
Nin'gyou Korosu
avatar
Codeur UltrActif
Messages : 349
Coda'Points : 659
Date d'inscription : 17/07/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum-
Sauter vers: