Css :: Tag :: Ma documentation

CSS Reset

Mon, 01 Jan 0001 00:00:00 +0000

The CSS Reset /* 1. Use a more-intuitive box-sizing model. */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* 3. Allow percentage-based heights in the application */ html, body { height: 100%; } /* Typographic tweaks! 4. Add accessible line-height 5. Improve text rendering */ body { line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 6. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 7. Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* 8. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 9. Create a root stacking context */ #root, #__next { isolation: isolate; } Références https://meyerweb.com/eric/tools/css/reset/ https://www.joshwcomeau.com/css/custom-css-reset/

Block Margin Issue

Mon, 01 Jan 0001 00:00:00 +0000

Le problème

Ceci est un texte

Solutions Utiliser display: flex à la place de display: block sur le container :

Ceci est un texte Ceci est un autre texte

Appliquer un masque à une image

Mon, 01 Jan 0001 00:00:00 +0000

Utiliser un PNG transparent au dessus de l’image (méthode traditionnelle). Définir le border-radius à la moitié (50%) de la dimension de l’image de manière à faire un cercle. Utiliser les propriétés CSS3 mask et mask-clip (démo). Utiliser un canvas en tant que masque. Utiliser un SVG en tant que masque avec l’image comme background-pattern. Utiliser la propriété CSS3 clip-path. Références https://stackoverflow.com/questions/8337570/best-way-to-mask-an-image-in-html5 https://bennettfeely.com/clippy/

CSS Overlay Techniques

Mon, 01 Jan 0001 00:00:00 +0000

Élément en position absolue

html, body { min-height: 100%; } body { position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); /*dim the background*/ } Élément avec une position fixe Utilisation d’un pseudo élément Appliquer un grand contour à une modale Appliquer une grande ombre à une modale Utilisation de l’élément HTML

Faire de belles ombres en CSS

Mon, 01 Jan 0001 00:00:00 +0000

Références https://www.joshwcomeau.com/css/designing-shadows/