Étant à l'origine un développeur backend Java, le CSS a toujours été un mystère pour mois. J'élève certains codeurs de ce langage au rang de magicien et lire ce code revient pour moi à passer l'épreuve de la Marelle d'Ambre.
Bien entendu, quand je regarde un tour de magie, j'essaye de savoir comment ça marche. C'est quoi le truc ? C'est pourquoi, je suis quelques chaines Youtube de développeur Web pour en apprendre davantage. Et c'est au détour d'une vidéo de Kevin Powell que je découvre ce site CSS Battle qui offre un petit défi quotidien pour reproduire des formes en pure CSS en utilisant le moins de caractères possible.
Je suis emballé par l'idée. Voilà des défis qui sortent de l'ordinaire, ne sont pas trop facile, mais en même temps accessible. C'est pédagogique, car chaque jour, nous pouvons voir les meilleurs résultats de la veille. Cela fait maintenant quelques jours que je participe à ces petits défis et, aujourd'hui, je voulais partager mon cheminement pour aboutir aux résultats attendu (si j'y arrive).
La cible du jour est cette forme qui ressemble à 2 pyramides l'une devant l'autre.
IMAGE OBJECTIF
Ce que j'ai appris des jours précédents pour gagner des caractères au final, c'est de réutiliser les balises qui existent d'office sans avoir besoin de les écrire. Nous pouvons par exemple placer la balise body exactement comme on le ferait avec une balise div.
En regardant les résultats d'hier, j'ai découvert une propriété que je connais mal clip-path. Cette propriété permet de "découper" des formes. Et je me dis, c'est parfait pour créer cette forme triangulaire.
J'imagine donc 2 formes triangulaires, la première qui est plus large avec un fond transparent et un border de la couleur désirée. La seconde plus petite sans border avec une couleur de fond pleine. Ok. C'est parti. En tâtonnant un peu, j'arrive assez vite à ce résultat.
<style>
* { /* apply to html */
margin:0;
background: #F49FC7;
* { /* apply to body */
position: fixed;
width: 200;
height: 125;
background: #810070;
top: 175;
left: 100;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
}
</style>
Wouhahou ! Je suis un magicien moi aussi. Je fais apparaitre une pyramide sans aucunes balises. Bref, je suis content de moi et je pourrai finir ma journée heureux maintenant. Mais ce n'est pas fini, je dois m'occuper de la seconde plus grande pyramide.
J'ajoute donc juste une balise p qui héritera naturellement des attributs que j'ai réussi à appliquer à la balise body. Et il ne reste plus qu'à la repositionner et créer la bordure et voilà, le défi est terminé.
Quelle naïveté !
Je commence doucement en ajoutant ma balise pour prendre toute la largeur de l'écran et avec un fond jaune pour bien la voir.
p {
background: yellow;
width: 400;
left: 0;
}
Le débutant que je suis a essayé de faire sortir une balise du body de la page. À ce moment-là, je me sens vraiment idiot. L'impossibilité de ce que j'essaye de faire parait tellement évidente une fois qu'on le formule avec des mots.
Ce n'est pas grave, je me ressaisis et je décide simplement d'inverser les choses, la balise body sera la plus grande pyramide.
<style>
* {
margin:0;
background: #F49FC7;
* {
position: fixed;
width: 400;
height: 250;
background: #810070;
top: 50;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
}
</style>
En changeant juste le positionnement et les dimensions de ma forme, je retrouve une pyramide à la bonne taille. Il ne reste plus qu'à appliquer une bordure et rendre transparent le contenu. j'enlève donc la propriété background et ajoute un border: 20px solid #810070.
IMAGE ECHEC
Un magicien ne doit pas sortir sans avoir un clip-path dans son chapeau, mais cet attribut doit rester le clou du spectacle. On ne peut appliquer de border ou de box-shadow par-dessus. Cela ne fonctionne tout simplement pas.
Visiblement l'astuce pour y parvenir consiste à encapsuler l'élement qui a été découpé dans un autre élément sur lequel on applique le même découpage et qui fera semblant d'être le bord. Cela fait beaucoup trop de code à écrire dans le cadre de ce défi. Et même dans une véritable application, je trouverai ça difficile à relire.
Finalement, j'oublie l'idée de créer 2 pyramides avec des bordures. Je garde ma plus grande pyramide et je décide d'extruder la zone plus claire entre les 2 pointes de couleurs plus foncées. Ma balise p supplémentaire va donc prendre la couleur claire et un clip-path supplémentaire va définir un polygone avec plus de côtés.
p {
background: #F49FC7;
clip-path: polygon(50% 50px, 360px 100%, 300px 100%, 50% 125px, 100px 100%, 40px 100%);
}
La découpe est assez verbeuse, car il y a beaucoup de points à définir, mais le résultat est bien là. Au final, voici ma proposition.
<p></p>
<style>
* { /* apply to html tag */
margin:0;
background: #F49FC7;
* { /* apply to body tag */
position: fixed;
width: 400;
height: 250;
background: #810070;
top: 50;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
p {
background: #F49FC7;
clip-path: polygon(50% 50px, 360px 100%, 300px 100%, 50% 125px, 100px 100%, 40px 100%);
}
}
</style>
Avant de soumettre le résultat, je vais appliquer une minification sauvage en enlevant non seulement tous les blancs et retour à la ligne inutile, mais aussi les ; et autres balises fermantes tant que la validation du navigateur fonctionne.
<p><style>*{margin:0;background:#F49FC7;*{position:fixed;width:400;height:250;background:#810070;top:50;clip-path:polygon(50% 0,100% 100%,0 100%)}p{background:#F49FC7;clip-path:polygon(50% 50px,360px 100%,300px 100%,50% 125px,100px 100%,40px 100%)
J'obtiens un score de 637,63 avec 248 caractères utilisés. Je me rends compte que je peux encore grappiller quelques caractères en utilisant des placements en % au lieu des px dans mon dernier polygone.
<p><style>*{margin:0;background:#F49FC7;*{position:fixed;width:400;height:250;background:#810070;top:50;clip-path:polygon(50% 0,100% 100%,0 100%)}p{background:#F49FC7;clip-path:polygon(50% 20%,90% 100%,75% 100%,50% 50%,25% 100%,10% 100%)
L'air de rien, j'ai économisé 10 caractères puisqu'il n'y en a plus que 238 pour un score final de 641,39.