Top solutions CSS Battle

Cible du jour ·

Une liste d'ombres, deux rôles : une colonne crantée en 157 caractères

Cible du 3 novembre 2026
#eed9d9#668884
<style>*{background:#EED9D9;color:668884;margin:270 140-260;box-shadow:0-5vw,0-291q 0-37q,0 89q,88q 97q;*{margin:-216 8 460 64;color:EED9D9;rotate:6-1 7 1rad

La cible du 3 novembre est une colonne vert-de-gris posée sur un socle plus large, avec trois encoches triangulaires : deux à droite, une à gauche. La solution de Vegy n’a ni dégradé ni découpe. Elle écrit une seule liste de quatre ombres, et html comme body s’en servent : sur html elles dessinent la colonne, sur un body tourné en 3D elles creusent les encoches.

Passez en Vue large pour voir ce qui se passe hors du canevas, et décochez Couleurs pédagogiques pour voir les vraies couleurs.

ombres de htmlbody et ses ombres (couleur du fond en vrai)

1. html descend sous le socle

margin:270 140-260. En mode quirks, la hauteur de html vaut 300 − 270 + 260 = 290 : sa boîte (120 × 290) commence juste sous le socle et sort du canevas. Son fond part sur le canevas, donc la boîte elle-même est invisible. Ses 4 ombres sont encore cachées dessous : une ombre extérieure n'est jamais peinte sous sa propre boîte.

2. 0-5vw : le socle

L'ombre monte de 20px (5vw). Seule la bande qui dépasse au-dessus de la boîte se voit : c'est le socle de 120 × 20.

3. 0-291q 0-37q : la colonne

Un étalement de −37q (−35px) réduit l'ombre à 50 × 220. Elle monte de 291q (275px) et sort au-dessus de la boîte, pile sur le socle : c'est la colonne.

4. 0 89q et 88q 97q : rangées sous la boîte

Ces deux ombres descendent. Ce qui dépasse de la boîte tombe hors du canevas : sur html, elles ne servent à rien. Elles sont là pour le body.

5. Le body, couleur du fond

Le body reçoit les mêmes règles par * : même fond, mêmes ombres. margin:-216 8 460 64 en fait une boîte de 48 × 46 en (204, 54), et color:EED9D9 passe ses ombres dans la couleur du fond. Ici en corail pour qu'on la voie.

6. rotate:6-1 7 1rad

Une rotation de 1 rad (57°) autour de l'axe 3D (6, −1, 7), qui passe par le centre de la boîte. Sans perspective, elle est aplatie à l'écran : le rectangle devient un parallélogramme aux bords penchés. La partie posée sur la colonne creuse l'encoche du haut.

7. Les mêmes ombres, dans le repère tourné

Les décalages des ombres suivent la rotation du body. 0-5vw atterrit à côté de la colonne, sur le fond ; 0-291q 0-37q disparaît (−35px d'étalement sur 48 × 46) ; 0 89q creuse l'encoche de gauche, et 88q 97q celle d'en bas à droite.

8. Résultat : 157 caractères

Dans les vraies couleurs, les parallélogrammes se fondent dans le fond : il ne reste que les trois encoches. Quatre ombres dessinent tout, et celles qui ne servent pas se cachent sous la boîte de html ou disparaissent.

Le code, aéré

* {                              /* html, puis body */
  background: #EED9D9;
  color: 668884;                 /* les ombres prennent cette couleur */
  margin: 270 140 -260;
  box-shadow: 0 -5vw, 0 -291q 0 -37q, 0 89q, 88q 97q;
  * {                            /* body (head et style restent cachés) */
    margin: -216 8 460 64;
    color: EED9D9;               /* mêmes ombres, couleur du fond */
    rotate: 6 -1 7 1rad;
  }
}

Comment ça marche

1. html, un cadre invisible sous le socle

margin:270 140-260 place html en x 140, y 270, sur 120px de large. CSS Battle tourne en mode quirks, où html remplit la hauteur de la page moins ses marges : 300 − 270 + 260 = 290px. Sa boîte va de juste sous le socle jusque loin sous le canevas.

La boîte elle-même ne se voit jamais : le fond de html est peint sur tout le canevas. Et une ombre extérieure n’est jamais peinte sous sa propre boîte : les ombres ne se voient que là où elles en dépassent.

2. Deux ombres dessinent la colonne

Les ombres n’ont pas de couleur à elles, elles prennent donc color : 668884. En mode quirks, une couleur peut se passer de son #.

3. body reçoit les mêmes ombres, couleur du fond

* touche aussi body, qui reçoit le même fond et les mêmes quatre ombres. Sa propre règle change deux choses :

Tout ce que dessine le body efface donc la colonne.

4. Une rotation 3D qui finit à plat

rotate:6-1 7 1rad tourne le body de 1 radian (57°) autour de l’axe 3D (6, −1, 7). Il n’y a pas de perspective, donc le résultat est aplati à l’écran : le rectangle devient un parallélogramme aux bords penchés. Ses ombres tournent avec lui : leurs décalages partent maintenant dans des directions tournées.

Sans la rotation, les encoches seraient de simples rectangles. Les bords en biais viennent uniquement de la rotation 3D.

5. Qui fait quoi

Ombre Sur html Sur le body tourné
(la boîte elle-même) invisible encoche du haut
0 -5vw le socle tombe à côté de la colonne, sur le fond
0 -291q 0 -37q la colonne disparaît : −35px d’étalement sur une boîte de 48×46
0 89q sous le canevas encoche de gauche
88q 97q sous le canevas encoche d’en bas à droite

Notes de golf