HALFTONE
Tramé CSS pur : une grille de points radial-gradient répétée sur un fond dégradé, fusionnée en mix-blend-mode multiply — zéro JS, zéro image.
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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le tramé est entièrement généré en CSS. .ng-halftone-pattern porte background-image: radial-gradient(circle, #000 1px, transparent 1px) combiné à background-size: 8px 8px : le navigateur répète ce motif en tuile, créant une grille régulière de points noirs de 1 px de rayon espacés de 8 px — l'équivalent CSS d'une plaque offset. Modifier la première valeur (1px) change le rayon du point ; modifier background-size ajuste le pas de grille.
Le calque .ng-halftone-bg porte un radial-gradient(circle, #8b5cf6, #0a0a0f 70%) : violet saturé au centre, noir aux bords. Le calque pattern est superposé avec mix-blend-mode: multiply — les points noirs multiplient la couleur du fond (résultat : plus sombre), mais sur un fond quasi-noir les points multipliés par zéro deviennent invisibles. L'effet produit une modulation de densité apparente : les points ressortent dans la zone lumineuse du centre et disparaissent vers les bords sombres, imitant la densité variable d'un tramé offset photographique.
opacity: 0.6 sur .ng-halftone-pattern atténue l'intensité globale. Le calque .ng-halftone-content est positionné au-dessus (position: relative; z-index: 1) pour accueillir texte ou composants sans interférer avec le tramé.
Accessibilité
- Pas d'animation — l'effet est entièrement statique (CSS pur, zéro JS). Aucune vérification
prefers-reduced-motionn'est présente dans le code, ni nécessaire. - Les calques décoratifs (
.ng-halftone-bg,.ng-halftone-pattern) ne portent pasaria-hidden="true"dans le code livré — à ajouter à l'implémentation, car ces divs sont purement visuelles. - Contraste texte : le fond violet foncé laisse de la lisibilité, mais le ratio varie selon la zone. Vérifiez le contraste WCAG AA du texte overlay au point de densité maximale (centre violet, fond ~#4c1d95).
- Aucun élément interactif dans l'effet — navigation clavier non concernée.
- Le conteneur
.ng-halftone-scenepeut recevoirrole="img"et unaria-labeldescriptif si l'effet constitue le seul contenu visible de la section.
Compatibilité navigateur
CSS pur : seuls radial-gradient et mix-blend-mode sont requis — zéro dépendance JS, zéro image externe.
Sans support de <code>mix-blend-mode</code> (IE 11), les points noirs s'affichent sans fusion — le tramé est visible mais sans modulation de densité. Le fond et le texte restent lisibles.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="ng-halftone-scene" role="img" aria-label="Fond tramé en demi-teintes CSS">
<div class="ng-halftone-bg" aria-hidden="true"></div>
<div class="ng-halftone-pattern" aria-hidden="true"></div>
<!-- Facultatif : contenu textuel ou composant par-dessus le tramé -->
<div class="ng-halftone-content">
<h2>Votre titre</h2>
<p>Votre sous-titre</p>
</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 |
|---|---|---|
| background-size (.ng-halftone-pattern) | 8px 8px | Pas de la grille. Réduisez à 5px pour un tramé fin (impression offset), montez à 16px pour un motif aéré rétro-pop. |
| dot radius (1er stop radial-gradient de .ng-halftone-pattern) | 1px | Rayon du point. 0,5px = quasi texture, 2px = points BD, 3px = gros points comics bold. |
| opacity (.ng-halftone-pattern) | 0.6 | Intensité globale du tramé. 0,3 = texturé discret, 1,0 = contraste maximal, points pleins. |
| mix-blend-mode (.ng-halftone-pattern) | multiply | Mode de fusion. multiply sur fond sombre (points noirs s'effacent dans le noir), screen sur fond clair (points blancs s'effacent dans le blanc). |
| background (.ng-halftone-bg) | radial-gradient(circle, #8b5cf6, #0a0a0f 70%) | Couleur et forme du fond. Remplacez #8b5cf6 par votre couleur brand ; ajustez 70% pour élargir ou rétrécir la zone lumineuse centrale. |
| dot color (1er paramètre radial-gradient de .ng-halftone-pattern) | #000 | Couleur du point. Noir avec multiply sur fond sombre ; blanc avec screen sur fond clair ; couleur vive pour un tramé bicolore. |
FAQ
mix-blend-mode: multiply combiné au dégradé radial : là où le fond approche du noir pur (#0a0a0f), les points noirs multipliés par zéro deviennent invisibles. La densité perçue suit la luminosité du fond — c'est précisément ce qui imite le tramé offset, où l'encre ne s'imprime qu'où le support est suffisamment clair.mix-blend-mode de multiply à screen sur .ng-halftone-pattern et changez la couleur du point de #000 en #fff. En mode screen les points blancs éclaircissent le fond là où il est le plus foncé — la modulation s'inverse, les points ressortent dans les zones sombres.background-position de .ng-halftone-pattern : @keyframes ht-scroll { to { background-position: 8px 8px; } } avec animation: ht-scroll 0.4s linear infinite crée un défilement continu. Aucun JS nécessaire — pensez à désactiver l'animation via @media (prefers-reduced-motion: reduce) si vous activez ce mode.
