web-dev-qa-db-fra.com

Comment réduire la taille d'un modèle de gradient CSS

Suis-je capable de réduire ce modèle de gradient linéaire plus loin que ce que j'ai pu atteindre?

Est-il possible de faire?

Dans mon 1er Exemple, le code est vraiment long, dans mon 2nd Exemple J'ai pu rendre le code plus petit/plus court.

Je voulais savoir si cela peut être rendu plus court/plus petit que ce que j'ai pu faire.

Tout ce que je fais, ou essayant de faire est de réduire le nombre de lignes dans le code de modèle de gradient linéaire CSS.

Dans votre réponse, vous pouvez fournir des exemples de la façon dont 1 ou les deux de mes exemples de code 2 peuvent être rendus plus courts.

Ou, si vous avez une idée sur la façon de recréer le même modèle d'une manière différente en utilisant une méthode différente à l'aide de gradient CSS.

enter image description here

Code 1https://jsfiddle.net/t1n3jh0d/

     body {
       background-image:
         linear-gradient(to bottom, teal 5px, #0000 5px),
         linear-gradient(to right, teal 5px, #0000 5px),
    
         linear-gradient(to bottom, black 10px, #0000 10px),
         linear-gradient(to left, black 5px, #0000 5px),
         linear-gradient(to top, black 5px, #0000 5px),
         linear-gradient(to right, black 10px, #0000 10px),
    
         linear-gradient(to bottom, orange 15px, #0000 15px),
         linear-gradient(to left, orange 10px, #0000 10px),
         linear-gradient(to top, orange 10px, #0000 10px),
         linear-gradient(to right, orange 15px, #0000 15px),
    
         linear-gradient(to bottom, black 20px, #0000 20px),
         linear-gradient(to left, black 15px, #0000 15px),
         linear-gradient(to top, black 15px, #0000 15px),
         linear-gradient(to right, black 20px, #0000 20px),
    
         linear-gradient(to bottom, teal 25px, #0000 25px),
         linear-gradient(to left, teal 20px, #0000 20px),
         linear-gradient(to top, teal 20px, #0000 20px),
         linear-gradient(to right, teal 25px, #0000 25px),
    
         linear-gradient(to bottom, black 30px, #0000 30px),
         linear-gradient(to left, black 25px, #0000 25px),
         linear-gradient(to top, black 25px, #0000 25px),
         linear-gradient(to right, black 30px, #0000 30px),
    
         linear-gradient(to bottom, orange 35px, #0000 35px),
         linear-gradient(to left, orange 30px, #0000 30px),
         linear-gradient(to top, orange 30px, #0000 30px),
         linear-gradient(to right, orange 35px, #0000 35px),
    
         linear-gradient(to bottom, black 40px, #0000 40px),
         linear-gradient(to left, black 35px, #0000 35px),
         linear-gradient(to top, black 35px, #0000 35px),
         linear-gradient(to right, black 40px, #0000 40px),
    
         linear-gradient(to bottom, teal 45px, #0000 45px),
         linear-gradient(to left, teal 40px, #0000 40px),
         linear-gradient(to top, teal 40px, #0000 40px),
         linear-gradient(to right, teal 45px, #0000 45px),
    
         linear-gradient(to bottom, black 50px, #0000 50px),
         linear-gradient(to left, black 45px, #0000 45px),
         linear-gradient(to top, black 45px, #0000 45px),
         linear-gradient(to right, black 50px, #0000 50px),
    
         linear-gradient(to bottom, orange 55px, #0000 55px),
         linear-gradient(to left, orange 50px, #0000 50px),
         linear-gradient(to top, orange 50px, #0000 50px),
         linear-gradient(to right, orange 55px, #0000 55px),
    
         linear-gradient(to bottom, black 60px, #0000 60px),
         linear-gradient(to left, black 55px, #0000 55px),
         linear-gradient(to top, black 55px, #0000 55px),
         linear-gradient(to right, black 60px, #0000 60px),
    
         linear-gradient(to bottom, teal 65px, #0000 65px),
         linear-gradient(to left, teal 60px, #0000 60px),
         linear-gradient(to top, teal 60px, #0000 60px),
         linear-gradient(to right, teal 65px, #0000 65px),
    
         linear-gradient(to bottom, black 70px, #0000 70px),
         linear-gradient(to left, black 65px, #0000 65px),
         linear-gradient(to top, black 65px, #0000 65px),
         linear-gradient(to right, black 70px, #0000 70px),
    
         linear-gradient(to bottom, orange 75px, #0000 75px),
         linear-gradient(to left, orange 70px, #0000 70px),
         linear-gradient(to top, orange 70px, #0000 70px),
         linear-gradient(to right, orange 75px, #0000 75px),
    
         linear-gradient(to bottom, black 80px, #0000 80px),
         linear-gradient(to left, black 75px, #0000 75px),
         linear-gradient(to top, black 75px, #0000 75px),
         linear-gradient(to right, black 80px, #0000 80px),
    
         linear-gradient(to bottom, teal 85px, #0000 85px),
         linear-gradient(to left, teal 85px, #0000 85px);
       background-size: 165px 165px;
     }

Code 2https://jsfiddle.net/koqy9hp0/

    body {
       background-image:
         linear-gradient(teal 5px, #0000 5px),
         linear-gradient(90deg, teal 5px, #0000 5px),
    
         linear-gradient(black 10px, #0000 10px 160px, black 160px),
         linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
      
         linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
         linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
         
         linear-gradient(black 20px, #0000 20px 150px, black 150px),
         linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
         
         linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
         linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    
         linear-gradient(black 30px, #0000 30px 140px, black 140px),
         linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
     
         linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
         linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    
         linear-gradient(black 40px, #0000 40px 130px, black 130px),
         linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    
         linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
         linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    
         linear-gradient(black 50px, #0000 50px 120px, black 120px),
         linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    
         linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
         linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    
         linear-gradient(black 60px, #0000 60px 110px, black 110px),
         linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    
         linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
         linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    
         linear-gradient(black 70px, #0000 70px 100px, black 100px),
         linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    
         linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
         linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    
         linear-gradient(black 80px, #0000 80px 90px, black 90px),
         linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    
         linear-gradient(teal, teal);
       background-size: 165px 165px;
     }
cssgradientlinear-gradientsconic-gradients
5
user17109244

La chose la plus intelligente serait de faire l'arrière-plan un SVG.

CSS:

body {
    background-image:url('./bg.svg');
    background-size: 165px 165px;
}

Pour le fichier SVG, créez le fichier et collez-le à l'intérieur:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165">
    <defs>
        <style>.cls-1{fill:teal;}.cls-2{fill:#ffa600;}</style>
    </defs>

    <rect class="cls-1" width="165" height="165"/>
    <rect x="5" y="5" width="160" height="160"/>
    <rect class="cls-2" x="10" y="10" width="150" height="150"/>
    <rect x="15" y="15" width="140" height="140"/>
    <rect class="cls-1" x="20" y="20" width="130" height="130"/>
    <rect x="25" y="25" width="120" height="120"/>
    <rect class="cls-2" x="30" y="30" width="110" height="110"/>
    <rect x="35" y="35" width="100" height="100"/>
    <rect class="cls-1" x="40" y="40" width="90" height="90"/>
    <rect x="45" y="45" width="80" height="80"/>
    <rect class="cls-2" x="50" y="50" width="70" height="70"/>
    <rect x="55" y="55" width="60" height="60"/>¨
    <rect class="cls-1" x="60" y="60" width="50" height="50"/>
    <rect x="65" y="65" width="40" height="40"/>
    <rect class="cls-2" x="70" y="70" width="30" height="30"/>
    <rect x="75" y="75" width="20" height="20"/>
    <rect class="cls-1" x="80" y="80" width="10" height="10"/>
</svg>
1
Noex98

Je ne sais pas que vous pouvez le rendre plus court sans utiliser de préprocesseur comme SCSS ou l'une des méthodes suggérées par @temani, mais si l'objectif principal est de faciliter la maintenance, vous pouvez utiliser Propriétés personnalisées

Dans l'exemple, vous pouvez modifier la largeur, les couleurs et la taille d'arrière-plan en modifiant une seule valeur, plutôt que d'avoir à ajuster chaque linear-gradient individuellement

body {
  --width: 5px;
  --backgroundSize: calc(var(--width) * 33);
  --color1: teal;
  --color2: black;
  --color3: orange;
  --transparent: rgba(255, 255, 255, 0);

  background-size: var(--backgroundSize) var(--backgroundSize);
  background-image:
   linear-gradient(to bottom, var(--color1) var(--width), var(--transparent) var(--width)),
   linear-gradient(to right, var(--color1) var(--width), var(--transparent) var(--width)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to left, var(--color2) var(--width), var(--transparent) var(--width)),
   linear-gradient(to top, var(--color2) var(--width), var(--transparent) var(--width)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17));
}

Edition Exemple d'échantillon de 2e code avec des propriétés personnalisées:

body {
  --width: 5px;
  --backgroundSize: calc(var(--width) * 33);
  --color1: teal;
  --color2: black;
  --color3: orange;
  --transparent: rgba(255, 255, 255, 0);

  background-size: var(--backgroundSize) var(--backgroundSize);
  background-image:
    linear-gradient(var(--color1) var(--width), var(--transparent) var(--width)),
    linear-gradient(90deg, var(--color1) var(--width), var(--transparent) var(--width)),
    linear-gradient(var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
    linear-gradient(var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
    linear-gradient(var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
    linear-gradient(var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
    linear-gradient(var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
    linear-gradient(var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
    linear-gradient(var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
    linear-gradient(var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
    linear-gradient(var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
    linear-gradient(var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
    linear-gradient(var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
    linear-gradient(var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
    linear-gradient(var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
    linear-gradient(var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
    linear-gradient(var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
    linear-gradient(var(--color1), var(--color1));
}
0
D-Money