Jeux CSS online

Hello,
Petit partage d'un site que je ne connaissais pas qui permet de penser à du CSS différement de ce qu'on peut faire tous les jours. Il s'agit de cssbattle, le but est simple, il suffit de refaire de formes en CSS sur base d'une image donnée.

Vous pouvez avoir un diff entre votre résultat et le résultat souhaité.

En réalité, je n'aime pas du tout le système de score (moins de code, plus de point ce qui n'a pas du tout de sens pour moi car ce n'est pas un vrai critère de qualité). La seconde chose qui me dérange, parfois l'icone n'est pas centrée pour quelques pixels, et ça ajoute un peu de "mauvais code".
Autrement, je trouve ça super et pouvoir penser à créer des formes de manières différentes avec des combinaisons de propriétés qu'on utilise tous les jours.

Un petit example de la touche commande que j'ai refais avec grid, border et box-shadow.


Avez-vous déjà essayé?

Salut !

Yes ! J'ai découvert ca il y a quelques temps. Je me suis inscrit et j'en ai fait quelques-uns.
Vraiment très cool mais effectivement, tout comme toi, je n'aime pas le système de score non plus. Pour avoir fouillé et regardé les solutions (les scores me paraissaient aberrants) le CSS est totalement dénaturé (au delà de ce que je pouvais imaginer).
Bon par contre, coté positif j'ai appris beaucoup de choses très pointues (pas forcément utiles ou de qualité) sur ce qu'il était justement possible de faire en CSS.

Donc au final très sympa et intéressant

Faudrait faire un petit concours comme ça mais avec un départ tous ensemble et un score basé à la fois sur le temps mis pour finir et sur la quantité de code (et éventuellement la qualité mais bon ca peut être subjectif).

Bonjour,

Je découvre et en effet c'est très intéressant.

On notera au passage que le svg ne semble pas autorisé (même encapsulé sous forme de data:image ?). Cela se comprend vu que le svg est très souvent imbattable en nombre de caractères. Mais c'est aussi un peu dommage parce que dans la vraie vie, on a le droit au svg !

