Je tente la CSSBattle #19 ! (rediff)

Rediffusion du live où j'ai tenté le challenge #19 du CSSBattle

00:00 Introduction
01:37 Challenge 109 : Curtain
10:05 Challenge 110 : Sunrays
30:36 Découverte sur le transform-origin
33:08 Challenge 111 : Raindrops
56:17 Challenge 112 : Chevron
01:18:35 Challenge 113 : Black Light
01:26:52 Challenge 114 : Negative Box
01:32:49 Challenge 115 : Droplet
01:53:10 Challenge 116 : Headphones
02:04:37 Ce que j'ai appris

[mouhamaddiop]

Je trouve ce format vraiment pratique dans le sens où on apprend beaucoup de choses parfois des autres. C'est fun et instructif en même temps. Bravo vraiment pour ce format.

[tcgvsocg]

kevin powel l a fait il y a deux jours c'est incroyable! c'est pas du tout la meme approche toi c'est vraiment beaucoup les maths et lui c'est vraiment le coté artistique

[cssbattle]

very coool! You have made your CSSBattle canvas!!!! 🔥 woah! THanks for sharing this :)

[gabrieltavernier]

Je trouve ça très marrant, et je veux bien voir les prochain battle en rediffusion 👍

[jonathanoden]

Pour le n°113: "back light", tu aurais pu utiliser la perspective (sur un div parent) et un transform (sur un div enfant) : translateZ pour ajuster le "zoom" et un rotateY négatif pour avoir un point de fuite vers la gauche.

[taxi-driver]

Cool! La négative box je voyais trois triangles.

[vincentvlb]

Durant la rediffusion tu nous dis que tu ne partagerai la page local avec la superposition et la différence. Pourrai tu nous la partager sur YouTube aussi s’il te plaît :)

[bArraxas]

40:18 oui tu te casse le bonbon pour rien ^^
Tu fais un carré de 50 par 50 et tu ajoute ceci : border-radius: 50% 50% 50% 0;

[lyline_bzh]

Hello, ça fait un baille que j'ai dit un mot alors j'en profite pour l'ouvrir un peu 😜

Je fais du dev, là où se cache la boîte de cookies... si tu veux rejoins moi 🤣... donc autant dire que le front, ça me file des boutons. Mais avec toi, c'est toujours sympa alors je regarde de temps en temps, depuis le Raton, donc depuis un ptit moment... bref.

Pour revenir à ta méthode empirique de recherche de valeurs de positionnement de tes "polygones", ce n'est pas une critique (je précise avant de me faire caillaisser), je la trouve un peu casse bonbon, taper une valeur puis en taper une autre et encore... Perso, comme je suis un bon gros fainéant de dev qui se respecte, j'utilise l'inspecteur et l'onglet css, un click sur la valeur que tu veux modifier et ensuite on joue avec les flèches haut bas pour avoir ta valeur... j'avoue cette méthode a un petit hic... il faut reporter ta valeur dans ton fichier css après.... mais en gros je règle tous mes margin, padding et j'en passe pour avoir mon rendu final et après je copie colle le css de l'inspecteur dans mon fichier css

Voilà... c'était l'astuce inutile du milieu de la nuit, à prendre avec des pincettes et au 3e degrés 😉

Bon rétablissement pour ta fin de covid, et encore merci pour tes vidéos et ta manière de voir les choses (pas une fois, je n'ai eu le même raisonnement que toi, et ça se tombe j'imaginais des fonctions css qui n' existent même pas, comme la symétrie par exemple)

Allez, next !

[dihcarkouane]

Pour le headphone avec un pseudo élément et une boxshadow 😁

<div class="headphone"></div>

<style>
body {
background: #293d7e;
margin: 0;
display: grid;
place-content: center;
min-height: 100vh;
}


.headphone {
position: relative;
top: -20px;
width: 130px;
height: 130px;
border-radius: 100% 100% 0 0;
border: 20px solid #6E91CA;
border-bottom-color: transparent;
}


.headphone::before {
position: absolute;
content: '';
left:-20px;
bottom: -50px;
width: 60px;
height: 80px;
background: #6E91CA;
border-radius: 40px 40px 60px 60px;
box-shadow: 110px 0 #6E91CA;
}
</style>

[MG-mngj]

En positionnant un bloc et en utilisant un très long box-shadow, tu obtiens le même résultat

[ahnatechnology]

tu peux tout simplement utiliser 'box-shadow' c'est plus facile et plus rapide

[tcgvsocg]

c'est incroyable pour les chevron tu a trouvé une reponse differente de @kevinPowell et opurtant le meme nombre de character c'est fou