Beaucoup d'éléments qui devaient hériter de leurs parents. Gros chantier
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/eKOvo2eTKNQ
Beaucoup d'éléments qui devaient hériter de leurs parents. Gros chantier
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/eKOvo2eTKNQ
Utilisation intensive de la propriété `corner-shape: notch` pour réaliser cette croix !
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/3KWZV6ZKOl8
Utilisation intensive de la propriété `corner-shape: notch` pour réaliser cette croix !
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/3KWZV6ZKOl8
Simplicité `html` avec des `border-radius` et `body` qui hérite du `background` +3 `box-shadow` pour la découpe. 🧐
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/V4gj2q1I5aQ
Simplicité `html` avec des `border-radius` et `body` qui hérite du `background` +3 `box-shadow` pour la découpe. 🧐
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/V4gj2q1I5aQ
Pour reproduire le symbole du dollar aujourd'hui, j'ai misé sur l'astuce imparable du scale: -1 !
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/i0uatWO6_oM
Pour reproduire le symbole du dollar aujourd'hui, j'ai misé sur l'astuce imparable du scale: -1 !
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/i0uatWO6_oM
Le plus important est d'abord de réussir le défi ! et après on optimise...
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/ipimccmqbPM
Le plus important est d'abord de réussir le défi ! et après on optimise...
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/ipimccmqbPM
Ce n'était pas tant le Pac-Man qui était intéressant aujourd'hui mais plutôt sa bouche et le diamant qu'il s'apprête à manger.
youtu.be/LwtWthoUCl8
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
Ce n'était pas tant le Pac-Man qui était intéressant aujourd'hui mais plutôt sa bouche et le diamant qu'il s'apprête à manger.
youtu.be/LwtWthoUCl8
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
le `body` côté arrondi pour former la porte du château, en superposition au `html` qui formera les murs.
youtu.be/sNJqW-f5y5E
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
cssbattle.oliviermaghe.com
le `body` côté arrondi pour former la porte du château, en superposition au `html` qui formera les murs.
youtu.be/sNJqW-f5y5E
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
cssbattle.oliviermaghe.com
Un grand classique du CSS : la création d'un triangle parfait via trois bordures transparentes et une bordure colorée
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/kC7aHgqUMyU
Un grand classique du CSS : la création d'un triangle parfait via trois bordures transparentes et une bordure colorée
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/kC7aHgqUMyU
Comme la couleur noire est la couleur des `box-shadow`, j'ai décidé de tout jouer sur ça
youtu.be/sBzRT73N9Uw
#CSS #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
Comme la couleur noire est la couleur des `box-shadow`, j'ai décidé de tout jouer sur ça
youtu.be/sBzRT73N9Uw
#CSS #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
Fabriquer cette image d'imprimante en full CSS
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/eKJaJ1ulsGI
Fabriquer cette image d'imprimante en full CSS
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/eKJaJ1ulsGI
Trick 4 img margin and conatiner margin + boder radius
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/Vzjz_l8VSXo
Trick 4 img margin and conatiner margin + boder radius
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/Vzjz_l8VSXo
`border-radius` et `corner-shape: notch` pour les nuls.
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/1yYaJFPMPL4
`border-radius` et `corner-shape: notch` pour les nuls.
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/1yYaJFPMPL4
J'ai regardé l'image de cette clé anglaise d'une autre façon ! `radial-gradient` `box-shadow`
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/imX9DAlB2D8
J'ai regardé l'image de cette clé anglaise d'une autre façon ! `radial-gradient` `box-shadow`
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/imX9DAlB2D8
Rien de compliqué : html border-radius body et box-shadow tout simplement ! 🧐e ?
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/kGSXPE4lQxs
Rien de compliqué : html border-radius body et box-shadow tout simplement ! 🧐e ?
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/kGSXPE4lQxs
Une clepsydre, quel beau mot, et tout en CSS et box shadow
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/1_n5oI7ZW2o
Une clepsydre, quel beau mot, et tout en CSS et box shadow
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/1_n5oI7ZW2o
Trick habituel de CSS golfing, font:size/lineheight 🧐
En conditions réelles
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/RUGgO_ZtoiY
Trick habituel de CSS golfing, font:size/lineheight 🧐
En conditions réelles
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/RUGgO_ZtoiY
J'utilise le `radial-gradient` pour fabriquer les demi-ronds. En utilisant `at bottom`, on en fabrique un demi très facilement !
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/Ejzb-YMY7hw
J'utilise le `radial-gradient` pour fabriquer les demi-ronds. En utilisant `at bottom`, on en fabrique un demi très facilement !
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/Ejzb-YMY7hw
3 elem en ligne: `img` est le bon idéal ! un `outline` sur le `html` passe au-dessus de tout, donc du `body` et même des `img`.
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/QQJ_s2sAM38
3 elem en ligne: `img` est le bon idéal ! un `outline` sur le `html` passe au-dessus de tout, donc du `body` et même des `img`.
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/QQJ_s2sAM38
Jouer avec les `border` pour la perspective. Caractère blanc insécable pour le border-collapse
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/ijLEI7PYep8
cssbattle.oliviermaghe.com
Jouer avec les `border` pour la perspective. Caractère blanc insécable pour le border-collapse
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/ijLEI7PYep8
cssbattle.oliviermaghe.com
Premier succès avec `border-image`
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/dLeqeOsLo7k
cssbattle.oliviermaghe.com
Premier succès avec `border-image`
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
N'oubliez pas de liker la vidéo 👍 et de vous abonner ! 🔔
youtu.be/dLeqeOsLo7k
cssbattle.oliviermaghe.com
Combinons les différents types de border et outline: dotted, dashed et solid, 3 variantes ! 🧐
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/MSJsvjivyJo
Combinons les différents types de border et outline: dotted, dashed et solid, 3 variantes ! 🧐
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/MSJsvjivyJo
Si le `html` fait l'entièreté du canvas, alors le `body` qui se trouve à l'intérieur du `html` peut recevoir le `-webkit-box-reflect`
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/7a2tH9iWdPQ
Si le `html` fait l'entièreté du canvas, alors le `body` qui se trouve à l'intérieur du `html` peut recevoir le `-webkit-box-reflect`
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/7a2tH9iWdPQ
La difficulté d'aujourd'hui, c'était cette barre horizontale qui ne sortait pas du rond central... Comment la faire ?
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/fYd7xIkVSag
cssbattle.oliviermaghe.com
La difficulté d'aujourd'hui, c'était cette barre horizontale qui ne sortait pas du rond central... Comment la faire ?
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution
youtu.be/fYd7xIkVSag
cssbattle.oliviermaghe.com
L'utilisation d'un `conic-gradient` permet de faire le H assez facilement.
youtu.be/7KqQKOqQyr0
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
(cssbattle.oliviermaghe.com)
L'utilisation d'un `conic-gradient` permet de faire le H assez facilement.
youtu.be/7KqQKOqQyr0
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
(cssbattle.oliviermaghe.com)
`box-shadow` distribués aux 4 coins de l'écran. L'ordre des couches est crucial
youtu.be/8jt9_VDKciw
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
cssbattle.oliviermaghe.com
`box-shadow` distribués aux 4 coins de l'écran. L'ordre des couches est crucial
youtu.be/8jt9_VDKciw
#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #cssbattlesolution
cssbattle.oliviermaghe.com