Pens from Michel Michaud https://codepen.io/michelmichaud/ en nospam@codepen.io Copyright 2024 2022-01-12T21:43:09-07:00 Démo clearfix : le bogue https://codepen.io/michelmichaud/pen/bNVOBm https://codepen.io/michelmichaud/pen/bNVOBm Michel Michaud

See the Code - See it Full Page - See Details

Démo de la nécessité d'une solution au problème de l'invisibilité des éléments float

]]>
Démo clearfix : le bogue 2015-10-13T02:19:48-07:00
Démo-clearfix https://codepen.io/michelmichaud/pen/xbwmZZ https://codepen.io/michelmichaud/pen/xbwmZZ Michel Michaud

See the Code - See it Full Page - See Details

Démo de la nécessité d'une solution au problème de l'invisibilité des éléments float

]]>
Démo-clearfix 2015-10-13T02:20:31-07:00
Propriété overflow https://codepen.io/michelmichaud/pen/empbpq https://codepen.io/michelmichaud/pen/empbpq Michel Michaud

See the Code - See it Full Page - See Details

]]>
Propriété overflow 2014-12-03T19:51:46-07:00
Démo display https://codepen.io/michelmichaud/pen/KwdbdJ https://codepen.io/michelmichaud/pen/KwdbdJ Michel Michaud

See the Code - See it Full Page - See Details

]]>
Démo display 2014-12-03T19:50:56-07:00
Démo vertical-align https://codepen.io/michelmichaud/pen/RNWEWZ https://codepen.io/michelmichaud/pen/RNWEWZ Michel Michaud

See the Code - See it Full Page - See Details

La propriété vertical-align est intuitive seulement quand elle est appliquée dans une cellule d'une table, car dans ce cas elle indique comment aligner son contenu. Ailleurs, elle ne s'applique en principe que sur des éléments inline ou inline-block où elle permet de spécifier un alignement autre que celui par défaut qui suivrait la ligne de base dans le conteneur. En particulier, elle ne permet pas directement d'aligner le contenu d'un div ou autre bloc.

]]>
Démo vertical-align 2014-12-03T19:50:34-07:00
Démo de border-radius https://codepen.io/michelmichaud/pen/GgpPJO https://codepen.io/michelmichaud/pen/GgpPJO Michel Michaud

See the Code - See it Full Page - See Details

]]>
Démo de border-radius 2016-12-13T22:57:00-07:00
Test sur niveaux h, section et article https://codepen.io/michelmichaud/pen/azvPOv https://codepen.io/michelmichaud/pen/azvPOv Michel Michaud

See the Code - See it Full Page - See Details

Il y a une présentation automatique des éléments article, section et h imbriqués qui montre l'imbrication. Cet exemple permet de mieux comprendre la logique à appliquer dans l'utilisation de ces éléments.

]]>
Test sur niveaux h, section et article 2014-12-03T19:43:22-07:00
Démo gradient https://codepen.io/michelmichaud/pen/VYLozy https://codepen.io/michelmichaud/pen/VYLozy Michel Michaud

See the Code - See it Full Page - See Details

]]>
Démo gradient 2016-11-03T17:09:38-07:00
Perfect responsive images (without JS) https://codepen.io/michelmichaud/pen/Qwwvor https://codepen.io/michelmichaud/pen/Qwwvor Michel Michaud

See the Code - See it Full Page - See Details

Media queries cannot be used to change the src attribute of an img tag. However they can be used to change a background-image. By using a div with a changing background-image and a CSS trick to adjust the size, it is possible to achieve a "perfect responsive image replacement div" without srcset or picture (although those would make it easier).

]]>
Perfect responsive images (without JS) 2022-01-12T21:43:09-07:00
Multicolonnes automatiques https://codepen.io/michelmichaud/pen/VYweLE https://codepen.io/michelmichaud/pen/VYweLE Michel Michaud

See the Code - See it Full Page - See Details

Malheureusement, columns et ses variantes ne sont pas encore bien implémentés dans les fureteurs. Par contre, on peut utiliser les versions avec préfixe de plusieurs de ces balises. On donne ici l'exemple d'une simple règle (deux en fait) à appliquer à des gros blocs de texte afin de les séparer automatiquement en colonnes ne dépassant pas les normes classiques (on a mis 20em, donc à 40em, ou environ, une nouvelle colonne est créée).

]]>
Multicolonnes automatiques 2014-11-13T19:22:11-07:00