Interactive Bento
Cliquez une cellule pour l'agrandir en 2×2 dans la grille — CSS Grid natif, transition back-ease en 500 ms, une seule cellule active à la fois.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'expansion repose sur une seule règle CSS : quand la classe expanded est ajoutée à une cellule, grid-area: span 2/span 2 !important lui fait occuper deux colonnes et deux lignes. CSS Grid redistribue les cellules restantes en flux automatique — aucun calcul de position en JS, aucun positionnement absolu.
La transition .5s cubic-bezier(.175, .885, .32, 1.275) produit un léger rebond back-ease-out à l'arrivée : la cellule dépasse brièvement sa taille cible avant de se stabiliser. L'ombre portée colorée et le dégradé indigo-violet (linear-gradient(135deg, #6366f1 0, #8b5cf6 100%)) s'animent dans la même passe.
La fonction expandCell(e) gère le toggle : si la cellule cliquée porte déjà expanded, elle la retire (réduction) ; sinon elle balaye toutes les cellules du même parent via e.parentElement.querySelectorAll('.bento-cell') pour supprimer expanded partout, puis l'ajoute à la cellule cliquée. Une seule cellule agrandie à la fois, sans état global — plusieurs grilles coexistent sur la même page sans conflit.
Accessibilité
- prefers-reduced-motion absent : l'effet ne détecte pas cette préférence système — les transitions de 500 ms jouent même si l'OS demande moins de mouvement. Ajoutez
@media (prefers-reduced-motion: reduce) { .bento-interactive .bento-cell { transition: none } }si votre usage le requiert. - Les cellules utilisent
onclicksur des<div>, pas des<button>— non accessibles au clavier sanstabindexni gestionnaire keydown. Remplacez les div par des<button type="button">pour un comportement natif (tab + Entrée/Espace). - Aucun attribut
aria-expandednirolen'est déclaré sur les cellules — un lecteur d'écran ne signale pas l'état agrandi/réduit. - Contraste du texte secondaire (#a1a1aa à 70 % d'opacité) sur fond #1a1a24 est inférieur au seuil WCAG AA 4,5:1 pour les petits textes ; la cellule agrandie (blanc sur indigo) passe le test AA.
- L'icône SVG dans chaque cellule manque d'
aria-hidden="true"— les lecteurs d'écran peuvent l'annoncer comme texte vide. Ajoutez l'attribut pour la masquer.
Compatibilité navigateur
Nécessite CSS Grid avec `grid-area: span N/span N` et les transitions CSS — supporté dans tous les navigateurs modernes depuis 2018.
Sans JS, les cellules s'affichent normalement dans la grille sans expansion — la page reste lisible. Sans CSS Grid (IE 11), la grille n'est pas rendue ; utilisez un layout flexbox ou tableau en fallback.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bento-container">
<div class="bento-grid bento-interactive" id="interactiveBento">
<div class="bento-cell" onclick="expandCell(this)">
<div class="cell-content">
<div class="expand-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"></path>
</svg>
</div>
<span>Label</span>
</div>
</div>
<!-- × 6 cellules au total (grille 4 colonnes × 3 lignes) -->
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-elevated | #1a1a24 | Couleur de fond des cellules interactives au repos. Remplacez par votre couleur de surface. |
| --bg-card | #12121a | Couleur de fond du conteneur général. À aligner sur votre fond de page. |
| --border | rgba(255,255,255,0.08) | Bordure des cellules. Montez l'opacité (0.15–0.25) pour un grid plus marqué sur fond clair. |
| --radius-lg | 0.75rem | Rayon des coins de chaque cellule. 0 pour des tuiles carrées, 1rem pour un look cartes arrondies. |
| gradient .bento-cell.expanded | linear-gradient(135deg, #6366f1 0, #8b5cf6 100%) | Dégradé de la cellule agrandie. Remplacez les deux hex par vos couleurs brand, ou supprimez le dégradé pour un fond uni. |
| gap .bento-grid | 12px | Espacement entre les cellules. 8 px pour la densité d'information, 16 px pour un rendu aéré type cartes premium. |
| grid-template-columns .bento-interactive | repeat(4, 1fr) | Nombre de colonnes. Passez à repeat(3, 1fr) pour des cellules plus grandes ou un contenu plus riche par tuile. |
| transition .bento-interactive .bento-cell | .5s cubic-bezier(.175, .885, .32, 1.275) | Durée et courbe de l'expansion. Réduisez à .25s ease-out pour une UI de gestion, augmentez à .8s pour un rendu plus cinématique. |
FAQ
expandCell scopes sa sélection à e.parentElement.querySelectorAll('.bento-cell') — chaque grille gère ses propres cellules sans état global. Deux div.bento-grid.bento-interactive côte à côte fonctionnent sans conflit.<div class="bento-cell" onclick="expandCell(this)"> par un <button type="button" class="bento-cell" onclick="expandCell(this)"> : les boutons sont nativement focusables et activables avec Entrée/Espace. Ajoutez aria-expanded dynamiquement dans expandCell pour informer les lecteurs d'écran.display:none ou opacity:0; height:0) et dévoilez-le via CSS : .bento-cell.expanded .extra { display:block } — aucune modification du JS. Le contenu s'affiche automatiquement à l'expansion et se masque à la réduction.
