Aller au contenu
Bibliotheque UIJABS

Textures et atmospheres 12 variantes

Ce qui remplace l'aplat de couleur. Une page dont tous les fonds sont des aplats parait toujours inachevee, quel que soit le soin apporte au reste. Trois regles : une atmosphere reste sous 12 % d'opacite quand du texte passe dessus, tout est en CSS ou SVG inline (aucune image, aucun poids, nettete parfaite), et une seule atmosphere par ecran.

A. Matieres

Grain, degrade en mesh, motifs, halos, formes organiques, bruit anime.

Sans grain
Avec grain
Grain

Le detail qui distingue un fond travaille d'un aplat. Un bruit SVG pose a 4 % casse la platitude d'un degrade sans se voir consciemment.

Voir le codeMasquer le code 
<div class="atm-duo">
  <div class="atm-vue" style="background:linear-gradient(140deg,#2b3a55,#5a4a6b 60%,#8a5a4a)">
    <span>Sans grain</span>
  </div>
  <div class="atm-vue atm-grain" style="background:linear-gradient(140deg,#2b3a55,#5a4a6b 60%,#8a5a4a)">
    <span>Avec grain</span>
  </div>
</div>
.atm-grain { position: relative; isolation: isolate; }
.atm-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
::after avec un feTurbulence SVG en data-URI, opacity .045, mix-blend-mode:overlay
Mesh chaud
Mesh froid
Degrade en mesh

Trois a quatre taches de couleur floutees, superposees. Remplace le degrade lineaire, trop reconnaissable, par quelque chose qui ne se lit pas comme un outil.

Voir le codeMasquer le code 
<div class="atm-duo">
  <div class="atm-vue atm-mesh atm-grain"><span>Mesh chaud</span></div>
  <div class="atm-vue atm-mesh atm-mesh--froid atm-grain"><span>Mesh froid</span></div>
