https://evanliomain.github.io/css-battle-blog/fr/ 2026-11-04T12:26:02+00:00 Evan Liomain https://evanliomain.github.io/css-battle-blog/fr/2026/11/03/une-liste-d-ombres-deux-roles/ 2026-11-03T00:00:00+00:00

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.

https://evanliomain.github.io/css-battle-blog/fr/2026/11/02/une-ombre-interieure-trois-l/ 2026-11-02T00:00:00+00:00

La cible du 2 novembre est une spirale carrée rose sur fond violet : dans un carré de 180px, un grand L, un L moyen emboîté dedans, et un petit crochet tourné dans l’autre sens, tous calés dans le coin haut-droit. koda_pig dessine les trois formes avec une seule box-shadow, donnée à trois boîtes emboîtées. Chaque boîte est plus petite que son parent de la même marge, et la plus petite est retournée par scale:-1. Le plus joli, c’est d’où la plus petite boîte tire sa hauteur : d’une <img> vide.

https://evanliomain.github.io/css-battle-blog/fr/2026/11/01/un-lien-plein-d-espaces/ 2026-11-01T00:00:00+00:00

La cible du 1er novembre est une forme blanche sur un brun chocolat : un pied avec deux extrémités recourbées, en haut et en bas, comme un « ) » et un « ( » qui se chevauchent, et une courte barre en travers au milieu. La solution de Gabriele n’a aucun fond. Le brun est une énorme bordure sur html, et la barre est la petite fenêtre qu’elle laisse au milieu. Les deux crochets viennent d’un lien, <a>, qui ne contient que des espaces. Un avertissement d’abord : ces crochets n’apparaissent que dans le Chrome de CSS Battle. Nous n’avons pas pu les reproduire : une partie de cet article dit ce que nous avons pu vérifier, et ce que nous n’avons pas pu.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/31/deux-boites-invisibles-trois-ombres/ 2026-10-31T00:00:00+00:00

La cible du 31 octobre est un anneau jaune pâle sur un fond prune, avec quatre barres autour comme les ailes d’un moulinet : vers le haut et vers la droite depuis le coin haut-droit, vers le bas et vers la gauche depuis le coin bas-gauche. Evan Liomain dessine l’anneau avec un dégradé, et les quatre barres avec seulement trois ombres. L’astuce : html et body partagent une seule règle. Ce sont deux boîtes invisibles, presque hors du canevas, qui projettent les mêmes ombres depuis deux endroits différents.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/30/un-degrade-trois-boites/ 2026-10-30T00:00:00+00:00

La cible du 30 octobre est le haut d’un large anneau ardoise sur un fond olive, fendu au milieu par une fente verticale, avec un petit carré juste au-dessus de la fente, comme une clé de voûte. Evan Liomain dessine les trois morceaux avec un seul dégradé. Chaque élément reçoit le même radial-gradient, mais chacun le peint centré sur sa propre boîte et à sa propre taille de police : sur html c’est l’anneau, sur body une fente vide, sur un <h1> le carré.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/29/un-outline-double-geant/ 2026-10-29T00:00:00+00:00

La cible du 29 octobre ressemble à un panier vu de face : un grand stade ardoise sur une carte beige, deux U emboîtés accrochés à son bord haut, et un petit carré qui dépasse au-dessus. Benjamin Tordjman la dessine avec une propriété qui fait presque tout : un énorme outline:double. Sur html, il peint tout autour du stade. Sur un body réduit huit fois, le même outline devient les deux U.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/28/une-police-a-zero/ 2026-10-28T00:00:00+00:00

La cible du 28 octobre est une goutte bleu clair sur une carte jaune pâle, avec un quart de disque foncé dans son coin haut-droit, comme une épingle sur une carte ou un camembert. Benjamin Tordjman la dessine avec une seule règle, partagée par html et body, et aucun background visible. Les deux formes viennent de la même liste de rayons : sur body, font:0 efface toutes les valeurs écrites en em, et il ne reste qu’un quart de disque.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/27/des-formes-de-coins-et-un-outline-geant/ 2026-10-27T00:00:00+00:00

La cible du 27 octobre est une forme blanche sur fond prune, comme une flèche qui pointe vers le haut à droite : un carré au coin haut-droit coupé en biais, avec une encoche carrée en bas à droite et un coin bas-gauche en biais. Veit Lehmann la dessine avec une seule boîte, html, et quatre déclarations. Le prune n’est pas un fond mais un outline immense, et corner-shape change les coins arrondis en biais et en encoche.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/26/des-lignes-changees-en-colonnes/ 2026-10-26T00:00:00+00:00

La cible du 26 octobre est une rallonge électrique sur fond vert d’eau : un épais câble bleu avec une boucle en haut à gauche, une boucle en bas à droite, et une prise à chaque bout, l’une vers le bas, l’autre vers le haut. L’image est la même après un demi-tour. Evan Liomain tire cette symétrie des éléments en ligne : un élément en ligne coupé sur deux lignes a ses bordures de début sur le premier morceau et ses bordures de fin sur le second, soit la même forme retournée. Ensuite, toute la page est retournée par rapport à sa diagonale, et les lignes de texte deviennent des colonnes.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/25/un-polygone-deux-boites/ 2026-10-25T00:00:00+00:00

La cible du 25 octobre ressemble à une icône de partage d’écran : un épais cadre sombre sur un fond vert-de-gris, et un triangle sombre en bas qui traverse la barre du cadre, entouré d’une fine bande couleur fond. Ludvig la dessine avec une seule règle pour tous les éléments : même fond, même bordure, même clip-path. Le body et un <p> découpent deux triangles un peu différents dans leurs propres boîtes, et l’écart entre les deux est l’encoche.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/24/un-reflet-dans-un-reflet/ 2026-10-24T00:00:00+00:00

La cible du 24 octobre est un cadre beige aux coins arrondis sur un fond bleu lavande, avec deux petites pilules dedans et deux grandes dehors. Veit Lehmann dessine le cadre avec la bordure de html, et seules deux des quatre pilules existent vraiment comme boîtes : l’une d’elles est même hors du canevas. Deux miroirs -webkit-box-reflect, l’un dans l’autre, mettent tout en place.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/23/le-bord-de-la-tuile-comme-couteau/ 2026-10-23T00:00:00+00:00

La cible du 23 octobre est une ampoule sur fond rouge brique : un disque jaune pâle coupé net en bas, fendu par une fente rouge, avec deux barres dessous. Mohamed Ali la dessine avec un seul dégradé, partagé par tous les éléments. La coupe nette ne coûte rien : c’est le bord de la tuile du fond. La fente et les barres ne sont que des boîtes qui montrent d’autres morceaux du même dégradé.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/22/un-degrade-trois-valeurs/ 2026-10-22T00:00:00+00:00

La cible du 22 octobre est une porte blanche sur fond bleu ciel : deux carrés blancs, bordés à gauche par un montant bleu pétrole et séparés par une barre sombre, avec un disque sombre sur le montant, au centre du canevas. Evan Liomain écrit un seul background pour tous les éléments. Une propriété personnalisée, --c, termine le dégradé différemment à chaque niveau : un disque sur le canevas, un bloc uni sur body, des carrés blancs avec le même disque sur les titres.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/21/dessiner-petit-retourner-en-grand/ 2026-10-21T00:00:00+00:00

La cible du 21 octobre est un disque bleu pétrole entouré de deux arcs épais, ouverts en haut à droite, avec une barre qui monte du disque jusqu’en haut de l’arc extérieur. On dirait un logo de radar ou de signal. Benjamin Tordjman dessine le tout cinq fois plus petit, puis scale:-5 l’agrandit et le retourne d’un seul coup. Les deux anneaux sont une seule bordure double, et le disque est la puce d’un élément de liste.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/20/un-rond-a-trois-ombres/ 2026-10-20T00:00:00+00:00

La cible du 20 octobre ressemble au logo de Skype : un grand disque bleu, deux plus petits sur des coins opposés, et un S carré au milieu, dans la couleur du fond. Kieron dessine les trois disques comme des ombres d’un tout petit html rond, de 20px de large. Le S est un body couleur du fond posé dessus, et ses deux encoches sont les ombres d’une <option>.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/19/un-disque-quatre-coins/ 2026-10-19T00:00:00+00:00

La cible du 19 octobre est un cadre couleur sable sur fond prune, avec une barre de chaque côté et un quart de disque dans chaque coin. koda_pig la dessine avec une seule règle de bordure, partagée par html et body, et un seul fond. Ce fond est écrit sur body, mais il finit sur le canevas, décalé pour que les quatre coins reçoivent chacun un quart du même disque.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/18/deux-fenetres-une-retournee/ 2026-10-18T00:00:00+00:00

La cible du 18 octobre est un H rouge sur fond bleu nuit, avec derrière un disque bleu pâle coupé en deux par la barre. Mohamed Ali la dessine avec un body rouge et deux <p> qui servent de fenêtres. Les deux reçoivent le même dégradé, décalé pour que le bord de la tuile coupe le disque à plat ; la seconde fenêtre est simplement retournée.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/17/une-bordure-en-tirets-retrecie-et-retournee/ 2026-10-17T00:00:00+00:00

La cible du 17 octobre est un carré jaune très pâle sur un fond brun chocolat, avec deux blocs vert sauge dans ses coins du bas et une bande jaune entre les deux. On dirait une dent, ou un tablier. Gunnar Bittersmann la dessine avec le seul body : une boîte crème avec une bordure haute en tirets. Les deux tirets sont les blocs verts. L’astuce : les dessiner sur une boîte trop large pour la cible, puis la resserrer avec scale, et la retourner pour que la bordure du haut finisse en bas.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/16/la-meme-ombre-une-police-plus-grande/ 2026-10-16T00:00:00+00:00

La cible du 16 octobre ressemble à une prise électrique sur un fond crème : un grand demi-disque violet foncé, à plat en haut, deux paires de barres (violette et rose) qui sortent par le bord haut, et une paire plus courte sous le disque. Mohamed Ali la dessine avec une seule liste de trois ombres, donnée à trois boîtes emboîtées : html, body et un h3. Chaque boîte dessine trois copies d’elle-même. Le h3 a une police plus grande, son 20ch est donc plus long, et c’est cette ombre-là qui pose le demi-disque à sa place.

https://evanliomain.github.io/css-battle-blog/fr/2026/10/15/un-miroir-qui-se-remet-a-l-endroit/ 2026-10-15T00:00:00+00:00

La cible du 15 octobre est une page de calendrier : une carte gris clair, deux anneaux gris foncé qui dépassent de son bord haut, et deux rangées de quatre carrés gris foncé, dont le dernier de la rangée du haut est rouge. Benjamin Tordjman la dessine avec une seule liste de sept ombres, utilisée deux fois. body est retourné par scale:-1 1, et une <option> placée dedans se retourne encore, donc revient à l’endroit. La liste est ainsi dessinée une fois telle quelle et une fois en miroir.