Et puis c'est quand même bien plus propre en général. Par exemple, sur l'exemple de la touche de commande cité par yordi, on arrive sans trop forcer à moins de 300 caractères avec un svg encapsulé dans le css avec un data:image (il faut essentiellement veiller à encoder les <, > et # comme dans une url) , et surtout on a un html parfait !

Par contre, c'est sûr que c'est moins rigolo !

J'ai laissé la balise fermante et quelques espaces qu'on aurait pu supprimer pour faire encore un peu plus court :

<div></div>

div{
	width:800px;
	height:600px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='%235dbcf9'%3E%3Cpath d='M14 12H26A3 3 0 1 0 23 9V21A3 3 0 1 0 26 18H14A3 3 0 1 0 17 21V9A3 3 0 1 0 14 12'/%3E%3C/svg%3E")
}

Amicalement
Modifié par parsimonhi (30 Dec 2021 - 04:25)

Raphaël faisait un peu la même chose. Je me souviens d'une question par example qui était :
Comment avoir un texte centré avec une bordure à mi hauteur mais rien derrière le texte ?

Pareil, il y a 1000 ( ) solutions, par contre certaines plus élégantes que d'autres! Certaines qui fonctionne uniquement dans certains cas (par example si le fond est uni uniquement, ou avec tel ou tel support).

C'est sûr que ces défis sont vraiment des exercices et qu'ils doivent rester tels, dans le but d'apprendre des choses. Car mis à part le poids de telle ou telle solution, SVG reste de toute manière imbattable en terme de modularité, sans bricolage.

Yordi a écrit :
Raphaël faisait un peu la même chose. Je me souviens d'une question par example qui était :
Comment avoir un texte centré avec une bordure à mi hauteur mais rien derrière le texte ?

Je m'en souviens ! D'ailleurs je n'avais retenu aucune de ces solutions, même celles validées, car trop limitées en fonction du contexte. Mais elles avaient contribué à ma réflexion en vue de ma propre solution.

C'est justement pcq on a pas de contexte ici qu'on (re)pense à certaines propriétés différemment, et c'est ça que je trouve génial .

Dans le contexte actuel avec des composants qui s'imbrique dans tous les sens, il faut parfois être créatif sur la manière de les concevoir. Ce genre d'exercice sert justement à penser out of the box et est plutôt utile je trouve.

Bonjour,

Je ne sais pas si c'est vraiment une bonne idée de faire ces challenges tellement on est obligé de faire du code "que la morale réprouve", mais bon, j'ai craqué.



Amicalement,

Bonjour,

Amélioration à 224 caractères (le top score est à 159 caractères, c'est encore loin mais on s'en rapproche, plus que 25% environ de caractères à gagner) :

<z z><z><z><z><z>
<style>body{background:#191919}z{position:fixed;width:50;height:50;border:10px solid#5dbcf9;transform:rotate(90deg)}z z{border-radius:200% 200% 0;left:110;top:-10}[z]{left:166;top:114}[z]>z{left:50;top:-70}

Note : on doit très probablement pouvoir se passer d'un couple (left,top), mais je n'ai pas encore trouvé comment.

EDIT: Voilà, le (letf,top) en moins, couplé à amélioration pour la couleur du fond du body, et la suppression d'espaces que j'avais laissé trainé, on arrive à 214 caractères.

<z z><z><z><z><z><style>*{background:#191919}z{position:fixed;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,1,-1,0,110,-10)}z z{border-radius:200% 200% 0}[z]{left:56;top:124}[z]>z{left:-60;top:-60}

EDIT 2: à un moment donné, je pensais qu'il y avait une combine chez cssbattle qui permettait de se passer des px, alors que ces px semblaient nécessaires sur un navigateur normal. Mais finalement, il n'en est rien, c'était juste parce que je n'arrivais pas à faire un copier-coller correctement.

EDIT 3: on devrait pouvoir gagner encore un couple (left,top) supplémentaire. En attendant, on arrive à 208 caractères en remplaçant les z par des x et y.

<x><y><y><y><y><style>*{background:#191919}x,y{position:fixed;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,1,-1,0,110,-10)}y{border-radius:200% 200% 0}x{left:56;top:124}x>y{left:-60;top:-60}

EDIT 4: en faisant des rotations de 270° au lieu de 90°, on arrive à 207 caractères.

<x><y><y><y><y><style>*{background:#191919}x,y{position:fixed;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,-1,1,0,-10,110)}y{border-radius:200% 200% 0}x{left:176;top:4}x>y{left:-60;top:-60}

Amicalement,
Modifié par parsimonhi (04 Jan 2022 - 01:10)

Assez impressionnant je trouve ! Au delà du nombre de caractères, j'adore l'approche. Et c'est exactement pour ça que j'adore ce jeux, il y a tellement de possibilité de faire la même chose…
ps: je me demande si l'espace (après le %) dans le border-radius ne pourrait pas être supprimé (à vérifier)

Salut tu peux aussi passer de 200% 200% 0 à 50% 50% 0 pour le border radius

Bonjour,

Yordi a écrit :
je me demande si l'espace (après le %) dans le border-radius ne pourrait pas être supprimé (à vérifier)

Effectivement, on peut. Bien vu !

_laurent a écrit :
Salut tu peux aussi passer de 200% 200% 0 à 50% 50% 0 pour le border radius

Effectivement on peut. Bien vu aussi !

Heureusement que vous êtes là. Je me demande d'ailleurs à quoi j'ai pensé quand j'ai écrit ce 200% 200% 0.

On est désormais collectivement 37e avec 203 caractères ! La barre des 200 caractères n'est plus très loin !

<x><y><y><y><y><style>*{background:#191919}x,y{position:fixed;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,-1,1,0,-10,110)}y{border-radius:50%50%0}x{left:176;top:4}x>y{left:-60;top:-60}

EDIT: 197 caractères avec en particulier l'utilisation de margin au lieu de left et top.

<x><y><y><y><y><style>*{background:#191919}x,y{position:fixed;width:50;height:50;border:10px solid#5dbcf9}y{border-radius:50%50%0;transform:matrix(0,-1,1,0,-10,110)}x>y{margin:-60}x{margin:106 158}

EDIT: 193 caractères avec un float:left à la place du position:fixed. On est 28e.

<x><y><y><y><y><style>*{background:#191919}x,y{float:left;width:50;height:50;border:10px solid#5dbcf9}y{border-radius:50%50%0;transform:matrix(0,-1,1,0,-10,110)}x>y{margin:-60}x{margin:106 158}

EDIT: 192 caractères

<x><y><y><y><y><style>*{background:#191919}x,y{float:left;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,-1,1,0,-10,110)}y{border-radius:50%50%0}x>y{margin:-60}x{margin:-4 168}

Amicalement,
Modifié par parsimonhi (05 Jan 2022 - 20:28)

Comme j'aime les comptes rond je me suis souvenu d'un petit trick : placer en dernier un paramètre avec une parenthèse et omettre de la fermer, tout comme la dernière accolade :

<x><y><y><y><y><style>*{background:#191919}y{border-radius:50%50%0}x>y{margin:-60}x{margin:-4 168}x,y{float:left;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,-1,1,0,-10,110

190

bonne nuit !


PS : ils sont trèèèèès loin les 159 je craint que ca ne soit quelque chose de fondamentalement différent...

Bonjour,

_laurent a écrit :
190

Skillful !

Merci beaucoup pour l'astuce !

_laurent a écrit :
PS : ils sont trèèèèès loin les 159 je craint que ca ne soit quelque chose de fondamentalement différent...

C'est vrai que là, on fait un peu les fonds de tiroir !

Il pourrait y avoir une matrix() magique qui permettrait de se passer des margin ou du float ou les 2. Mais j'ai déjà beaucoup cherché dans cette direction et j'avoue que comme toi je n'y crois pas trop.

EDIT: 189

<x><y><y><y><z><style>*{background:#191919}x,y,z{float:left;width:50;height:50;border:10px solid#5dbcf9;margin:50}x{margin:106 158}x,y{border-radius:50%50%0;transform:matrix(0,-1,1,0,-60,60

EDIT: 188, score de 666,66, j'arrête là, il est trop diabolique !

<z><z><z><z><style>*{background:#191919}z{border-radius:50%50%0}body{margin:64+236}z>z{margin:60}*>*{float:left;width:50;height:50;border:10px solid#5dbcf9;transform:matrix(0,-1,1,0,-70,50

EDIT: 184, j'aurais dû arrêter !

<z><z><z><z><style>*{background:#191919}body{margin:89+261}z>z{margin:60}z{border-radius:50%50%0}*>*{position:fixed;padding:25;border:10px solid#5dbcf9;transform:matrix(0,-1,1,0,-95,25

EDIT: 177 (j'entrevoie comment on peut arriver au 159)

<z><z><z><z><style>*{background:#191919}*>*{float:left;margin:114+166;padding:25;border:10px solid#5dbcf9}z{border-radius:50%50%0;margin:-95}z>z{transform:matrix(0,-1,1,0,60,180

Amicalement,
Modifié par parsimonhi (08 Jan 2022 - 21:54)