</div>
.atm-mesh {
  background-color: #2a2036;
  background-image:
    radial-gradient(at 18% 22%, #b4632e 0px, transparent 52%),
    radial-gradient(at 82% 18%, #7a3f6b 0px, transparent 48%),
    radial-gradient(at 68% 78%, #3f5a7a 0px, transparent 52%),
    radial-gradient(at 25% 82%, #8a4a3c 0px, transparent 45%);
}
.atm-mesh--froid {
  background-color: #16283a;
  background-image:
    radial-gradient(at 22% 18%, #2f6b7a 0px, transparent 50%),
    radial-gradient(at 78% 28%, #3a4a8a 0px, transparent 48%),
    radial-gradient(at 60% 82%, #2f7a6b 0px, transparent 50%),
    radial-gradient(at 15% 75%, #4a3a7a 0px, transparent 46%);
}
plusieurs radial-gradient superposes, chacun a une position et une taille differentes
Grille
Points
Diagonales
Plan
Motifs

Grille technique, points, diagonales, quadrillage de plan. Ils sont montres ici a pleine intensite pour etre visibles ; dans un projet on les descend a 4 ou 6 % d'opacite, ou ils donnent une assise sans attirer l'oeil.

Voir le codeMasquer le code 
<div class="atm-quatre">
  <div class="atm-vue atm-vue--clair atm-p-grille"><span>Grille</span></div>
  <div class="atm-vue atm-vue--clair atm-p-points"><span>Points</span></div>
  <div class="atm-vue atm-vue--clair atm-p-lignes"><span>Diagonales</span></div>
  <div class="atm-vue atm-vue--clair atm-p-plan"><span>Plan</span></div>
</div>
.atm-p-grille {
  background-image:
    linear-gradient(var(--c-border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border-strong) 1px, transparent 1px);
  background-size: 24px 24px;
}
.atm-p-points {
  background-image: radial-gradient(var(--c-border-strong) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
.atm-p-lignes {
  background-image: repeating-linear-gradient(-45deg, var(--c-border-strong) 0 1px, transparent 1px 10px);
}
.atm-p-plan {
  background-image:
    linear-gradient(var(--c-border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border-strong) 1px, transparent 1px),
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
repeating-linear-gradient / radial-gradient en background-size fixe
Votre facture de chauffage divisee par trois Etude thermique offerte, aides deduites du devis
Halos lumineux

Deux ou trois taches floues derriere un contenu sombre. C'est l'atmosphere la plus repandue, donc la plus vite datee : la sauver en decalant les taches hors du cadre.

Voir le codeMasquer le code 
<div class="atm-vue atm-vue--haute atm-halos atm-grain">
  <div class="atm-contenu">
    <strong>Votre facture de chauffage divisee par trois</strong>
    <span>Etude thermique offerte, aides deduites du devis</span>
  </div>
</div>
.atm-halos { position: relative; isolation: isolate; overflow: hidden; background: #10141d; }
.atm-halos::before, .atm-halos::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
}
.atm-halos::before { width: 340px; height: 340px; top: -140px; left: -90px; background: #3a5f9e; opacity: .55; }
.atm-halos::after  { width: 300px; height: 300px; bottom: -130px; right: -70px; background: #9e5a3a; opacity: .5; }
.atm-contenu { position: relative; text-align: center; color: #fff; padding: var(--sp-6); }
.atm-contenu strong { display: block; font-size: clamp(20px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.atm-contenu span { display: block; margin-top: 8px; font-size: var(--fs-md); opacity: .78; }
::before/::after en blur-[90px] positionnes hors du cadre, overflow-hidden
Formes organiques

Une tache aux bords irreguliers plutot qu'un cercle. Trois valeurs de border-radius differentes suffisent : au-dela, la forme devient une flaque.

Voir le codeMasquer le code 
<div class="atm-formes">
  <div class="atm-blob"></div>
  <div class="atm-blob atm-blob--2"></div>
  <div class="atm-blob atm-blob--3"></div>
</div>
.atm-formes { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: center; padding: var(--sp-4) 0; }
.atm-blob {
  width: 150px; height: 150px;
  border-radius: 62% 38% 46% 54% / 54% 46% 54% 46%;
  background: linear-gradient(140deg, #d8853f, #a8543c);
  animation: atm-morph 14s ease-in-out infinite;
}
.atm-blob--2 { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; background: linear-gradient(140deg, #3f7ea8, #3a4a8a); animation-duration: 17s; animation-direction: reverse; }
.atm-blob--3 { border-radius: 54% 46% 38% 62% / 62% 54% 46% 38%; background: linear-gradient(140deg, #3f9e7a, #2f6b5a); animation-duration: 20s; }
@keyframes atm-morph {
  0%, 100% { border-radius: 62% 38% 46% 54% / 54% 46% 54% 46%; }
  33%      { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
  66%      { border-radius: 54% 46% 38% 62% / 62% 54% 46% 38%; }
}
border-radius avec huit valeurs (elliptique) plutot qu'une seule
Grain en mouvementDeplacement de 4 px, 8 images par seconde
Bruit anime

Un grain qui vibre tres legerement. A reserver a une banniere : c'est un cout de rendu permanent, coupe par prefers-reduced-motion.

Voir le codeMasquer le code 
<div class="atm-vue atm-vue--haute atm-mesh atm-bruit">
  <div class="atm-contenu"><strong>Grain en mouvement</strong><span>Deplacement de 4 px, 8 images par seconde</span></div>
</div>
.atm-bruit { position: relative; isolation: isolate; }
.atm-bruit::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* steps() plutot qu'une interpolation continue : c'est ce qui donne
     l'impression de grain de pellicule et non de texture qui glisse. */
  animation: atm-vibre 700ms steps(6) infinite;
}
@keyframes atm-vibre {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(2px, -3px); }
  60%  { transform: translate(-2px, -2px); }
  80%  { transform: translate(3px, 1px); }
  100% { transform: translate(0, 0); }
}
animation par pas (steps) sur la position du bruit, jamais en continu

B. Traitements

Duotone, vignettage, ombres colorees, bordure lumineuse, separateurs de section, et l'assemblage complet d'un fond de banniere.

Origine
Duotone bleu
Duotone chaud
Noir et blanc
Duotone

Ramener des photos disparates a une seule identite. Deux couleurs de marque remplacent les tons sombres et clairs : un fonds photo heteroclite devient coherent.

Voir le codeMasquer le code 
<div class="atm-quatre">
  <div class="atm-vue atm-photo1"><span>Origine</span></div>
  <div class="atm-vue atm-photo1 atm-duotone"><span>Duotone bleu</span></div>
  <div class="atm-vue atm-photo1 atm-duotone atm-duotone--chaud"><span>Duotone chaud</span></div>
  <div class="atm-vue atm-photo1 atm-nb"><span>Noir et blanc</span></div>
</div>
.atm-photo1 { background: linear-gradient(140deg, #4a6fa5 0%, #8a6a4a 45%, #c9b48a 100%); }
.atm-duotone { position: relative; filter: grayscale(1) contrast(1.15); isolation: isolate; }
.atm-duotone::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(140deg, #1c2f5e, #4ec3d9);
  mix-blend-mode: color;
}
.atm-duotone--chaud::before { background: linear-gradient(140deg, #4a1c1c, #f0b45a); }
.atm-nb { filter: grayscale(1) contrast(1.08); }
grayscale + un calque en mix-blend-mode:color ou une paire de multiply/screen
Voile du bas
Vignettage
Voile complet
Vignettage et voile

Poser du texte sur une image sans la retoucher. Le degre du voile se regle sur la zone occupee par le texte, pas sur l'image entiere.

Voir le codeMasquer le code 
<div class="atm-trois">
  <div class="atm-vue atm-photo1 atm-voile"><span>Voile du bas</span></div>
  <div class="atm-vue atm-photo1 atm-vignette"><span>Vignettage</span></div>
  <div class="atm-vue atm-photo1 atm-voile-total"><span>Voile complet</span></div>
</div>
.atm-voile, .atm-vignette, .atm-voile-total { position: relative; }
.atm-voile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,10,16,.82) 0%, rgba(8,10,16,.28) 42%, transparent 68%);
}
.atm-vignette::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 38%, rgba(8,10,16,.62) 100%);
}
.atm-voile-total::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(8,10,16,.52);
}
::after avec un linear-gradient from-black/75 to-transparent
Ombre neutrergba(16,24,40,.14)
Ombre teinteela couleur de l'objet, a 28 %
Autre teintel'ombre suit la couleur
Ombres colorees

Une ombre teintee de l'objet qu'elle porte plutot qu'un gris neutre. C'est le detail qui fait passer une carte de correcte a soignee.

Voir le codeMasquer le code 
<div class="atm-cartes">
  <div class="atm-c" style="--t:#2563eb"><b>Ombre neutre</b><span>rgba(16,24,40,.14)</span></div>
  <div class="atm-c atm-c--teinte" style="--t:#2563eb"><b>Ombre teintee</b><span>la couleur de l'objet, a 28 %</span></div>
  <div class="atm-c atm-c--teinte" style="--t:#c2410c"><b>Autre teinte</b><span>l'ombre suit la couleur</span></div>
</div>
.atm-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-5); padding: var(--sp-3) 0 var(--sp-6); }
.atm-c {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--t);
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(16,24,40,.3);
}
.atm-c--teinte { box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--t) 62%, transparent); }
.atm-c b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.atm-c span { display: block; margin-top: 4px; font-size: var(--fs-xs); opacity: .8; }
shadow-[0_12px_32px_-8px_var(--t)] avec la couleur de la carte
Formule ProLe plus choisi
Rotation lente12 secondes
Sans rotationdegrade fixe
Bordure lumineuse animee

Un liser qui tourne autour d'un bloc. A garder pour un seul element : une offre mise en avant, une nouveaute. Deux blocs anime cote a cote se neutralisent.

Voir le codeMasquer le code 
<div class="atm-trois">
  <div class="atm-lueur"><div class="atm-lueur__int"><b>Formule Pro</b><span>Le plus choisi</span></div></div>
  <div class="atm-lueur atm-lueur--lent"><div class="atm-lueur__int"><b>Rotation lente</b><span>12 secondes</span></div></div>
  <div class="atm-lueur atm-lueur--fixe"><div class="atm-lueur__int"><b>Sans rotation</b><span>degrade fixe</span></div></div>
</div>
.atm-lueur {
  position: relative;
  padding: 2px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.atm-lueur::before {
  content: "";
  position: absolute;
  inset: -150%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 250deg, var(--c-primary) 310deg, var(--c-accent) 360deg);
  animation: atm-tourne 5s linear infinite;
}
.atm-lueur--lent::before { animation-duration: 12s; }
.atm-lueur--fixe::before { animation: none; }
@keyframes atm-tourne { to { transform: rotate(360deg); } }
.atm-lueur__int {
  padding: var(--sp-5);
  border-radius: calc(var(--r-lg) - 2px);
  background: var(--c-surface);
  height: 100%;
}
.atm-lueur b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); }
.atm-lueur span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); }
conic-gradient sur un ::before en rotation, contenu opaque par-dessus
Diagonale
Vague
Entaille
Separateurs de section

Ce qui remplace le trait horizontal. Une vague, une diagonale ou une entaille marque le passage d'une section a l'autre sans ajouter de bloc.

Voir le codeMasquer le code 
<div class="atm-sep-demo">
  <div class="atm-sec atm-sec--diag"><span>Diagonale</span></div>
  <div class="atm-sec atm-sec--vague"><span>Vague</span></div>
  <div class="atm-sec atm-sec--entaille"><span>Entaille</span></div>
</div>
.atm-sep-demo { display: flex; flex-direction: column; }
.atm-sec {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: var(--sp-5);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.atm-sec--diag     { background: #2b3a55; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); margin-bottom: -1px; }
.atm-sec--vague    { background: #5a4a6b; clip-path: ellipse(140% 88% at 50% 12%); margin-bottom: -1px; padding-top: var(--sp-8); }
.atm-sec--entaille { background: #8a5a4a; clip-path: polygon(0 0, 44% 0, 50% 16%, 56% 0, 100% 0, 100% 100%, 0 100%); padding-top: var(--sp-8); }
clip-path: polygon(...) ou ellipse(...) sur la section suivante
Votre pompe a chaleur posee en trois semaines Etude thermique offerte, aides deduites du devis, equipes salariees
Fond de section complet

L'assemblage : mesh, grain, motif et halo poses ensemble, dans le bon ordre et aux bonnes opacites. C'est le gabarit a copier pour une banniere.

Voir le codeMasquer le code 
<section class="atm-complet">
  <div class="atm-complet__motif" aria-hidden="true"></div>
  <div class="atm-contenu">
    <strong>Votre pompe a chaleur posee en trois semaines</strong>
    <span>Etude thermique offerte, aides deduites du devis, equipes salariees</span>
    <div class="demo-row" style="justify-content:center;margin-top:20px">
      <button class="btn btn--plein btn--lg">Demander mon devis</button>
      <button class="btn btn--lg-verre btn--lg">06 12 34 56 78</button>
    </div>
  </div>
</section>
.atm-complet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: var(--sp-10) var(--sp-6);
  border-radius: var(--r-lg);
  background-color: #141a26;
  background-image:
    radial-gradient(at 16% 20%, #2f4a7a 0px, transparent 50%),
    radial-gradient(at 84% 26%, #6b3a5a 0px, transparent 46%),
    radial-gradient(at 62% 84%, #7a4a2f 0px, transparent 48%);
}
/* Le motif, tres pale, donne une assise au degrade. */
.atm-complet__motif {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .06;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 46px 46px;
}
/* Le grain, en dernier, unifie l'ensemble. */
.atm-complet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
quatre couches : mesh (fond), motif (4 %), halos (blur), grain (7 %), contenu