28111 sujets

CSS et mise en forme, CSS3

[Résolu] Placer un gradient dans des div

Je souhaite placer le dégradé qui est dans la div class="site" dans les div class="carre" mais attention en gardant le même dégradé sur toute la longueur de la div .site mais la difficulté est que je ne souhaite plus voir que du blanc entre chaque carré. Je vais essayer de faire un dessin du résultat souhaité. Merci de votre aide

<div class="site">
  <div class="carre lettre1">
    <div class="exclamation">M</div>
  </div>
  <div class="carre lettre2">
    <div class="exclamation">G</div>
  </div>
  <div class="carre lettre3">
    <div class="exclamation">1</div>
  </div>
  <div class="carre lettre4">
    <div class="exclamation">4</div>
  </div>
  <div class="carre lettre5">
    <div class="exclamation">.</div>
  </div>
  <div class="carre lettre6">
    <div class="exclamation">f</div>
  </div>
  <div class="carre lettre7">
    <div class="exclamation">r</div>
  </div>
  <div class="carre lettre8">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre lettre9">
    <div class="exclamation">!</div>
  </div>
</div>


.site {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.carre {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  margin-right: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  color: black;
  background-color: white;
}

.exclamation {
  font-size: 30px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  user-select: none;
}
salut,
un peu bricolo mais çà fonctionne

upload/1681582490-47649-capturedaeacran2023-04-15aa20.png 


<div class="site">
  <div class="carre">A</div>
  <div class="carre">B</div>
  <div class="carre">C</div>
</div>




html, body {
background-color: #fff;
margin: 0;
width: 100%;
min-height: 100vh;
font-size: 100%;
font-family: system-ui, sans-serif;
color: #fff;
}
.site {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
border: 5px solid #FFF;
}
.carre {
display: inline-block;
width: 100px;
height: 100px;
cursor: pointer;
background-color: transparent;
border: 5px solid #FFF;
margin: -5px;
padding: 0;
text-align: center;
}
upload/1681584347-85691-capturedancran2023-04-1520445.jpg

je vais creuser les coins arrondis mais un énorme merci

avec 
html,
body {
  background-color: #fff;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  font-size: 100%;
  font-family: system-ui, sans-serif;
  color: #fff;
}
.site {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  border: 5px solid #fff;
}
.carre {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
  border: 10px solid #fff;
  margin: -5px;
  padding: 0;
  text-align: center;
  border-radius: 10px;
}
.exclamation {
  font-size: 30px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  user-select: none;
}
petite amélioration :

upload/1681585369-85691-capturedancran2023-04-1521022.jpg 

<div class="site">
  <div class="carre lettre1">
    <div class="exclamation">M</div>
  </div>
  <div class="carre lettre2">
    <div class="exclamation">G</div>
  </div>
  <div class="carre lettre3">
    <div class="exclamation">1</div>
  </div>
  <div class="carre lettre4">
    <div class="exclamation">4</div>
  </div>
  <div class="carre lettre5">
    <div class="exclamation">.</div>
  </div>
  <div class="carre lettre6">
    <div class="exclamation">f</div>
  </div>
  <div class="carre lettre7">
    <div class="exclamation">r</div>
  </div>
  <div class="carre lettre8">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre lettre9">
    <div class="exclamation">!</div>
  </div>
</div>

<div class="site2">
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
  <div class="carre2">
    <div class="exclamation">&nbsp;</div>
  </div>
</div>


.site {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  border: 5px solid #fff;
}
.site2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  border: 5px solid #fff;
}
.carre {
  display: inline-block;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
  border: 10px solid #fff;
  margin: -5px;
  padding: 0;
  text-align: center;
  color: white;
}
.carre2 {
  display: inline-block;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
  border: 10px solid #fff;
  margin: -5px;
  padding: 0;
  text-align: center;
  color: white;
  border-radius: 20px;
}
.exclamation {
  font-size: 30px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  user-select: none;
}

Modifié par mgmaxime (15 Apr 2023 - 21:03)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à