« Getting Creative With Images in Long-Form Content » (CSS-Tricks) explore comment les images, souvent reléguées à un rôle purement illustratif, peuvent dynamiser et enrichir l’expérience de lecture des contenus longs. L’article propose des techniques créatives pour intégrer les images de manière expressive : briser la grille classique pour attirer l’attention, jouer avec les formats (full-bleed, modular grids), utiliser les CSS Shapes pour un habillage de texte plus organique, ou encore repenser les légendes et l’espace blanc pour renforcer l’impact visuel et narratif. L’objectif ? Transformer les images en éléments actifs qui rythment la lecture, guident le regard et renforcent l’émotion, plutôt que de simples interludes visuels. Une approche inspirante pour les designers et rédacteurs qui veulent donner plus de personnalité à leurs articles, rapports ou études de cas.
L'auteur analyse et améliore la section "hero" du site Time.com, critiquant notamment le passage trop précoce à un affichage mobile (1 colonne) qui gaspille l’espace disponible sur les écrans intermédiaires. Il propose une approche plus flexible et progressive, en utilisant des techniques CSS modernes : CSS Grid, container queries, display: contents, style queries, grid areas, et le sélecteur :has() pour créer un layout adaptatif et dynamique. L’objectif est de laisser le contenu guider la mise en page, avec des transitions fluides entre 1, 2 et 3 colonnes, tout en optimisant l’espace et la lisibilité. L’article illustre aussi l’utilisation des query units (cqw) pour des tailles de police fluides et des astuces comme text-wrap: pretty pour équilibrer les titres. Une démonstration concrète de comment construire des layouts robustes et modulaires avec du CSS avancé.
L'auteur explique l'importance d'avoir une organisation spatiale cohérente, notamment quand on crée un "design system" : marges, dimensions, taille des composants... Il poursuit en décrivant ce qu'est une grille et en donnant quelques exemples.
Des équivalents flexbox de dispositions en grille
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre (via https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-33 )
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Vivement que les navigateurs se mettent au niveau...
Tout est dans le titre (via http://blog.stephaniewalter.fr/la-semaine-en-pixels-18-decembre-2015/ )
Tout est dans le titre
Susy est une extension de Sass, spécialisée dans les grilles. Elle permet de s'affranchir des calculs fastidieux assez facilement, comme le montre l'auteur dans l'article
Des exemples simples pour le module "mise en page par grilles" de CSS3
Tout est dans le titre (via inpixelwetrust)
Une grille CSS apparemment différente
Un générateur de grilles pour designs web adaptatifs