Depth of Field
Trois plans à des « distances » différentes — arrière-plan en haut à gauche, sujet au centre, premier plan en bas à droite — dont un seul est net : survoler, toucher ou atteindre au clavier un plan y déplace la mise au point (flou CSS de 0 à 4 px et léger changement d'échelle), un clic l'y garde. La profondeur de champ d'un objectif, rendue avec trois boutons et un flou CSS.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0027-root (fond #0a0a0f, 300 px de haut au minimum) contient la scène .dof-scene (toute la largeur × 250 px) et trois boutons .dof-layer : « Background » posé à 20 px du coin haut gauche (indigo à 40 %), « Focus » au centre (dégradé #6366f1 → #8b5cf6, ombre, au-dessus des autres) et « Foreground » à 20 px du coin bas droit (rose à 50 %). L'attribut data-focus de la scène dit quel plan est net, et le CSS fait le reste. Au repos (mid) : sujet net, les deux autres à blur(3px), l'arrière-plan réduit à 90 % et le premier plan grossi à 105 %. Sur bg : arrière-plan net à 100 %, sujet à 2 px, premier plan à 4 px. Sur fg : premier plan net à 100 %, sujet à 2 px, arrière-plan à 4 px et réduit à 85 %. Chaque changement glisse en 0,6 s (transition sur filter et transform).
Le script ne touche à aucun style : il ne fait que changer data-focus. Survoler un plan (pointerenter, qui sert aussi au doigt et au stylet) ou lui donner le focus clavier affiche un aperçu de la mise au point sur ce plan ; le quitter (pointerleave, blur) revient au plan gardé. Un clic, un toucher, Entrée ou Espace font du plan le plan gardé et mettent à jour aria-pressed sur les trois boutons. Comme les états vivent dans le CSS et non dans des styles en ligne, survol, clic et clavier se combinent sans s'écraser. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : après un clic sur « Background », la souris qui sort laisse l'arrière-plan net (flous 0 / 2 / 4 px), le survol de « Foreground » passe à 4 / 2 / 0 px, la sortie revient à 0 / 2 / 4 px.
Une instance démarre par scène [data-dof] trouvée sous une racine .fx-0027-root : deux copies sur une page ont chacune leur plan gardé (mesuré : un clic sur la seconde ne change rien à la première). Au doigt, mesuré avec de vrais événements tactiles dans Chromium : toucher « Background » le rend net et l'y garde. Le flou n'est qu'une image de la profondeur : rien n'est en 3D, aucune perspective ; ce sont l'écart de netteté (0, 2, 3, 4 px) et l'écart d'échelle (85 à 105 %) qui font lire trois distances.
Accessibilité
- Clavier : les trois plans sont de vrais
<button>. Tab donne le focus au plan suivant et y déplace la mise au point (mesuré dans Chromium et Firefox), Entrée ou Espace la garde, un contour blanc de 2 px marque le focus.aria-pressed="true"annonce le plan gardé aux lecteurs d'écran. Dans Safari, Tab ne passe par les boutons qu'avec Option + Tab ou l'option « Appuyer sur Tab pour mettre en évidence chaque élément » (comportement mesuré dans WebKit). - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0027-rootretire les transitions : la netteté et l'échelle changent d'un coup, sans glissement. Toutes les interactions restent (mesuré : mêmes flous après survol, clic et clavier, durée de transition 0 s). - Texte flou : un plan flou n'est pas lisible à l'œil, c'est le principe. Les lecteurs d'écran lisent les trois libellés normalement. Ne mettez dans un plan flou que ce qui peut attendre, et gardez le texte principal sur le plan net au repos.
- Contraste : texte blanc sur le dégradé du plan net, calculé à 4,5:1 sur
#6366f1et 4,2:1 sur#8b5cf6, juste sous le seuil de 4,5:1 pour un texte de 16 px : foncez légèrement le dégradé si le libellé est long. Les deux autres plans, une fois nets, dépassent 6:1.
Compatibilité navigateur
CSS (filter: blur(), transform: scale(), transitions, sélecteurs d'attribut) + 22 lignes de JavaScript (événements pointer, focus, clic), aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes flous dans tous les états, plan gardé après un clic, survol qui marche encore après le clic, deux copies indépendantes, transitions retirées en mouvement réduit. Toucher mesuré dans Chromium avec de vrais événements tactiles.
Sans JavaScript, la scène reste figée sur son état de départ (sujet net, deux plans flous) : les boutons ne font rien mais tout le texte reste dans la page. Sans filter (navigateur très ancien), les trois plans restent nets et seul le changement d'échelle marque le plan choisi.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0027-root">
<div class="dof-scene" data-dof="" data-focus="mid">
<button type="button" class="dof-layer dof-bg" data-plane="bg" aria-pressed="false">Background</button>
<button type="button" class="dof-layer dof-mid" data-plane="mid" aria-pressed="true">Focus</button>
<button type="button" class="dof-layer dof-fg" data-plane="fg" aria-pressed="false">Foreground</button>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Force du flou (CSS — blur(3px) au repos, blur(2px) et blur(4px) dans les règles [data-focus]) |
3 px au repos ; 2 et 4 px quand la mise au point bouge | Gardez un écart entre le plan voisin et le plan lointain (2 puis 4 px) : c'est lui qui donne l'idée de distance. Au-delà de 6 px, un texte de 13 px devient une tache ; sous 1,5 px, l'écart ne se voit plus. |
Vitesse de bascule (CSS — transition de .dof-layer) |
0,6 s | 0,3 s rend l'aperçu au survol plus vif (c'est le réglage des scènes) ; 1 s donne une mise au point lente, façon cinéma. En mouvement réduit, la transition est retirée de toute façon. |
Plan net au départ (HTML — data-focus et aria-pressed ; JS — var kept = 'mid') |
mid (le sujet) | Pour ouvrir sur l'arrière-plan, mettez data-focus="bg" sur la scène, aria-pressed="true" sur « Background » (et false sur les autres) et 'bg' dans le script. |
Place et taille des plans (CSS — .dof-bg, .dof-mid, .dof-fg) |
coin haut gauche, centre, coin bas droit | Placez-les où vous voulez en position: absolute. Plus un plan est grand, plus il est facile à survoler ; le plan du milieu garde z-index: 2 pour passer devant les autres s'ils se chevauchent. |
Échelle des plans (CSS — scale(.9), scale(1.05), scale(.85)) |
90 % au fond, 105 % devant, 85 % pour un fond très flou | L'échelle renforce la distance : un plan lointain un peu plus petit, un plan proche un peu plus gros. Restez entre 80 et 110 % pour que les libellés ne bougent pas trop. |
Contenu des plans (HTML — texte des trois <button>) |
Background, Focus, Foreground | Texte, petite image, ligne en <small> : tout ce qu'un bouton peut contenir. Pas de lien ni d'autre bouton à l'intérieur (HTML invalide, focus clavier confus). |
FAQ
<button> reçoit le focus, réagit à Entrée et à Espace, et aria-pressed annonce lequel est choisi. Les styles par défaut du bouton sont neutralisés dans le CSS (border: 0, police héritée) : visuellement, ce sont trois cartes.
