CategoryCSS

Astuces CSS pour développeurs front-end / intégrateurs html.

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:

Source: Disable Scrolling on Body

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

dégradé de fond avec effet d’oblique sur codepen.io

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.

La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Code CSS à mettre en place:

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

Source CSS

[javascript] Importer des breakpoints CSS

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

[CSS] Une modale plein écran sans JavaScript (uniquement avec CSS/SCSS)

Code pen: No JS modal popup window

Fonctionnel IE11, Edge, Chrome, iPhone5, Android…

Troubleshooting:

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?. Cf: solution 2 avec le display: none;

[CSS] Alignements compliqués avec Flexbox

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

[CSS] Ajuster une ancre de page à la hauteur d’un bandeau fixe (sticky)

offsetting an html anchor to adjust for fixed header [duplicate]


Autre solution

offsetting an html anchor to adjust for fixed header

[CSS] Du random en CSS avec :nth-child

Source: https://www.lottejackson.com/learning/nth-child-cicada-principle. Version PDF de l’article.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