Paper Texture
Fond papier parchemin produit par feTurbulence fractalNoise en multiply — grain naturel, tampon encré, zéro JavaScript, zéro dépendance.
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
La texture est produite par un filtre SVG feTurbulence de type fractalNoise — un bruit de Perlin multi-échelle qui génère un champ aléatoire naturel et non périodique. Avec baseFrequency="0.65" et numOctaves="5", le filtre produit un grain fin proche des fibres de papier bois.
Ce filtre SVG est embarqué en entier dans une URL data:image/svg+xml appliquée sur le pseudo-élément ::before de .ng-paper-scene, à opacity: 0.08. L'opérateur mix-blend-mode: multiply fusionne le bruit avec le fond crème — les grains sombres soustraient de la base, les valeurs claires la laissent intacte, produisant l'aspect fibre naturelle caractéristique du vieux papier.
L'élément .ng-paper-stamp est un badge circulaire 100 % CSS : border-radius: 50%, bordure en tons rouge-encre semi-transparents (rgba(180, 50, 50, .4)), et un <span> en capitales serrées (letter-spacing: 1px, font-size: 0.55rem). Un transform: rotate(-15deg) lui donne l'aspect du tampon apposé en diagonale.
L'effet est entièrement sans JavaScript. La texture, le fond crème et le tampon sont des couches CSS pures empilées via pseudo-éléments et flux DOM normal — pas de canvas, pas de requestAnimationFrame, pas de dépendance. Le filtre SVG est un rendu statique que le navigateur peint une seule fois et met en cache.
Accessibilité
- prefers-reduced-motion non requis — l'effet est entièrement statique, aucune animation ne tourne. Les utilisateurs sensibles aux mouvements vestibulaires ne sont pas affectés.
- Le pseudo-élément
::beforeportant le bruit est purement décoratif. Ajoutezaria-hidden="true"sur la scène si elle est ornementale, ou conservez-la dans l'arbre d'accessibilité lorsqu'elle entoure du contenu lisible. - Contraste des textes : la couleur de titre
#2d2418sur fond crème#f5f0e8atteint un ratio ≈ 14:1, largement au-dessus de WCAG AA (4,5:1) et AAA (7:1). - Le texte du tampon utilise
rgba(180, 50, 50, 0.5)sur#f5f0e8— contraste inférieur à 3:1 à cette opacité. Le tampon est décoratif ; s'il porte une information, montez l'opacité à 0,85 minimum. - Aucune interaction clavier — le composant est passif (pas de clic, pas de focus). Aucun rôle ARIA supplémentaire requis au-delà de la structure de document standard.
Compatibilité navigateur
Requiert mix-blend-mode et les filtres SVG en data URI — supportés dans tous les navigateurs modernes depuis Edge 79 (2020).
Sur Internet Explorer (non ciblé), <code>mix-blend-mode</code> est ignoré — le <code>::before</code> s'affiche comme un voile bruit gris à 8 % d'opacité sans fusion. La lisibilité du contenu est préservée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="ng-paper-scene">
<!-- Texture parchemin générée en CSS via ::before -->
<div class="ng-paper-content">
<h3 class="ng-paper-title">…</h3>
<div class="ng-paper-line"></div>
<p class="ng-paper-text">…</p>
</div>
<div class="ng-paper-stamp">
<span>…</span>
</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 sur .ng-paper-scene | #f5f0e8 | Couleur de la feuille de papier. #ede8dc = parchemin sombre, #fff8f0 = crème léger, #e8e4d8 = gris sable vieilli. |
| baseFrequency dans feTurbulence | 0.65 | Grain du bruit fractal dans la data URI SVG. 0.40–0.50 = gros grain façon kraft ; 0.80–0.90 = grain fin façon offset. Modifiez la valeur directement dans la chaîne url(). |
| numOctaves dans feTurbulence | 5 | Niveau de détail du bruit dans la data URI SVG. 3 = texture douce et uniforme ; 7 = micro-détails riches. Coût de rendu nul — le SVG est statique. |
| opacity sur .ng-paper-scene::before | 0.08 | Intensité de la texture. 0.04 = quasi-imperceptible sur écran lumineux ; 0.18–0.22 = grain très marqué façon papier journal ou buvard. |
| mix-blend-mode sur .ng-paper-scene::before | multiply | Mode de fusion texture/fond. multiply = grains fondus dans la couleur crème. Sur fond sombre, multiply est invisible — utilisez soft-light ou overlay à la place. |
| transform sur .ng-paper-stamp | rotate(-15deg) | Angle du tampon. -30°→+10° pour un aspect casual ; 0° ou -5° pour un usage formel (certificat, document officiel). |
| border-color + color du span sur .ng-paper-stamp | rgba(180, 50, 50, .4/.5) | Couleur du tampon. rgba(30, 60, 120, .45) = encre bleue notariale ; rgba(20, 80, 40, .45) = vert officiel. Synchronisez border-color et color du span. |
| width / height sur .ng-paper-scene | 280px / 220px | Dimensions de la scène. Le ::before s'étire pour remplir n'importe quelle taille — passez 100% / 100% pour un fond pleine section. |
FAQ
feTurbulence est déterministe par défaut : même fréquence = même motif. Pour varier le grain d'une carte à l'autre, ajoutez seed="N" dans la balise feTurbulence de la data URI (N = entier quelconque) — chaque valeur de seed produit un motif de bruit distinct.::before sur l'élément cible (il doit avoir position: relative et un fond clair). La data URI SVG est autonome — elle fonctionne sur un div, une section, un article ou une cellule de tableau. Aucune autre classe de l'effet n'est requise.multiply rend la texture invisible (noir × bruit ≈ noir). Utilisez mix-blend-mode: soft-light ou overlay à la place, et optez pour un fond sombre chaud (#2a2318 plutôt que #000) pour que le grain reste perceptible.
