Catégorie : CSS

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

[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

[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.