Shadow Perspective
Une carte indigo de 150 × 100 px posée au-dessus de son ombre au sol, une ellipse floue écrasée à plat ; au survol, au toucher ou au clavier, la carte monte de 10 px tandis que l'ombre reste au sol, pâlit de moitié et s'étale (flou de 10 à 15 px) : l'indice d'un objet qu'on soulève d'une table, rien d'autre ne bouge. CSS seul, sans JavaScript.
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-0020-root (fond #0a0a0f, 300 px de haut au minimum) centre un cadre .demo-3d de 280 × 200 px, puis .shadow-perspective-container, dont les 40 px de marge intérieure laissent la place à la levée et à l'ombre. L'objet est .shadow-perspective : 150 × 100 px, dégradé #6366f1 → #8b5cf6, coins de 0,75 rem, texte gras centré, tabindex="0", transition de 0,3 s sur sa transformation.
L'ombre est son pseudo-élément ::after : une ellipse noire à 30 % (rgba(0, 0, 0, .3), border-radius: 50%), large de 80 % de la carte, haute de 20 px, posée 20 px sous elle, floutée à 10 px et couchée par rotateX(80deg) — sans perspective au-dessus, cette rotation revient à l'écraser à 17 % de sa hauteur (cos 80°), soit environ 3,5 px avant le flou : une ombre de contact, plate. Au survol (ou :focus-visible), la carte prend translateY(-10px) et l'ombre passe à bottom: -30px, 50 % d'opacité et 15 px de flou, en 0,3 s. La carte monte de 10 px et l'ancrage de l'ombre recule de 10 px sous elle : à l'écran, l'ombre ne bouge pas, elle reste au sol, s'éclaircit et s'élargit. Mesuré : 2,4 % des pixels changent au survol, à l'identique dans Chromium 151, Firefox 153 et WebKit 26.5.
L'ombre est noire à 30 % : sur le fond sombre d'origine elle se voit à peine, et c'est la levée de la carte qui porte l'effet. Elle se lit vraiment sur un fond clair ou moyen — table, étagère, fiche produit —, comme dans les scènes ci-dessus. Le flou porte sur une ellipse déjà écrasée : il donne un bord doux sans épaissir l'ombre, ce qu'une box-shadow qui grandit ne sait pas faire (elle entoure toute la carte, pas seulement le dessous).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0020-rootretire les transitions et la levée : la carte reste posée, l'ombre s'éclaircit et s'étale d'un coup, et un liseré violet de 3 px (rgba(167, 139, 250, .6)) marque le survol et le focus, ce qui le rend visible même sur le fond sombre. Mesuré dans Chromium et Firefox : transformation inchangée, liseré présent au survol. - Clavier : la carte a
tabindex="0"et le focus donne la même levée que le survol, plus un liseré#c4b5fdde 2 px (10,7:1 sur le fond). Si la carte mène à une page, remplacez ladivpar un lien<a class="shadow-perspective" href="…">: rien d'autre ne change. - Contraste : texte blanc gras à 4,47:1 sur l'indigo
#6366f1et 4,2:1 sur le violet#8b5cf6, sous le seuil de 4,5:1 pour du texte de 16 px : foncez le dégradé si la carte porte un texte qui compte. - Toucher : au doigt, la carte touchée se soulève (mesuré en émulation tactile Chromium et dans Firefox) et reste levée jusqu'au toucher suivant.
Compatibilité navigateur
CSS seul (transform, filter: blur() sur un pseudo-élément, :focus-visible), aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même rendu au repos et au survol (moins de 0,2 % d'écart), même mouvement réduit, 0 erreur. Pas de plans 3D empilés : la rotation de l'ombre est un simple écrasement, rendu à l'identique par WebKit.
Sans filter, l'ombre devient une ellipse nette et sombre de 3,5 px : l'effet reste lisible, en plus dur. Sans :focus-visible, le focus clavier n'a que l'anneau du navigateur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0020-root">
<div class="demo-3d">
<div class="shadow-perspective-container"> <!-- 40 px de marge pour la levée et l'ombre -->
<div class="shadow-perspective" tabindex="0">Hover Me</div> <!-- ::after = ombre au sol -->
</div>
</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 |
|---|---|---|
Hauteur de levée (CSS — translateY(-10px) du survol) |
10 px | Pour que l'ombre reste au sol, reculez son ancrage d'autant : levée de 16 px, bottom: -36px au survol. |
Ombre au repos (CSS — ::after : couleur, bottom, largeur, filter) |
rgba(0, 0, 0, .3) ; 20 px sous l'objet ; 80 % ; flou de 10 px | Sur fond clair, une teinte chaude (brun à 40-60 %) fait plus naturel que le noir. La largeur suit la base de l'objet : 70 % pour un bol, 80 % pour une carte. |
Ombre levée (CSS — ::after du survol : bottom, opacity, filter) |
30 px ; 0,5 ; flou de 15 px | Plus l'objet monte, plus l'ombre doit pâlir et s'étaler : à 20 px de levée, essayez 0,35 et 20 px de flou. |
Écrasement de l'ombre (CSS — rotateX(80deg)) |
80° | 70° donne une ombre plus épaisse (une table vue de plus haut) ; 85° une ligne presque plate. |
Objet (CSS — taille, fond, coins de .shadow-perspective) |
150 × 100 px, #6366f1 → #8b5cf6, 0,75 rem | L'effet tient sur n'importe quelle forme : les scènes en font un téléphone, un pot et un bol. Le pseudo-élément ::before reste libre pour un détail (couvercle, bord). |
Durée (CSS — transition de la carte et de l'ombre) |
0,3 s | Gardez la même durée sur les deux, sinon l'ombre arrive avant ou après l'objet. |
FAQ
#0a0a0f, elle se confond presque avec le fond, et ce qu'on voit surtout, c'est la carte qui monte. L'effet est fait pour un fond clair ou moyen, là où une ombre de contact se lit comme dans la réalité : table, étagère, page produit. Les trois scènes le montrent sur des fonds crème et bois.box-shadow entoure toute la carte : elle dit « carte qui flotte au-dessus de la page ». Ici, l'ombre est une ellipse plate posée sous l'objet, séparée de lui : quand l'objet monte, elle reste au sol, pâlit et s'étale, ce qui dit « objet soulevé d'une surface ». C'est l'indice que donnent les photos de produits..shadow-perspective (ou donnez-lui l'image en fond), ajustez sa taille, et réglez la largeur de l'ombre sur la base de l'objet. Une image détourée (fond transparent) donne le meilleur résultat : l'ombre apparaît alors directement sous l'objet.
