Nouveau titre : Conception de mise en page de matrice HTML compressée utilisant du CSS et du HTML purs
P粉458913655
P粉458913655 2023-09-07 21:27:33
0
1
491

J'essaie de créer un logo en utilisant du HTML et du CSS purs. Le design est très intuitif, étant une matrice [13x13] contenant des éléments colorés.

CSS est très simple et mineur. Cependant, le code HTML comporte de nombreuses parties répétées et doit être SEC (Ne vous répétez pas).

body { width: 100vmin; margin: auto }
logo {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

s { }
w { background-color: #d6d6d6; aspect-ratio: 1 }
l { background-color: #d6d6d6; aspect-ratio: 1 }
f { background-color: #d6d6d6; aspect-ratio: 1 }
<logo>
<f></f><f></f><f></f><s></s><f></f><f></f><f></f><s></s><f></f><s></s><f></f><f></f><f></f>
<f></f><s></s><f></f><s></s><s></s><s></s><f></f><s></s><f></f><s></s><s></s><s></s><s></s>
<f></f><s></s><f></f><s></s><f></f><f></f><f></f><s></s><f></f><s></s><f></f><s></s><f></f>
<f></f><s></s><s></s><s></s><s></s><s></s><s></s><s></s><f></f><s></s><s></s><s></s><f></f>
<f></f><s></s><l></l><l></l><l></l><l></l><l></l><s></s><f></f><s></s><f></f><s></s><f></f>
<f></f><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><f></f><s></s><f></f>
<f></f><s></s><l></l><l></l><l></l><l></l><l></l><l></l><s></s><f></f><f></f><s></s><f></f>
<f></f><s></s><l></l><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s>
<f></f><s></s><l></l><s></s><l></l><l></l><l></l><s></s><w></w><s></s><w></w><s></s><w></w>
<s></s><s></s><l></l><s></s><s></s><s></s><l></l><s></s><s></s><s></s><w></w><s></s><s></s>
<l></l><l></l><l></l><s></s><l></l><l></l><l></l><w></w><w></w><w></w><w></w><s></s><w></w>
<l></l><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><w></w><s></s>
<l></l><l></l><l></l><l></l><l></l><l></l><l></l><l></l><l></l><l></l><s></s><w></w><w></w>
</logo>

J'ai essayé d'utiliser <f/>代替<f></f> mais sans succès.

Existe-t-il un moyen de réduire ce code ?

Remarque : La couleur doit rester la même.

P粉458913655
P粉458913655

répondre à tous(1)
P粉713846879

Si javascript est disponible, vous pouvez concaténer les types de cellules dans un objet chaîne et l'utiliser pour créer dynamiquement le drapeau. L’exemple de code est le suivant.

let logo = document.getElementById("logo"); 
logo.dataset["cells"].split('').forEach(a => logo.append(document.createElement(a)));
body { width: 100vmin; margin: auto }
logo {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

w { background-color: #d6d6d6; aspect-ratio: 1 }
l { background-color: #d6d6d6; aspect-ratio: 1 }
f { background-color: #d6d6d6; aspect-ratio: 1 }
<logo id="logo" data-cells="fffsfffsfsffffsfsssfsfssssfsfsfffsfsfsffsssssssfsssffslllllsfsfsffsssssssssfsffsllllllsffsffslssssssssssfslslllswswswsslssslssswsslllslllwwwwswlssssssssssswllllllllllsww"></logo>

Basé sur le besoin de HTML/CSS et le commentaire de @Temani Afif, voici une solution SVG :

    .w * { stroke:red;stroke-width:1;;fill:none;stroke-linejoin="miter"; }
    .l * { stroke:green;stroke-width:1;;fill:none;stroke-linejoin="miter"; }
    .f * { stroke:blue;stroke-width:1;;fill:none;stroke-linejoin="miter"; }
<logo>
    <svg height="300" width="300" viewBox="-1 -1 15 15">
        <g class="w">
            <path d="M12.5,10 L12.5,12.5 L11,12.5" />
            <path d="M6.5,10.5 L10.5,10.5 L10.5,8" />
            <path d="M8,8.5 L9,8.5" />
            <path d="M12,8.5 L13,8.5" />
        </g>
        <g class="l">
            <path d="M4,8.5 L6.5,8.5 L6.5,10.5 L4,10.5" />
            <path d="M7,4.5 L2,4.5" />
            <path d="M8,6.5 L2.5,6.5 L2.5,10.5 L0.5,10.5 L0.5,12.5 L10,12.5" />
        </g>
        <g class="f">
            <path d="M0.5,9 L0.5,0.5 L2.5,0.5 L2.5,3" />
            <path d="M4,0.5 L6.5,0.5 L6.5,2.5 L4,2.5" />
            <path d="M8.5,0 L8.5,5" />
            <path d="M10,0.5 L13,0.5" />
            <path d="M10,2.5 L11,2.5" />
            <path d="M12.5,2 L12.5,7" />
            <path d="M10.5,4 L10.5,6.5 L9,6.5" />
        </g>
    </svg>
</logo>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal